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
Separate trigger button and result.
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.
Cascade selection box for selecting province/city/district.
Hover to expand sub menu, click to select option.
Allow only select parent options.
Cascader API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| 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) |
| ShowSearch | ParameterAllow searching 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> | -- |
| BoundaryAdjustMode | ParameterOverlay adjustment strategy (when for example browser resize is happening) | TriggerBoundaryAdjustMode | -- |
| AllowClear | ParameterShow clear button. Has no effect if AntDesign.AntInputComponentBase`1.Value type default is also in the list of SelectOption, unless used with AntDesign.SelectBase`2.ValueOnClear. |
Boolean | -- |
| AutoClearSearchValue | ParameterWhether the current search will be cleared on selecting an item. | Boolean | -- |
| Disabled | ParameterWhether the Select component is disabled. | Boolean | -- |
| Mode | ParameterSet mode of Select - default | multiple | tags | SelectMode | -- |
| EnableSearch | ParameterIndicates whether the search function is active or not. Always true for mode tags. | Boolean | -- |
| SearchDebounceMilliseconds | ParameterDelays the processing of the search input event until the user has stopped typing for a predetermined amount of time. Default to 250ms. | Int32 | -- |
| Loading | ParameterShow loading indicator. You have to write the loading logic on your own. | Boolean | -- |
| Open | ParameterControlled open state of dropdown. | Boolean | -- |
| OpenChanged | ParameterCallback function that is called when open state changes. | EventCallback<Boolean> | -- |
| Placeholder | ParameterPlaceholder of select. | String | -- |
| OnFocus | ParameterCalled when focus. | EventCallback | -- |
| AutoFocus | ParameterAuto focus. | Boolean | -- |
| SortByGroup | ParameterThe name of the property to be used as a group indicator. If the value is set, the entries are displayed in groups. Use additional SortByGroup and SortByLabel. | SortDirection | -- |
| SortByLabel | ParameterSort items by label value. None | Ascending | Descending | SortDirection | -- |
| HideSelected | ParameterHides the selected items when they are selected. | Boolean | -- |
| ValueChanged | ParameterUsed for the two-way binding. | EventCallback<String> | -- |
| ValuesChanged | ParameterUsed for the two-way binding. | EventCallback<IEnumerable<String>> | -- |
| SuffixIcon | ParameterThe custom suffix icon. | RenderFragment | -- |
| PrefixIcon | ParameterThe custom prefix icon. | RenderFragment | -- |
| AccessKey | ParameterThe accesskey global attribute. | String | -- |
| DefaultValues | ParameterUsed when Mode = multiple | tags - The values are used during initialization and when pressing the Reset button within Forms. | IEnumerable<String> | -- |
| OnClearSelected | ParameterCalled when the user clears the selection. | EventCallback | -- |
| ChildContent | ParameterChild content to be rendered inside the Cascader. |
RenderFragment | -- |
| Unbound | ParameterChildElement with ElementReference set to avoid wrapping div. | RenderFragment<ForwardRef> | -- |
| OnSelectedItemChanged | ParameterCalled when the selected item changes. | EventCallback<String> | -- |
| OnSelectedItemsChanged | ParameterCalled when the selected items changes. | EventCallback<IEnumerable<String>> | -- |
| Values | ParameterGet or set the selected values. | IEnumerable<String> | -- |
| CustomTagLabelToValue | ParameterConverts custom tag (a string) to TItemValue type. | Func<String, String> | -- |
| SelectOptions | ParameterUsed for rendering select options manually. | RenderFragment | -- |
| MaxTagTextLength | ParameterHow long (number of characters) a tag will be. Only for Mode = "multiple" or Mode = "tags" | Int32 | -- |
| LabelInValue | ParameterWhether to embed label in value, turn the format of value from TItemValue to string (JSON) e.g. { "value": TItemValue, "label": "Label value" } | Boolean | -- |
| MaxTagCount | ParameterMax tag count to show. responsive will cost render performance. | OneOf<Int32, ResponsiveTag> | -- |
| ValueOnClear | ParameterWhen Clear button is pressed, Value will be set to whatever is set in ValueOnClear | String | -- |
| ItemLabel | ParameterSpecifies the label property in the option object. If use this property, should not use AntDesign.SelectBase`2.LabelName |
Func<String, String> | -- |
| ItemValue | ParameterSpecifies the value property in the option object. If use this property, should not use AntDesign.SelectBase`2.ValueName |
Func<String, String> | -- |
| LabelName | ParameterThe name of the property to be used for the label. | String | -- |
| ValueName | ParameterThe name of the property to be used for the value. | String | -- |
| OnMouseEnter | ParameterCalled when mouse enter. | Action | -- |
| OnMouseLeave | ParameterCalled when mouse leave. | Action | -- |
| PopupContainerSelector | ParameterUse this to fix overlay problems e.g. #area | String | -- |
| DropdownRender | ParameterCustomize dropdown content. The context is the original content. | RenderFragment<RenderFragment> | -- |
| LabelTemplate | ParameterIs used to customize the label style. | RenderFragment<String> | -- |
| MaxTagPlaceholder | ParameterPlaceholder for hidden tags. If used with ResponsiveTag.Responsive, implement your own handling logic. | RenderFragment<IEnumerable<String>> | -- |
| ShowSearchIcon | ParameterWhether show search input in single mode. | Boolean | -- |
| ShowArrowIcon | Parameter | Boolean | -- |
| 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 | -- |
| 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, `InputSize.Large` is used. Available: `InputSize.Large` `InputSize.Default` `InputSize.Small` | InputSize | InputSize.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. |