Collapse
Collapse
Importimport { Collapse } from 'antd'; |
Importimport { Collapse } from 'antd'; |
Accordion is a special kind of Collapse, which allows only one panel to be expanded at a time.Common props ref：Common props
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| accordion | If true, Collapse renders as Accordion | boolean | false | × | |
| activeKey | Key of the active panel | string[] | string number[] | number | No default value. In accordion mode, it's the key of the first panel | × | |
| bordered | Toggles rendering of the border around the collapse block | boolean | true | × | |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.0.0 | |
| collapsible | Specify how to trigger Collapse. Either by clicking icon or by clicking any area in header or disable collapse functionality itself | header | icon | disabled | - | 4.9.0 | × |
| defaultActiveKey | Key of the initial active panel | string[] | string number[] | number | - | × | |
| Destroy Inactive Panel | boolean | false | × | ||
| destroyOnHidden | Destroy Inactive Panel | boolean | false | 5.25.0 | × |
| expandIcon | Customize the collapse expand icon | (panelProps) => ReactNode | - | 5.15.0 | |
| expandIconPlacement | Set expand icon placement | start | end | start | - | × |
Set expand icon position, Please use expandIconPlacement instead | start | end | - | 4.21.0 | × | |
| ghost | Make the collapse borderless and its background transparent | boolean | false | 4.4.0 | × |
| size | Set the size of collapse | large | medium | small | medium | 5.2.0 | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.0.0 | |
| onChange | Callback function executed when active panel is changed | function | - | × | |
| items | collapse items content | ItemType | - | 5.6.0 | × |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| classNames | Semantic structure className | Record<header | body, string> | - | 5.21.0 |
| collapsible | Specify whether the panel be collapsible or the trigger area of collapsible | header | icon | disabled | - | |
| children | Body area content | ReactNode | - | |
| extra | The extra element in the corner | ReactNode | - | |
| forceRender | Forced render of content on panel, instead of lazy rendering after clicking on header | boolean | false | |
| key | Unique key identifying the panel from among its siblings | string | number | - | |
| label | Title of the panel | ReactNode | - | - |
| showArrow | If false, panel will not show arrow icon. If false, collapsible can't be set as icon | boolean | true | |
| styles | Semantic DOM style | Record<header | body, CSSProperties> | - | 5.21.0 |
When using version >= 5.6.0, we prefer to configuring the panel by items.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| collapsible | Specify whether the panel be collapsible or the trigger area of collapsible | header | icon | disabled | - | 4.9.0 (icon: 4.24.0) |
| extra | The extra element in the corner | ReactNode | - | |
| forceRender | Forced render of content on panel, instead of lazy rendering after clicking on header | boolean | false | |
| header | Title of the panel | ReactNode | - | |
| key | Unique key identifying the panel from among its siblings | string | number | - | |
| showArrow | If false, panel will not show arrow icon. If false, collapsible can't be set as icon | boolean | true |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| borderlessContentBg | Background of content in borderless style | string | transparent |
| borderlessContentPadding | Padding of content in borderless style | Padding<string | number> | undefined | 4px 16px 16px |
| contentBg | Background of content | string | #ffffff |
| contentPadding | Padding of content | Padding<string | number> | undefined | 16px 16px |
| contentPaddingLG | Padding of large content | Padding<string | number> | undefined | 24 |
| contentPaddingSM | Padding of small content | Padding<string | number> | undefined | 12 |
| headerBg | Background of header | string | rgba(0,0,0,0.02) |
| headerPadding | Padding of header | Padding<string | number> | undefined | 12px 16px |
| headerPaddingLG | Padding of large header | Padding<string | number> | undefined | 16px 24px 16px 16px |
| headerPaddingSM | Padding of small header | Padding<string | number> | undefined | 8px 12px 8px 8px |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBorder | Default border color, used to separate different elements, such as: form separator, card separator, etc. | string | #d9d9d9 |
| colorPrimaryBorder | The stroke color under the main color gradient, used on the stroke of components such as Slider. | string | #91caff |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextDisabled | Control the color of text in disabled state. | string | rgba(0,0,0,0.25) |
| colorTextHeading | Control the font color of heading. | string | rgba(0,0,0,0.88) |
| borderRadiusLG | LG size border radius, used in some large border radius components, such as Card, Modal and other components. | number | 8 |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| fontSizeIcon | Control the font size of operation icon in Select, Cascader, etc. Normally same as fontSizeSM. | number | 12 |
| fontSizeLG | Large font size | number | 16 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineHeightLG | Line height of large text. | number | 1.5 |
| lineType | Border style of base components | string | solid |
| lineWidth | Border width of base components | number | 1 |
| lineWidthFocus | Control the width of the line when the component is in focus state. | number | 3 |
| marginSM | Control the margin of an element, with a medium-small size. | number | 12 |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| motionEaseInOut | Preset motion curve. | string | |
| padding | Control the padding of the element. | number | 16 |
| paddingLG | Control the large padding of the element. | number | 24 |
| paddingSM | Control the small padding of the element. | number | 12 |
| paddingXS | Control the extra small padding of the element. | number | 8 |