59 lines
1.4 KiB
Markdown
59 lines
1.4 KiB
Markdown
- Home
|
|
- Components
|
|
- Collapsible
|
|
|
|
# Collapsible
|
|
|
|
An interactive component which expands/collapses a panel.
|
|
|
|
## Props
|
|
|
|
All parts mirror Radix Collapsible props:
|
|
|
|
- Collapsible: root container
|
|
- CollapsibleTrigger: toggles state (supports asChild)
|
|
- CollapsibleContent: animated content area
|
|
|
|
### Example
|
|
|
|
```
|
|
<Collapsible>
|
|
<CollapsibleTrigger asChild>
|
|
<Button variant="ghost">Toggle</Button>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent>Hidden content</CollapsibleContent>
|
|
</Collapsible>
|
|
```
|
|
|
|
## Usage
|
|
|
|
#### @peduarte starred 3 repositories
|
|
|
|
```
|
|
<Collapsible className="flex w-[350px] flex-col gap-2">
|
|
<div className="flex items-center justify-between gap-4 px-4">
|
|
<h4 className="text-sm font-semibold">
|
|
@peduarte starred 3 repositories
|
|
</h4>
|
|
<CollapsibleTrigger asChild>
|
|
<Button title="This is a collapsible trigger" variant="ghost" size="icon" className="size-8">
|
|
<ChevronsUpDown/>
|
|
<span className="sr-only">Toggle</span>
|
|
</Button>
|
|
</CollapsibleTrigger>
|
|
</div>
|
|
<div className="rounded-md px-4 py-2 text-sm hover:bg-bg-secondary">
|
|
@radix-ui/primitives
|
|
</div>
|
|
<CollapsibleContent className="flex flex-col gap-2">
|
|
<div className="rounded-md px-4 py-2 text-sm hover:bg-bg-secondary">
|
|
@radix-ui/colors
|
|
</div>
|
|
<div className="rounded-md px-4 py-2 text-sm hover:bg-bg-secondary">
|
|
@stitches/react
|
|
</div>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
```
|
|
|