1.1.6 • Published 10 years ago
rc-tree-select-wl v1.1.6
rc-tree-select
React TreeSelect Component
Browser Support
![]() | ![]() | ![]() | ![]() | ![]() |
|---|---|---|---|---|
| IE 8+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
Screenshots
Development
npm install
npm startExample
http://localhost:8000/examples/
online example: http://react-component.github.io/tree-select/
Feature
- support ie8,ie8+,chrome,firefox,safari
Keyboard
install
Usage
see examples
API
TreeSelect props
| 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 | {} |
| 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 option(s) | String/Array | - |
| value | current selected option(s) | String/Array | - |
| 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 | - |
| 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 |
| 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) | - |
TreeNode props
note: you'd better to use
treeDatainstead 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 |
Test Case
http://localhost:8000/tests/runner.html?coverage
Coverage
License
rc-tree-select is released under the MIT license.





