uxcore-collapse

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)=>{}| 面板头点击事件 |