1import { Collapsible } from '@cerberus-design/react'Usage
The Collapsible component allows you to show or hide content with a trigger. It is useful for accordions, dropdowns, and expandable sections.
Collapsible content goes here.
Effects
To turn off the animation effect, you can set the effect prop to none on the Collapsible.Content component.
Collapsible content goes here.
Primitives
You can utilize the primitive components to build a custom collapsible solution.
| Component | Description |
|---|---|
| CollapsibleRoot | The context provider of the collapsible. |
| CollapsibleTrigger | The button that toggles the collapsible. |
| CollapsibleIndicator | The indicator that shows the state. |
| CollapsibleContent | The content of the collapsible. |
Primitive Selectors
Each primitive component has a data attribute for easy targeting.
| Name | Value | Description |
|---|---|---|
data-scope | collapsible | The scope of the components. |
data-part | root | The root container part. |
data-part | trigger | The trigger part. |
data-part | indicator | The indicator part. |
data-part | content | The content part. |
API
Collapsible
The Collapsible component is an Object containing all the primitive components.
You can see additional options for the Root component.
Parts
The CollapsibleParts API is the same as the Collapsible component.
On this page