分类导航(展开收起,每行展示的Block自适应)

##多个Block展开收起

#功能描述: 默认显示一行,根据宽度自动匹配显示多少个Block,点击右上角的展开按钮,显示全部Block,再次点击,展示一行。 允许传入每块的内容,展开收起的图标

<CollapsePanel isOpen={false} > {data.map((item) => { return ( <div className={`label-items${item.active ? ' active' : ''}`} key={item.id} onClick={this.doSth.bind(this, item)} > <div className="text"> {item.name} </div> </div> ); })} </CollapsePanel> API

Param Description Type Default value
isOpen 默认是否自动展开 boolean false
collapseBtn 自定义展开收起的结构 ReactNode 默认不传以上下箭头的方式显示
itemBlockHeight 自定义每个item的高度 number 默认52px

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。