rc-cascader
React Cascader Component
![npm download](https://img.shields.io/npm/dm/rc-cascader.svg?style=flat-square)
Browser Support
![IE](https://raw.github.com/alrra/browser-logos/master/internet-explorer/internet-explorer_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/safari/safari_48x48.png) |
---|
IE 8+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
Screenshots
Example
http://react-component.github.io/cascader/
Install
![rc-cascader](https://nodei.co/npm/rc-cascader.png)
$ npm install rc-cascader --save
Usage
import React from 'react';
import Cascader from 'rc-cascader';
const options = [{
'label': '福建',
'value': 'fj',
'children': [{
'label': '福州',
'value': 'fuzhou',
'children': [{
'label': '马尾',
'value': 'mawei',
}],
}, {
'label': '泉州',
'value': 'quanzhou',
}],
}, {
'label': '浙江',
'value': 'zj',
'children': [{
'label': '杭州',
'value': 'hangzhou',
'children': [{
'label': '余杭',
'value': 'yuhang',
}],
}],
}, {
'label': '北京',
'value': 'bj',
'children': [{
'label': '朝阳区',
'value': 'chaoyang',
}, {
'label': '海淀区',
'value': 'haidian',
}],
}];
React.render(
<Cascader options={options}>
...
</Cascader>
, container);
API
props
name | type | default | description |
---|
options | Object | | The data options of cascade |
value | Array | | selected value |
defaultValue | Array | | initial selected value |
onChange | Function(value, selectedOptions) | | callback when finishing cascader select |
changeOnSelect | Boolean | false | change value on each selection |
loadData | Function(selectedOptions) | | callback when click any option, use for loading more options |
expandTrigger | String | 'click' | expand current item when click or hover |
popupVisible | Boolean | | visibility of popup overlay |
onPopupVisibleChange | Function(visible) | | callback when popup overlay's visibility changed |
transitionName | String | | transition className like "slide-up" |
prefixCls | String | rc-cascader | prefix className of popup overlay |
popupClassName | String | | additional className of popup overlay |
popupPlacement | String | bottomLeft | use preset popup align config from builtinPlacements:bottomRight topRight bottomLeft topLeft |
getPopupContainer | function(trigger:Node):Node | () => document.body | container which popup select menu rendered into |
dropdownMenuColumnStyle | Object | | style object for each cascader pop menu |
fieldNames | Object | { label: 'label', value: 'value', children: 'children' } | custom field name for label and value and children |
expandIcon | ReactNode | > | specific the default expand icon |
loadingIcon | ReactNode | > | specific the default loading icon |
option
name | type | default | description |
---|
label | String | | option text to display |
value | String | | option value as react key |
disabled | Boolean | | disabled option |
children | Array | | children options |
Development
$ npm install
$ npm start
Test Case
$ npm test
Coverage
$ npm run coverage
License
rc-cascader is released under the MIT license.