Collapse

Collapse props

Name	Type	Description
activePanelKey	string \| string[] \| null	Active panel/panels keys
children	React.ReactNode	Collapsible items
isAccordion	boolean	Only one panel can be open in the uncontrolled mode if enabled
onSelect	CustomEventHandler<SelectEvent> === interface SelectEvent { component: { value: string \| string[] \| null, }, }	Panel select handler
theme	PartialGlobalDefaultTheme[ typeof COMPONENTS_NAMESPACES.collapse ]	...

Collapse.Heading props

Name	Type	Description
children	React.ReactNode	Children
iconRender	CustomRender<HeadingProps, { }, IconProps>	Heading icon customizator
onClick	React.MouseEventHandler<HTMLDivElement>	Click handler
wrapperRender	CustomRender<HeadingProps, { }, HeadingWrapperProps>	Wrapper element customizator
_[className]	[x: string]: unknown	E.g.: `_w-48` adds a css class `w-48` to the component's outer wrapper.

Collapse.Body props

Name	Type	Description
children	React.ReactNode	Children
isLoading	boolean	Loading state
onClose	CustomEventHandler<BodyClickCustomEvent>	Panel close handler
onCloseByClick	CustomEventHandler<BodyClickCustomEvent>	Panel close handler triggered by a click
onOpen	CustomEventHandler<BodyClickCustomEvent>	Panel open handler
transition	string	CSS transition format. height 250ms cubic-bezier(.4, 0, .2, 1) by default
wrapperRender	CustomRender<HeadingProps, { }, HeadingWrapperProps>	Wrapper element customizator
_[className]	[x: string]: unknown	E.g.: `_w-48` adds a css class `w-48` to the component's outer wrapper.

Collapse.Panel props

Name	Type	Description
children	React.ReactNode	Children
isDisabled	boolean	In case you want to disable the panel
name	string	...
panelKey	string	A key to put into Collapse activePanelKey prop
wrapperRender	CustomRender<PanelProps, { isClicked: boolean }, PanelWrapperProps>	Wrapper element customizator
_[className]	[x: string]: unknown	E.g.: `_w-48` adds a css class `w-48` to the component's outer wrapper.


() => {
  const [activeKey, setActiveKey] = React.useState(['2']);

  return (
    <L.Collapse
      activePanelKey={activeKey}
      onSelect={(event) => setActiveKey(event.component.value)}
    >
      <L.Collapse.Panel panelKey="1">
        <L.Collapse.Heading><b>First panel heading</b></L.Collapse.Heading>
        <L.Collapse.Body>
          <L.Div _p-4>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
            <br />
            euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
          </L.Div>
        </L.Collapse.Body>
      </L.Collapse.Panel>

      <L.Collapse.Panel
        panelKey="2"
      >
        <L.Collapse.Heading><b>Second panel heading</b></L.Collapse.Heading>
        <L.Collapse.Body>
          <L.Div _p-4>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
            <br />
            euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
          </L.Div>
        </L.Collapse.Body>
      </L.Collapse.Panel>
    </L.Collapse>
  );
}