test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-16 01:41:02 +08:00
Code Issues Actions 28 Packages Projects Releases Wiki Activity
f37f471373
ant-design/components/collapse/index.en-US.md
07akioni fcfd080f0a
chore: change the style of ghost collapse & demo modified (#24762) 
* refactor: reduce content padding in ghost collapse

* doc: remove the wrapper outside ghost collapse

Designer want the demo differs from other demos

* refactor: remove redundant .less code in collapse
2020-06-08 16:19:05 +08:00

1.9 KiB
Raw Blame History

category type title cols cover
Components Data Display Collapse 1 https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg

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.

API

Collapse

Property Description Type Default Version
activeKey Key of the active panel string[]|string| number[]|number No default value. In accordion mode, it's the key of the first panel.
defaultActiveKey Key of the initial active panel string[]|string| number[]|number -
bordered Toggles rendering of the border around the collapse block boolean true
accordion If true, Collapse renders as Accordion boolean false
onChange Callback function executed when active panel is changed Function -
expandIcon allow to customize collapse icon (panelProps) => ReactNode -
expandIconPosition Set expand icon position left | right -
destroyInactivePanel Destroy Inactive Panel boolean false
ghost make the collapse borderless and its background transparent boolean false 4.4.0

Collapse.Panel

Property Description Type Default Version
disabled If true, panel cannot be opened or closed boolean false
forceRender Forced render of content on panel, instead of lazy rending after clicking on header boolean false
header Title of the panel string|ReactNode -
key Unique key identifying the panel from among its siblings string|number -
showArrow If false, panel will not show arrow icon boolean true
extra extra element in the corner ReactNode -