mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-30 06:09:34 +08:00
1e0c034353
* docs: update demo * fix: should show input value
2.5 KiB
2.5 KiB
category | type | title |
---|---|---|
Components | Form Controls | 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.
API
<Cascader options={options} onChange={onChange} />
Property | Description | Type | Default |
---|---|---|---|
options | data options of cascade | object | - |
defaultValue | initial selected value | array | [] |
value | selected value | array | - |
onChange | callback when finishing cascader select | function(value, selectedOptions) |
- |
displayRender | render function of displaying selected options | function(label, selectedOptions) |
label => label.join(' / ') |
style | additional style | string | - |
className | additional css class | string | - |
popupClassName | additional className of popup overlay | string | - |
popupPlacement | use preset popup align config from builtinPlacements:bottomLeft bottomRight topLeft topRight |
string | bottomLeft |
placeholder | input placeholder | string | 'Please select' |
size | input size, one of large default small |
string | default |
disabled | whether disabled select | boolean | false |
allowClear | whether allow clear | boolean | true |
expandTrigger | expand current item when click or hover, one of 'click' 'hover' | string | 'click' |
changeOnSelect | change value on each selection if set to true, see above demo for details | boolean | false |
showSearch | Whether show search input in single mode. | Boolean or Object | false |
notFoundContent | Specify content to show when no result matches. | String | 'Not Found' |
Fields in showSearch
:
Property | Description | Type | Default |
---|---|---|---|
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 |
|
render | Used to render filtered options. | function(inputValue, path): React.ReactNode |
|
sort | Used to sort filtered options. | function(a, b, inputValue) |
|
matchInputWidth | Whether the width of result list equals to input's | boolean |