uxcore-collapse

uxcore-collapse component for uxcore.

Usage no npm install needed!

<script type="module">
  import uxcoreCollapse from 'https://cdn.skypack.dev/uxcore-collapse';
</script>

README

uxcore-collapse Dependency Status devDependency Status

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