ant-design/components/collapse/index.en-US.md
MadCcc 9ece76b269
docs: use dumi alert (#46793)
* docs: use dumi alert

* chore: code clean
2024-01-05 10:12:22 +08:00

4.4 KiB
Raw Blame History

category group title cover coverDark
Components Data Display Collapse https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*B7HKR5OBe8gAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sir-TK0HkWcAAAAAAAAAAAAADrJ8AQ/original

A content area which can be collapsed and expanded.

When To Use

  • Can be used to group or hide complex regions to keep the page clean.
  • Accordion is a special kind of Collapse, which allows only one panel to be expanded at a time.
// works when >= 5.6.0, recommended ✅
const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;

const items: CollapseProps['items'] = [
  {
    key: '1',
    label: 'This is panel header 1',
    children: <p>{text}</p>,
  },
  {
    key: '2',
    label: 'This is panel header 2',
    children: <p>{text}</p>,
  },
  {
    key: '3',
    label: 'This is panel header 3',
    children: <p>{text}</p>,
  },
];

<Collapse items={items} defaultActiveKey={['1']} />;

// works when <5.6.0 , deprecated when >=5.6.0  🙅🏻‍♀️

<Collapse defaultActiveKey={['1']} onChange={onChange}>
  <Panel header="This is panel header 1" key="1">
    <p>{text}</p>
  </Panel>
  <Panel header="This is panel header 2" key="2">
    <p>{text}</p>
  </Panel>
  <Panel header="This is panel header 3" key="3">
    <p>{text}</p>
  </Panel>
</Collapse>;

Examples

Collapse Size Accordion Nested panel Borderless Custom Panel No arrow Extra node Ghost Collapse Collapsible Component Token

API

Common props refCommon props

Collapse

Property Description Type Default Version
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
collapsible Specify whether the panels of children be collapsible or the trigger area of collapsible header | icon | disabled - 4.9.0
defaultActiveKey Key of the initial active panel string[] | string
number[] | number
-
destroyInactivePanel Destroy Inactive Panel boolean false
expandIcon Allow to customize collapse icon (panelProps) => ReactNode -
expandIconPosition Set expand icon position 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 | middle | small middle 5.2.0
onChange Callback function executed when active panel is changed function -
items collapse items content ItemType - 5.6.0

Collapse.Panel

:::info{title=Deprecated} 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

Design Token