Uxcore-collapse NPM

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