Accordion 手风琴

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

规则

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

  • 通常，一次只允许单个内容区域展开；特殊情况，多个内容区域可以同时展开。

代码演示

基本

Accordion 

  1. import { Accordion, List } from 'antd-mobile';
  3. class AccordionExmple extends React.Component {
  4.   onChange = (key) => {
  5.     console.log(key);
  6.   }
  7.   render() {
  8.     return (
  9.       <div style={{ marginTop: 10, marginBottom: 10 }}>
  10.         <Accordion defaultActiveKey="0" className="my-accordion" onChange={this.onChange}>
  11.           <Accordion.Panel header="Title 1">
  12.             <List className="my-list">
  13.               <List.Item>Content 1</List.Item>
  14.               <List.Item>Content 2</List.Item>
  15.               <List.Item>Content 3</List.Item>
  16.             </List>
  17.           </Accordion.Panel>
  18.           <Accordion.Panel header="Title 2" className="pad">this is panel content2 or other</Accordion.Panel>
  19.           <Accordion.Panel header="Title 3" className="pad">
  20.             Text text text text text text text text text text text text text text text
  21.           </Accordion.Panel>
  22.         </Accordion>
  23.       </div>
  24.     );
  25.   }
  26. }
  28. ReactDOM.render(<AccordionExmple />, mountNode);
  1. .my-accordion .pad .am-accordion-content-box {
  2.   padding: 0.2rem;
  3. }
  4. .my-accordion .my-list .am-list-body {
  5.   border-top: 0;
  6. }
  7. .my-accordion .my-list .am-list-body:after {
  8.   border-bottom: 0;
  9. }

手风琴模式

Accordion 

  1. import { Accordion, List } from 'antd-mobile';
  3. class AccordionExmple extends React.Component {
  4.   onChange = (key) => {
  5.     console.log(key);
  6.   }
  7.   render() {
  8.     return (
  9.       <div style={{ marginTop: 10, marginBottom: 10 }}>
  10.         <Accordion accordion openAnimation={{}} className="my-accordion" onChange={this.onChange}>
  11.           <Accordion.Panel header="Title 1">
  12.             <List className="my-list">
  13.               <List.Item>Content 1</List.Item>
  14.               <List.Item>Content 2</List.Item>
  15.               <List.Item>Content 3</List.Item>
  16.             </List>
  17.           </Accordion.Panel>
  18.           <Accordion.Panel header="Title 2" className="pad">this is panel content2 or other</Accordion.Panel>
  19.           <Accordion.Panel header="Title 3" className="pad">
  20.             Text text text text text text text text text text text text text text text
  21.           </Accordion.Panel>
  22.         </Accordion>
  23.       </div>
  24.     );
  25.   }
  26. }
  28. ReactDOM.render(<AccordionExmple />, mountNode);
  1. .my-accordion .pad .am-accordion-content-box {
  2.   padding: 0.2rem;
  3. }
  4. .my-accordion .my-list .am-list-body {
  5.   border-top: 0;
  6. }
  7. .my-accordion .my-list .am-list-body:after {
  8.   border-bottom: 0;
  9. }

Accordion手风琴 - 图1

API

Accordion

适用平台：WEB、React-Native
属性说明类型默认值
activeKey当前激活 tab 面板的 keyArray or String默认无，accordion模式下默认第一个元素
defaultActiveKey初始化选中面板的 keyString无
accordion手风琴模式Booleanfalse (web only)
onChange切换面板的回调(key: string): voidnoop
openAnimation (web only)设置自定义切换动画，禁止动画可设为{}Object参考 rc-collapse/lib/openAnimationFactory.js 文件

Accordion.Panel

适用平台：WEB
属性说明类型默认值
key对应 activeKeyString无
header面板头内容React.Element or String无
注意: RN Accordion 依赖 Icon，使用时需添加对应的 iconfont 字体; 目前暂不支持嵌套使用