@rc-component/collapse
+
Part of the Ant Design ecosystem.
🪗 A flexible collapse and accordion component for React.
+ +
+ 
+ 
+ 
+ 
+ 
Part of the Ant Design ecosystem.
🪗 A flexible collapse and accordion component for React.
+ +
+
+
+
+
+
English | 简体中文
+ +## Highlights + +- Supports accordion and multi-panel collapse modes. +- Prefer the `items` API for declarative panel configuration. +- Keeps `Collapse.Panel` for compatibility. It is deprecated and will be removed in v4. +- Supports custom expand icons, semantic class names, semantic styles, and motion. ## Install -[](https://npmjs.org/package/rc-collapse) +```bash +npm install @rc-component/collapse +``` ## Usage -```js -var Collapse = require('rc-collapse'); -var Panel = Collapse.Panel; -var React = require('react'); -var ReactDOM = require('react-dom'); -require('rc-collapse/assets/index.css'); - -var App = ( -| name | -type | -default | -description | -
|---|---|---|---|
| activeKey | -String|Array |
- The first panel key | -current active Panel key | -
| className | -String or object | -- | custom className to apply | -
| defaultActiveKey | -String|Array |
- null | -default active key | -
| destroyOnHidden | -Boolean | -false | -If destroy the panel which not active, default false. | -
| accordion | -Boolean | -false | -accordion mode, default is null, is collapse mode | -
| onChange | -Function(key) | -noop | -called when collapse Panel is changed | -
| expandIcon | -(props: PanelProps) => ReactNode | -- | specific the custom expand icon. | -
| collapsible | -'header' | 'icon' | 'disabled' | -- | -specify whether the panel of children is collapsible or the area of collapsible. | -
| items | -- interface.ts#ItemType - | -- | -collapse items content | -
| name | -type | -default | -description | -
|---|---|---|---|
| header | -String or node | -- | header content of Panel | -
| headerClass | -String | -' ' | -custom className to apply to header | -
| showArrow | -boolean | -true | -show arrow beside header | -
| className | -String or object | -- | custom className to apply | -
| classNames | -{ header?: string, body?: string } | -- | Semantic structure className | -
| style | -object | -- | custom style | -
| styles | -{ header?: React.CSSProperties, body?: React.CSSProperties } | -- | Semantic structure styles | -
| openMotion | -object | -- | set the animation of open behavior, [more](https://github.com/react-component/motion). Different with v2, closed pane use a `rc-collapse-content-hidden` class to set `display: none` for hidden. | -
| forceRender | -boolean | -false | -forced render of content in panel, not lazy render after clicking on header | -
| extra | -String | ReactNode | -- | Content to render in the right of the panel header | -
| collapsible | -'header' | 'icon' | 'disabled' | -- | -specify whether the panel be collapsible or the area of collapsible. | -
Ant Design 生态的一部分。
🪗 灵活的 React 折叠面板和手风琴组件。
+ +
+
+
+
+
+
English | 简体中文
+ +## 特性 + +- 支持手风琴和多面板折叠模式。 +- 推荐使用 `items` API 声明式配置面板。 +- 保留 `Collapse.Panel` 以实现兼容性。它已被弃用，并将在 v4 中删除。 +- 支持自定义展开图标、语义化类名、语义样式和动画。 + +## 安装 + +```bash +npm install @rc-component/collapse +``` + +## 使用 + +```tsx | pure +import Collapse from '@rc-component/collapse'; +import '@rc-component/collapse/assets/index.css'; + +export default function App() { + return ( +