Collapsible
A single panel that expands and collapses. The open height is measured rather than assumed, because height: auto cannot be transitioned.
src/components/ui/collapsible.tsxAbout
From the component's own source, where it was written.
A panel that expands and collapses, driven by its own trigger.
Install
npx astralyx-ui add collapsible
Usage
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible'
<Collapsible>
<CollapsibleTrigger>Advanced options</CollapsibleTrigger>
<CollapsibleContent>…</CollapsibleContent>
</Collapsible>Composer
Change the props and the source below follows.
Content revealed by the trigger. The panel animates to its measured height, so it works with any amount of content.
Props
tsx
<Collapsible> <CollapsibleTrigger>Advanced options</CollapsibleTrigger> <CollapsibleContent>…</CollapsibleContent> </Collapsible>
Examples
Closed by default
tsx
<Collapsible>…</Collapsible>
API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
Collapsible
Extends ComponentProps<'div'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | — |
| open | boolean | — | Controlled and uncontrolled state. |
| defaultOpen | boolean | false | Controlled and uncontrolled state. |
| onOpenChange | (open: boolean) => void | — | Fires on every change. |
CollapsibleTrigger
Extends ComponentProps<'button'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Use your own element as the trigger. Suppresses the chevron. |
| showChevron | boolean | true | Rotating chevron on the trailing edge. |
CollapsibleContent
Extends ComponentProps<'div'>.