Wondering what’s next for npm?Check out our public roadmap! »

    uxcore-collapse

    2.2.0 • Public • Published

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

    Install

    npm i uxcore-collapse

    DownloadsWeekly Downloads

    33

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    36.4 kB

    Total Files

    24

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar