React 折叠面板

引用的组件

import { Card, Collapse } from 'antd'

//这里特别注意的就是 Panel 必须在Collapse里面

基础使用

render() {
    const { Panel } = Collapse
    return (
       <CardWrap>
  <Card title="折叠面板基础版">
    <Collapse defaultActiveKey={['1']} onChange={this.handleChange}>
      <Panel header="标题1" key="1">
        <p>{this.state.text}</p>
      </Panel>
      <Panel header="标题2" key="2">
        <p>{this.state.text}</p>
      </Panel>
      <Panel header="标题3" key="3" disabled>
        <p>{this.state.text}</p>
      </Panel>
    </Collapse>
  </Card>
</CardWrap>
    )
  }

只展开一个

accordion

<CardWrap>
  <Card title="折叠面板每次只打开一次">
    <Collapse
      defaultActiveKey={this.state.defaultActiveKey}
      onChange={this.handleChange}
      accordion
    >
      <Panel header="标题1" key="1">
        <p>{this.state.text}</p>
      </Panel>
      <Panel header="标题2" key="2">
        <p>{this.state.text}</p>
      </Panel>
      <Panel header="标题3" key="3">
        <p>{this.state.text}</p>
      </Panel>
    </Collapse>
  </Card>
</CardWrap>

自定义图标折叠面板

expandIcon

import { CaretRightOutlined } from '@ant-design/icons'
;<CardWrap>
  <Card title="自定义图标折叠面板">
    <Collapse
      defaultActiveKey={this.state.defaultActiveKey}
      onChange={this.handleChange}
      accordion
      expandIcon={({ isActive }) => (
        <CaretRightOutlined rotate={isActive ? 90 : 0} />
      )}
    >
      <Panel header="标题1" key="1">
        <p>{this.state.text}</p>
      </Panel>
      <Panel header="标题2" key="2">
        <p>{this.state.text}</p>
      </Panel>
      <Panel header="标题3" key="3">
        <p>{this.state.text}</p>
      </Panel>
    </Collapse>
  </Card>
</CardWrap>

将折叠面板变成透明色

ghost

<CardWrap>
  <Card title="背景色变成透明">
    <Collapse
      defaultActiveKey={this.state.defaultActiveKey}
      onChange={this.handleChange}
      accordion
      expandIcon={({ isActive }) => (
        <CaretRightOutlined rotate={isActive ? 90 : 0} />
      )}
      ghost
    >
      <Panel header="标题1" key="1">
        <p>{this.state.text}</p>
      </Panel>
      <Panel header="标题2" key="2">
        <p>{this.state.text}</p>
      </Panel>
      <Panel header="标题3" key="3">
        <p>{this.state.text}</p>
      </Panel>
    </Collapse>
  </Card>
</CardWrap>