Accordion 手风琴

可以折叠/展开的内容区域。

规则

  • 对复杂区域进行分组和隐藏。

  • 通常情况下，一次只允许单个内容区域展开；特殊情况下，通过配置项支持多个内容区域同时展开。

代码演示

基本

Accordion 

  1. import { Accordion, List } from 'antd-mobile';
  3. const AccordionExmple = React.createClass({
  4.   onChange(key) {
  5.     console.log(key);
  6.   },
  7.   render() {
  8.     return (
  9.       <div>
  10.         <Accordion
  11.           defaultActiveKey="0"
  12.         >
  13.           <Accordion.Panel header="标题文字">
  14.             <List.Item>子内容子内容</List.Item>
  15.             <List.Item>子内容子内容</List.Item>
  16.             <List.Item>子内容子内容</List.Item>
  17.             <List.Item>子内容子内容</List.Item>
  18.           </Accordion.Panel>
  19.           <Accordion.Panel header="标题文字"><List.Item>this is panel content2 or other</List.Item></Accordion.Panel>
  20.           <Accordion.Panel header="标题文字"><List.Item>文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容</List.Item></Accordion.Panel>
  21.         </Accordion>
  22.       </div>
  23.     );
  24.   },
  25. });
  27. ReactDOM.render(<AccordionExmple />, mountNode);

手风琴模式

Accordion 

  1. import { Accordion, List } from 'antd-mobile';
  3. const AccordionExmple = React.createClass({
  4.   onChange(key) {
  5.     console.log(key);
  6.   },
  7.   render() {
  8.     return (
  9.       <div>
  10.         <Accordion
  11.           defaultActiveKey="0"
  12.           accordion
  13.         >
  14.           <Accordion.Panel header="手风琴模式">
  15.             <List.Item>子内容子内容</List.Item>
  16.             <List.Item>子内容子内容</List.Item>
  17.             <List.Item>子内容子内容</List.Item>
  18.             <List.Item>子内容子内容</List.Item>
  19.           </Accordion.Panel>
  20.           <Accordion.Panel header="标题文字"><List.Item>this is panel content2 or other</List.Item></Accordion.Panel>
  21.           <Accordion.Panel header="标题文字"><List.Item>文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容</List.Item></Accordion.Panel>
  22.         </Accordion>
  23.       </div>
  24.     );
  25.   },
  26. });
  28. ReactDOM.render(<AccordionExmple />, mountNode);

Accordion手风琴 - 图1

API

Accordion

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

Accordion.Panel

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