README.zh-CN.md

@rc-component/collapse

_{Ant Design 生态的一部分。}

🪗 灵活的 React 折叠面板和手风琴组件。

English | 简体中文

特性

• 支持手风琴和多面板折叠模式。
• 推荐使用 items API 声明式配置面板。
• 保留 Collapse.Panel 以实现兼容性。它已被弃用，并将在 v4 中删除。
• 支持自定义展开图标、语义化类名、语义样式和动画。

安装

npm install @rc-component/collapse

使用

import Collapse from '@rc-component/collapse';
import '@rc-component/collapse/assets/index.css';

export default function App() {
  return (
    <Collapse
      defaultActiveKey="1"
      items={[
        {
          key: '1',
          label: 'First panel',
          children: 'First panel content',
        },
        {
          key: '2',
          label: 'Second panel',
          children: 'Second panel content',
        },
      ]}
    />
  );
}

示例

运行本地 dumi 站点：

npm install
npm start

然后打开 http://localhost:8000。

API

Collapse

参数	说明	类型	默认值
accordion	一次只能打开一个面板	boolean	false
activeKey	当前活动面板键	React.Key | React.Key[]	-
className	附加 className	string	-
classNames	语义化类名	Partial<Record<SemanticName, string>>	-
collapsible	指定面板触发区域是否可折叠	header | icon | disabled	-
defaultActiveKey	初始活动面板键	React.Key | React.Key[]	-
destroyOnHidden	销毁非活动面板内容	boolean	false
expandIcon	自定义展开图标	(props: object) => React.ReactNode	-
items	折叠条目内容	ItemType[]	-
openMotion	自定义展开动画	CSSMotionProps	-
prefixCls	组件 className 前缀	string	rc-collapse
style	内联样式	object	-
styles	语义化样式	Partial<Record<SemanticName, React.CSSProperties>>	-
onChange	活动面板更改时的回调	(key: React.Key[]) => void	-

ItemType

参数	说明	类型	默认值
key	面板键值	React.Key	-
label	面板标题内容	React.ReactNode	-
ref	面板 DOM 引用	React.RefObject<HTMLDivElement>	-
children	面板主体内容	React.ReactNode	-
className	附加面板 className	string	-
classNames	语义化类名	Partial<Record<SemanticName, string>>	-
collapsible	指定面板是否可折叠	header | icon | disabled	-
destroyOnHidden	销毁非活动面板内容	boolean	false
extra	面板标题中的额外内容	React.ReactNode	-
forceRender	在打开面板之前渲染面板内容	boolean	false
showArrow	在标题旁边显示箭头	boolean	true
style	内联面板样式	object	-
styles	语义化样式	Partial<Record<SemanticName, React.CSSProperties>>	-
onItemClick	点击该面板时的回调	(panelKey: React.Key) => void	-

折叠面板

Collapse.Panel 已弃用。请改用 items。

本地开发

npm install
npm start

dumi 站点默认运行在 http://localhost:8000。

npm test
npm run tsc
npm run lint
npm run compile
npm run build

发布

npm run prepublishOnly

包构建完成后，发布流程由 @rc-component/np 通过 rc-np 命令处理。

许可证

@rc-component/collapse 基于 MIT 许可证发布。