ant-design/components/cascader/index.en-US.md
ddcat1115 0baef0627e docs: 调整组件导航结构 (#3758)
- Layout 更名为 Grid
2016-11-09 14:43:32 +08:00

2.8 KiB
Raw Blame History

category type title
Components Data Entry 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 builtinPlacementsbottomLeft 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'
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

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