rc-cascader
React Cascader Component
Browser Support
IE 8+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
Screenshots
Development
npm install
npm start
Example
http://react-component.github.io/cascader/
Feature
- support ie8,ie8+,chrome,firefox,safari
Keyboard
install
Usage
var Cascader = require('rc-cascader');
var React = require('react');
const addressOptions = [{
'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} />, 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 |
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 |
Test Case
http://localhost:8000/tests/runner.html?coverage
Coverage
License
rc-cascader is released under the MIT license.