Importimport { Cascader } from 'antd'; |
Common props ref：Common props
<Cascader options={options} onChange={onChange} />
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| allowClear | Show clear button | boolean | { clearIcon?: ReactNode } | true | 5.8.0: Support object type | clearIcon: 6.4.0 |
Whether the current search will be cleared on selecting an item. Only applies when multiple is true | boolean | true | 5.9.0 | × | |
Whether has border style, please use variant instead | boolean | true | - | × | |
| changeOnSelect | Change value on each selection if set to true, see above demo for details | boolean | false | × | |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 5.25.0 | |
| defaultOpen | Initial visible of cascader popup | boolean | - | × | |
| defaultValue | Initial selected value | string[] | number[] | [] | × | |
| disabled | Whether disabled select | boolean | false | × | |
| displayRender | The render function of displaying selected options | (label, selectedOptions) => ReactNode | label => label.join(/) | multiple: 4.18.0 | × |
| tagRender | Custom render function for tags in multiple mode | (label: string, onClose: function, value: string) => ReactNode | - | × | |
The additional className of popup overlay, use classNames.popup.root instead | string | - | 4.23.0 | × | |
The additional className of popup overlay, please use classNames.popup.root instead | string | - | - | × | |
Customize dropdown content, use popupRender instead | (menus: ReactNode) => ReactNode | - | 4.4.0 | × | |
| popupRender | Customize dropdown content | (menus: ReactNode) => ReactNode | - | × | |
The style of dropdown menu, use styles.popup.root instead | CSSProperties | - | × | ||
| expandIcon | Customize the current item expand icon | ReactNode | - | 4.4.0 | 6.3.0 |
| expandTrigger | expand current item when click or hover, one of click hover | string | click | × | |
| fieldNames | Custom field name for label and value and children | object | { label: label, value: value, children: children } | × | |
| getPopupContainer | Parent Node which the selector should be rendered to. Default to body. When position issues happen, try to modify it into scrollable content and position it relative. example | function(triggerNode) | () => document.body | × | |
| loadData | To load option lazily, and it cannot work with showSearch | (selectedOptions) => void | - | × | |
| loadingIcon | Customize the loading icon | ReactNode | - | 6.3.0 | |
| maxTagCount | Max tag count to show. responsive will cost render performance | number | responsive | - | 4.17.0 | × |
| maxTagPlaceholder | Placeholder for not showing tags | ReactNode | function(omittedValues) | - | 4.17.0 | × |
| maxTagTextLength | Max tag text length to show | number | - | 4.17.0 | × |
| notFoundContent | Specify content to show when no result matches | ReactNode | Not Found | × | |
| open | Set visible of cascader popup | boolean | - | 4.17.0 | × |
| options | The data options of cascade | Option[] | - | × | |
| placeholder | The input placeholder | string | - | × | |
| placement | Use preset popup align config from builtinPlacements | bottomLeft bottomRight topLeft topRight | bottomLeft | 4.17.0 | × |
| prefix | The custom prefix | ReactNode | - | 5.22.0 | × |
Whether to show the arrow icon, please use suffixIcon={null} instead | boolean | true | - | × | |
| showSearch | Whether show search input in single mode | boolean | Object | false | searchIcon: 6.4.0 | |
| size | The input size | large | medium | small | medium | × | |
| status | Set validation status | 'error' | 'warning' | - | 4.19.0 | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 5.25.0 | |
| suffixIcon | The custom suffix icon | ReactNode | - | 6.4.0 | |
| value | The selected value | string[] | number[] | - | × | |
| variant | Variants of selector | outlined | borderless | filled | underlined | outlined | 5.13.0 | underlined: 5.24.0 | 5.19.0 |
| onChange | Callback when finishing cascader select | (value, selectedOptions) => void | - | × | |
| onClear | Called when clear | () => void | - | - | × |
Callback when popup shown or hidden, use onOpenChange instead | (value) => void | - | 4.17.0 | × | |
| onOpenChange | Callback when popup shown or hidden | (value) => void | - | × | |
Callback when popup shown or hidden, please use onOpenChange instead | (value) => void | - | - | × | |
| multiple | Support multiple or not | boolean | - | 4.17.0 | × |
| removeIcon | The custom remove icon | ReactNode | - | 6.4.0 | |
| showCheckedStrategy | The way to show selected items in the box (only effective when multiple is true). Cascader.SHOW_CHILD: just show child treeNode. Cascader.SHOW_PARENT: just show parent treeNode (when all child treeNode under the parent treeNode are checked) | Cascader.SHOW_PARENT | Cascader.SHOW_CHILD | Cascader.SHOW_PARENT | 4.20.0 | × |
Set search value, Need work with showSearch | string | - | 4.17.0 | × | |
| The callback function triggered when input changed | (search: string) => void | - | 4.17.0 | × | |
The style of the drop-down menu column, use styles.popup.listItem instead | CSSProperties | - | × | ||
The style of the drop-down menu column, use styles.popup.listItem instead | CSSProperties | - | × | ||
| optionRender | Customize the rendering dropdown options | (option: Option) => React.ReactNode | - | 5.16.0 | × |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when multiple is true | boolean | true | 5.9.0 |
| filter | The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | function(inputValue, path): boolean | - | |
| limit | Set the count of filtered items | number | false | 50 | |
| matchInputWidth | Whether the width of list matches input, (how it looks) | boolean | true | |
| render | Used to render filtered options | function(inputValue, path): ReactNode | - | |
| sort | Used to sort filtered options | function(a, b, inputValue) | - | |
| searchValue | Set search value, Need work with showSearch | string | - | 4.17.0 |
| onSearch | The callback function triggered when input changed | (search: string) => void | - | 4.17.0 |
| searchIcon | Customize the search icon | ReactNode | - | 6.3.0 |
interface Option {value: string | number;label?: React.ReactNode;disabled?: boolean;children?: Option[];// Determines if this is a leaf node(effective when `loadData` is specified).// `false` will force trade TreeNode as a parent node.// Show expand icon even if the current node has no children.isLeaf?: boolean;}
| Name | Description | Version |
|---|---|---|
| blur() | Remove focus | |
| focus() | Get focus |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| controlItemWidth | Width of item | string | number | 111 |
| controlWidth | Width of Cascader | string | number | 184 |
| dropdownHeight | Height of dropdown | string | number | 180 |
| menuPadding | Padding of menu item (single column) | Padding<string | number> | undefined | 4 |
| optionPadding | Padding of menu item | Padding<string | number> | undefined | 5px 12px |
| optionSelectedBg | Background color of selected item | string | #e6f4ff |
| optionSelectedColor | Text color when option is selected | string | rgba(0,0,0,0.88) |
| optionSelectedFontWeight | Font weight of selected item | FontWeight | undefined | 600 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBgContainer | Container background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`. | string | #ffffff |
| colorBgContainerDisabled | Control the background color of container in disabled state. | string | rgba(0,0,0,0.04) |
| colorBorder | Default border color, used to separate different elements, such as: form separator, card separator, etc. | string | #d9d9d9 |
| colorHighlight | Control the color of page element when highlighted. | string | #ff4d4f |
| colorIcon | Weak action. Such as `allowClear` or Alert close button | string | rgba(0,0,0,0.45) |
| colorPrimary | Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics. | string | #1677ff |
| colorPrimaryBorder | The stroke color under the main color gradient, used on the stroke of components such as Slider. | string | #91caff |
| colorPrimaryHover | Hover state under the main color gradient. | string | #4096ff |
| colorSplit | Used as the color of separator, this color is the same as colorBorderSecondary but with transparency. | string | rgba(5,5,5,0.06) |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextDisabled | Control the color of text in disabled state. | string | rgba(0,0,0,0.25) |
| colorWhite | Pure white color don't changed by theme | string | #fff |
| borderRadiusSM | SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size | number | 4 |
| controlInteractiveSize | Control the interactive size of control component. | number | 16 |
| controlItemBgHover | Control the background color of control component item when hovering. | string | rgba(0,0,0,0.04) |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| fontSizeIcon | Control the font size of operation icon in Select, Cascader, etc. Normally same as fontSizeSM. | number | 12 |
| fontSizeLG | Large font size | number | 16 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineType | Border style of base components | string | solid |
| lineWidth | Border width of base components | number | 1 |
| lineWidthBold | The default line width of the outline class components, such as Button, Input, Select, etc. | number | 2 |
| lineWidthFocus | Control the width of the line when the component is in focus state. | number | 3 |
| marginXS | Control the margin of an element, with a small size. | number | 8 |
| motionDurationFast | Motion speed, fast speed. Used for small element animation interaction. | string | 0.1s |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| motionEaseInBack | Preset motion curve. | string | |
| motionEaseOutBack | Preset motion curve. | string | |
| paddingXS | Control the extra small padding of the element. | number | 8 |
| paddingXXS | Control the extra extra small padding of the element. | number | 4 |