Accordion 手风琴

规则

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

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

代码演示

基本

import { Accordion, List } from 'antd-mobile';
const AccordionExmple = React.createClass({
  onChange(key) {
    console.log(key);
  },
  render() {
    return (
      <div style={{ marginTop: 10, marginBottom: 10 }}>
        <Accordion defaultActiveKey="0" className="my-accordion">
          <Accordion.Panel header="标题一">
            <List className="my-list">
              <List.Item>子内容一</List.Item>
              <List.Item>子内容二</List.Item>
              <List.Item>子内容三</List.Item>
            </List>
          </Accordion.Panel>
          <Accordion.Panel header="标题二" className="pad">this is panel content2 or other</Accordion.Panel>
          <Accordion.Panel header="标题三" className="pad">
            文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本
          </Accordion.Panel>
        </Accordion>
      </div>
    );
  },
});
ReactDOM.render(<AccordionExmple />, mountNode);

.my-accordion .pad .am-accordion-content-box {
  padding: 0.2rem;
}
.my-accordion .my-list .am-list-body {
  border-top: 0;
}
.my-accordion .my-list .am-list-body:after {
  border-bottom: 0;
}

手风琴模式

import { Accordion, List } from 'antd-mobile';
const AccordionExmple = React.createClass({
  onChange(key) {
    console.log(key);
  },
  render() {
    return (
      <div style={{ marginTop: 10, marginBottom: 10 }}>
        <Accordion accordion openAnimation={{}} className="my-accordion">
          <Accordion.Panel header="标题一">
            <List className="my-list">
              <List.Item>子内容一</List.Item>
              <List.Item>子内容二</List.Item>
              <List.Item>子内容三</List.Item>
            </List>
          </Accordion.Panel>
          <Accordion.Panel header="标题二" className="pad">this is panel content2 or other</Accordion.Panel>
          <Accordion.Panel header="标题三" className="pad">
            文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本
          </Accordion.Panel>
        </Accordion>
      </div>
    );
  },
});
ReactDOM.render(<AccordionExmple />, mountNode);

.my-accordion .pad .am-accordion-content-box {
  padding: 0.2rem;
}
.my-accordion .my-list .am-list-body {
  border-top: 0;
}
.my-accordion .my-list .am-list-body:after {
  border-bottom: 0;
}

API

Accordion ( 适用平台：WEB )

Accordion.Panel ( 适用平台：WEB )