ant-design/components/cascader/index.en-US.md
DerianRambo b29c314b4c
docs: improved grammar on certain documentation pages ()
* button documentation grammar fixes

* english float button documentation changes

* english documentation grammar changes for icons

* english typography documentation grammar changes

* english divider documenation changes

* english layout documentation fixes

* english cascader documentation improvements

* english color-picker documentation changes

* english date-picker documentation changes

* english form documentation changes

* English documentation changes for select

* English documentation changes for slider

* English documentation changes for time-picker

* English documenation changes for transfer
2024-06-12 14:27:15 +08:00

7.4 KiB
Raw Blame History

category group title description cover coverDark demo
Components Data Entry Cascader Cascade selection box. https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ngTnQZNOcK0AAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Nt8xR7afyr0AAAAAAAAAAAAADrJ8AQ/original
cols
2

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 classifications separated for easy selection.
  • Chooses cascade items in one float layer for better user experience.

Examples

Basic Default value Custom trigger Hover Disabled option Change on select Multiple ShowCheckedStrategy Size Custom render Search Load Options Lazily Custom Field Names Custom Icons Custom dropdown Placement Status Panel _InternalPanelDoNotUseOrYouWillBeFired

API

Common props refCommon props

<Cascader options={options} onChange={onChange} />
Property Description Type Default Version
allowClear Show clear button boolean | { clearIcon?: ReactNode } true 5.8.0: Support object type
autoClearSearchValue Whether the current search will be cleared on selecting an item. Only applies when multiple is true boolean true 5.9.0
autoFocus If get focus when component mounted boolean false
changeOnSelect (Work on single select) Change value on each selection if set to true, see above demo for details boolean false
className The additional css class string -
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 -
popupClassName The additional className of popup overlay string - 4.23.0
dropdownRender Customize dropdown content (menus: ReactNode) => ReactNode - 4.4.0
expandIcon Customize the current item expand icon ReactNode - 4.4.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 -
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 string 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
showSearch Whether show search input in single mode boolean | Object false
size The input size large | middle | small -
status Set validation status 'error' | 'warning' - 4.19.0
style The additional style CSSProperties -
suffixIcon The custom suffix icon ReactNode -
value The selected value string[] | number[] -
variant Variants of selector outlined | borderless | filled outlined 5.13.0
onChange Callback when finishing cascader select (value, selectedOptions) => void -
onDropdownVisibleChange Callback when popup shown or hidden (value) => void - 4.17.0
multiple Support multiple or not boolean - 4.17.0
removeIcon The custom remove icon ReactNode -
showCheckedStrategy The way show selected item in box. ** 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
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
dropdownMenuColumnStyle The style of the drop-down menu column CSSProperties -
loadingIcon The appearance of lazy loading (now is useless) ReactNode -
optionRender Customize the rendering dropdown options (option: Option) => React.ReactNode - 5.16.0

showSearch

Property Description Type Default Version
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) -

Option

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;
}

Methods

Name Description Version
blur() Remove focus
focus() Get focus

Design Token