Collapse 折叠面板

定义／Definition

列表容器以一致的格式来显示一组相关的内容，为一致性的类型或者一组内容指定优先顺序来体现层次感以获取更好的可读性。列表瓦片可以包含多行的文本，并且文本的字数可以在同一列表的不同瓦片间有所不同。

规则 / Rule

  • 对复杂区域进行分组和隐藏，保持页面的整洁。

  • 手风琴 是一种特殊的折叠面板，只允许单个内容区域展开。

代码演示

基本

Collapse 

  1. import { Collapse, List } from 'antd-mobile';
  3. let Test = React.createClass({
  4.   onChange(key) {
  5.     console.log(key);
  6.   },
  7.   render() {
  8.     return (<Collapse
  9.       defaultActiveKey="0"
  10.     >
  11.       <Collapse.Panel header="hellohellohellohellohellohe">
  12.         <List.Item>子内容子内容</List.Item>
  13.         <List.Item>子内容子内容</List.Item>
  14.         <List.Item>子内容子内容</List.Item>
  15.         <List.Item>子内容子内容</List.Item>
  16.       </Collapse.Panel>
  17.       <Collapse.Panel header="title2"><List.Item>this is panel content2 or other</List.Item></Collapse.Panel>
  18.       <Collapse.Panel header="title3"><List.Item>文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容</List.Item></Collapse.Panel>
  19.     </Collapse>);
  20.   },
  21. });
  23. ReactDOM.render(<Test />, mountNode);

Collapse折叠面板 - 图1

API

Collapse

成员说明类型默认值
activeKey当前激活 tab 面板的 keyArray or String默认无，accordion模式下默认第一个元素
defaultActiveKey初始化选中面板的 keyString无
accordion手风琴模式Booleanfalse
onChange切换面板的回调Function(key)noop

Collapse.Panel

成员说明类型默认值
key对应 activeKeyString无
header面板头内容React.Element or String无