React TreeSelect Component
npm install
npm start
http://localhost:8000/examples/
online example: http://react-component.github.io/tree-select/
name | description | type | default |
---|---|---|---|
className | additional css class of root dom node | String | '' |
prefixCls | prefix class | String | '' |
animation | dropdown animation name. only support slide-up now | String | '' |
transitionName | dropdown css animation name | String | '' |
choiceTransitionName | css animation name for selected items at multiple mode | String | '' |
dropdownMatchSelectWidth | whether dropdown's with is same with select | bool | true |
dropdownClassName | additional className applied to dropdown | String | - |
dropdownStyle | additional style applied to dropdown | Object | {} |
dropdownPopupAlign | specify alignment for dropdown | Object | - |
notFoundContent | specify content to show when no result matches. | String | 'Not Found' |
showSearch | whether show search input in single mode | bool | true |
allowClear | whether allowClear | bool | false |
tags | when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | bool | false |
maxTagTextLength | max tag text length to show | number | - |
combobox | enable combobox mode(can not set multiple at the same time) | bool | false |
multiple | whether multiple select | bool | false |
disabled | whether disabled select | bool | false |
defaultValue | initial selected treeNode(s) | String/Array | - |
value | current selected treeNode(s) | String/Array | - |
labelInValue | whether to embed label in value, see above value type | Bool | false |
onChange | called when select treeNode or input value change(combobox) | function(value, label) | - |
onSelect | called when select treeNode | function(value, node) | - |
onSearch | called when input changed | function | - |
showCheckedStrategy | TreeSelect.SHOW_ALL : show all checked treeNodes (Include parent treeNode). TreeSelect.SHOW_PARENT : show checked treeNodes (Just show parent treeNode). Default just show child. |
enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD |
treeIcon | show tree icon | bool | false |
treeLine | show tree line | bool | false |
treeDefaultExpandAll | default expand all treeNode | bool | false |
treeCheckable | whether tree show checkbox (select callback will not fire) | bool | false |
treeCheckStrictly | check node precisely, parent and children nodes are not associated | bool | false |
filterTreeNode | filter some treeNodes as you need. it should return true | function(treeNode) | - |
treeNodeFilterProp | which prop value of treeNode will be used for filter if filterTreeNode return true | String | 'value' |
treeNodeLabelProp | which prop value of treeNode will render as content of select | String | 'title' |
treeData | treeNodes data Array, if set it then you need not to construct children TreeNode. (if value is not unique of the whole array, you must provide key as unique id) |
array<{value, label, children}> | [] |
loadData | load data asynchronously | function(node) | - |
note: you'd better to use
treeData
instead of using TreeNode.
name | description | type | default |
---|---|---|---|
disabled | disable treeNode | bool | false |
key | it's value must be unique across the tree's all TreeNode, you must set it | String | - |
value | default as treeNodeFilterProp | String | '' |
title | tree/subTree's title | String | '---' |
isLeaf | whether it's leaf node | bool | false |
http://localhost:8000/tests/runner.html?coverage
rc-tree-select is released under the MIT license.