Skip to main content
⌘K
Last modified: 24/Jun/2024

Collapse Item

The children Item of Collapse.

#Usage

<Collapse defaultKeys={[1]}>
  <Collapse.CollapseItem
    header={<div style={{ padding: 16 }}>Obi-Wan</div>}
    position={1}
  >
    <div style={{ padding: 16 }}>R2D2</div>
  </Collapse.CollapseItem>
  <Collapse.CollapseItem header="Qui-Gon" position={2}>
    You must learn the ways of the Force if youre to come with me to Alderaan.
  </Collapse.CollapseItem>
  <Collapse.CollapseItem header="Mace" position={3}>
    You must learn the ways of the Force if youre to come with me to Alderaan.
  </Collapse.CollapseItem>
</Collapse>

#Props

Required
string | ReactElement<any, string | JSXElementConstructor<any>>
The title of the CollapseItem
#children
Required
ReactNode
The content of the component
#position
Required
number
The id of the Item. Its value is related with the values defined in the defaultKeys prop
#isCollapsible
boolean
true" description="Decides whether the item can collapse or not
true
#onStateChange
(isOpen: boolean) => void
The callback that runs when the state is changing

#Types

  • CollapseItemProps: props of the CollapseItem component processed by stratus

Read more about types here