TL;DR
uxcore-collapse ui component for react
Setup develop environment
$ git clone https://github.com/uxcore/uxcore-collapse && cd uxcore-collapse$ npm install$ npm start
Usage
<Collapse defaultActiveKey="1" onChange=callback> <Panel header=`This is panel header 1` key="1"> <p>text</p> </Panel> <Panel header=`This is panel header 2` key="2"> <p>text</p> </Panel> <Panel header=`This is panel header 3` key="3"> <p>text</p> </Panel></Collapse>
Demo
http://uxco.re/components/collapse/
API
Props
Collapse
配置项 | 类型 | 必填 | 默认值 | 功能/备注 |
---|---|---|---|---|
prefixCls | string | optional | kuma-collapse |
默认类名,用户可以通过修改此项来完成样式的定制 |
activeKey | array/string | optional | the first panel key | 当前激活面板的 key 默认无,accordion 模式下默认第一个元素 |
defaultActiveKey | array/string | optional | null |
初始化选中面板的 key |
accordion | bool | optional | false |
手风琴模式 |
onChange | function | optional | (key,activeKey)=>{} |
切换面板的回调,参数 key 为当前变动的面板,activeKey 为所有激活的面板 |
Collapse.Panel
配置项 | 类型 | 必填 | 默认值 | 功能/备注 |
---|---|---|---|---|
key | string | optional | index | 当前面板的 key |
prefixCls | string | optional | Collapse.prefixCls | 默认类名,用户可以通过修改此项来完成样式的定制 |
header | string/number/node | optional | null |
面板头内容 |
isActive | bool | optional | false | 面板当前是否展开,true 表示展开 |
onItemClick | function | optional | (isActive, e)=>{} |
面板头点击事件 |