ReactJS UI Ant Design 折叠组件

折叠组件是指在页面上对一些内容进行折叠/展开操作的组件，也叫做手风琴组件。Ant Design 是一款优秀的UI组件库，提供了丰富的React组件。其中的Collapse，就是一个折叠组件。

安装

你可以使用 npm 或者 yarn 安装 Ant Design。

npm install antd --save
# 或者
yarn add antd

使用

以下是一个简单的折叠组件的例子：

import React from 'react';
import { Collapse } from 'antd';

const { Panel } = Collapse;

function callback(key) {
  console.log(key);
}

const CollapseComponent = () => (
  <Collapse defaultActiveKey={['1']} onChange={callback}>
    <Panel header="面板标题 1" key="1">
      <p>面板内容 1</p>
    </Panel>
    <Panel header="面板标题 2" key="2">
      <p>面板内容 2</p>
    </Panel>
    <Panel header="面板标题 3" key="3" disabled>
      <p>面板内容 3</p>
    </Panel>
  </Collapse>
);

export default CollapseComponent;

API

Collapse

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | activeKey | 当前激活 tab 面板的 key | string/[] | 无 | | defaultActiveKey | 初始化选中面板的 key | string/[] | 第一个面板 | | accordion | 手风琴模式 | boolean | false | | bordered | 是否加边框 | boolean | true | | destroyInactivePanel | 当前面板关闭后销毁内容 | boolean | false | | expandIcon | 自定义图标，详见 ICON 组件 | (panelProps) => ReactNode | - | | onChange | 切换面板的回调 | (key: string | string[]) => void | - | | style | 容器的样式 | CSSProperties | - | | className | 容器的类名 | string | - |

Collapse.Panel

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | disabled | 禁用后的面板不可点击 | boolean | false | | forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | | header | 面板头内容 | string/ReactNode | 无 | | key | 对应 activeKey，自定义组件必须设置 | string | 无 | | showArrow | 是否显示箭头 | boolean | true | | extra | 额外内容，右上角的操作区域 | ReactNode | 无 | | style | 面板样式 | CSSProperties | - | | className | 面板类名 | string | - |

致谢

Ant Design 是由蚂蚁金服旗下体验技术部出品的一套企业级 UI 设计语言和 React 组件库。它已成为众多企业级应用所使用的首选组件库之一。感谢 Ant Design 团队的付出和贡献，让我们能够更加高效地开发应用。