Ant Design Blazor
Cascader
Cascade selection box.
When To Use
- When you need to select from a set of associated data set. Such as province/city/district, company level, things classification.
- When selecting from a large data set, with multi-stage classification separated for easy selection.
- Chooses cascade items in one float layer for better user experience.
Examples
Cascade selection box for selecting province/city/district.
Hover to expand sub menu, click to select option.
Allow only select parent options.
Specifies default value by an array.
Disable option by specifying the disabled property in options. You can also disable an entire component through its Disabled parameter.
Cascade selection box of different sizes.
Cascader API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| AllowClear | ParameterWhether to allow clearing or not | Boolean | true |
| BoundaryAdjustMode | ParameterOverlay adjustment strategy (when for example browser resize is happening) | TriggerBoundaryAdjustMode | -- |
| ChangeOnSelect | ParameterChange value on each selection if set to true, only chage on final selection if false. | Boolean | -- |
| DefaultValue | ParameterInitially selected value | String | -- |
| ExpandTrigger | ParameterWhen to expand the current item - click or hover | String | click |
| NotFoundContent | ParameterEmpty description for when not found | String | No Data (in current locale) |
| Placeholder | ParameterPlaceholder for input | String | Please select (in current locacle) |
| PopupContainerSelector | ParameterElement to show popup container in | String | -- |
| ShowSearch | ParameterAllow searching or not | Boolean | -- |
| Disabled | ParameterDisable input or not | Boolean | -- |
| OnChange | ParameterCallback executed when the selected value changesInstead use SelectedNodesChanged. Obsolete Will be removed in a future version. |
Action<List<CascaderNode>, String, String> | -- |
| SelectedNodesChanged | ParameterCallback executed when the selected value changes | EventCallback<CascaderNode[]> | -- |
| Options | ParameterOptions for the overlay | IEnumerable<CascaderNode> | -- |
| Placement | ParameterPlacement of the overlay. Defaults to AntDesign.Placement.BottomLeft. |
Placement | Placement.BottomLeft |
| ValidationMessages | Validation messages for the FormItem | String[] | -- |
| AdditionalAttributes | ParameterGets or sets a collection of additional attributes that will be applied to the created element. | IReadOnlyDictionary<String, Object> | -- |
| Value | ParameterGets or sets the value of the input. This should be used with two-way binding. | String | -- |
| ValueChanged | ParameterCallback that updates the bound value. | EventCallback<String> | -- |
| ValueExpression | ParameterAn expression that identifies the bound value. | Expression<Func<String>> | -- |
| ValuesExpression | ParameterAn expression that identifies the enumerable of bound values. | Expression<Func<IEnumerable<String>>> | -- |
| Size | ParameterThe size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` | String | AntSizeLDSType.Default |
| CultureInfo | ParameterWhat Culture will be used when converting string to value and value to string Useful for InputNumber component. | CultureInfo | CultureInfo.CurrentCulture |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
CascaderNode API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Label | Label displayed for value | String | -- |
| Value | Value for when option is selected | String | -- |
| Disabled | Disable the option or not | Boolean | false |
| Children | Options under this one | IEnumerable<CascaderNode> | -- |
TriggerBoundaryAdjustMode API#
Underlying Type: Int32
| Name | Description |
|---|---|
| None | Do not auto adjust |
| InView | The default, the viewport boundaries are the boundaries that are used for calculation if overlay is fully visible. Attempt to fit the overlay so it is always fully visible in the viewport. So if the overlay is outside of the viewport ("overflows"), then reposition calculation is going to be attempted. |
| InScroll | The document boundaries are the boundaries used for calculation if overlay needs to be reposition. So even if the overlay is outside of the viewport, the overlay may still be shown as long as it does not "overflow" the document boundaries. |