BoxedCollapsible

This component extends the Collapsible component by adding styles to the Header and the Content sub-components.

Usage

The boxed collapsible can simply be imported from the design system like this:

import BoxedCollapsible from "@finanzchef24gmbh/design-system/dist/src/BoxedCollapsible";

Props

This components supports the same props as the Collapsible component.

State

As this component just adds styles to the Collapsible component, the state behaves exactly the same.

Example

<Spacings.Inset>
  <BoxedCollapsible>
    <BoxedCollapsible.Header>
      <BoxedCollapsible.Headline>
        <Text textStyle="headline4">
          This is a collapsible with a box-style!
        </Text>
      </BoxedCollapsible.Headline>
      <BoxedCollapsible.Chevron />
    </BoxedCollapsible.Header>
    <BoxedCollapsible.Content>
      <Text>Hello, here is some content!</Text>
    </BoxedCollapsible.Content>
  </BoxedCollapsible>
</Spacings.Inset>