Collapsible Card

Component for collapsing and expanding sections of related content one at a time with card-like look.

Import#

import { CollapsibleCard } from '@volue/wave-react';

CollapsibleCard is a compound component that consists of multiple parts:

CollapsibleCard: The wrapper that contains all the parts of a component and provides context for its children.
CollapsibleCard.Header: The header of the card which acts as a trigger to expand or collapse the card content.
CollapsibleCard.Body: The container for the collapsible card main content.
CollapsibleCard.Footer: The footer at the bottom of the collapsible content. Typically used to house card actions.

Examples#

Basic#

CollapsibleCard helps showing pieces of content as needed while keeping the interface organized and visually manageable.

CollapsibleCard internally uses Collapsible and Card components, sharing the same behaviours and animation.

Controlled#

You can easily make the CollapsibleCard controlled, by passing your own state to isOpen prop. onIsOpenChange handler is called when the state of the collapsible card changes, allowing you to sync state.

With footer#

As with regular Card component, you can add CollapsibleCard.Footer alongside the CollapsibleCard.Body.

Sizes#

CollapsibleCard supports two sizes: medium (default) and small. Use the size prop to control the size.

Unmount on exit#

Similar to Collapsible component, you can force <CollapsibleCard.Body> children to unmount when exit state is done by setting unmountOnExit to true.

Complex content#

CollapsibleCard.Header and CollapsibleCard.Body can contain any content, including other components. You can render any element within the trigger such as an icon or a label alongside the card title.

Often case is to display a short message that summarizes some complex/lengthy data in the card header and organize it in the body with Data List or Table component.

API Reference#

CollapsibleCard#

Prop	Type	Default
`css`	`StitchesCss`	No default value
`isOpen`	`boolean`	`false`
`defaultIsOpen`	`boolean`	No default value
`onIsOpenChange`	`function`	No default value
`size`	`enum`	`"medium"`
`unmountOnExit`	`boolean`	`false`
`onExitComplete`	`function`	`() => void`

CollapsibleCard.Header#

In addition to the props below, you can pass Box props to control the spacing.

Prop	Type	Default
`as`	`enum`	`button`
`css`	`StitchesCss`	No default value

CollapsibleCard.Body#

In addition to the props below, you can pass Box props to control the spacing.

Prop	Type	Default
`as`	`enum`	`div`
`css`	`StitchesCss`	No default value

CollapsibleCard.Footer#

In addition to the props below, you can pass Box props to control the spacing.

Prop	Type	Default
`as`	`enum`	`div`
`css`	`StitchesCss`	No default value
`variant`	`enum`	`"withDivider"`