Ravox KitSurfaces
Collapsible
A trigger that shows and hides a section: advanced filters, order details, the full list of files. The height animates without measuring anything in JS and, when closed, the content is removed from Tab and from screen readers.
design-aurora.zip
5 arquivos · 184 KB
- Landing.tsx
- tokens.css
- content.ts
- meta.json
- DESIGN.md
Settings
Toggles
Examples
Controlled, with a Button as the trigger
Filtros avançados fechados
Details below the summary
Pedido #4821
R$ 297,00
- Plano
- Acesso anual
- Pagamento
- Pix · 28/09 14:02
- Nota fiscal
- Emitida
Open at the start
design-aurora.zip
5 arquivos · 184 KB
- Landing.tsx
- tokens.css
- content.ts
- meta.json
- DESIGN.md
Installation
The command creates components/ui/collapsible.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add collapsibleProps
| Prop | Type | Default | Description |
|---|---|---|---|
| open / onOpenChange | boolean / (open: boolean) => void | — | Controlled mode (Collapsible). |
| defaultOpen | boolean | false | Open at the start, uncontrolled mode (Collapsible). |
| disabled | boolean | false | Locks the trigger (Collapsible). |
| asChild | boolean | false | Passes the behavior to the child, such as a <Button>, instead of creating a <button> (CollapsibleTrigger). |
| innerClassName | string | — | Classes of the inner box; className goes on the outer one, the one that animates (CollapsibleContent). |
| CollapsibleChevron | ComponentProps<"svg"> | — | Small arrow that rotates when it opens. Place it inside the trigger. |
| useCollapsible() | { open, toggle, disabled } | — | To build your own pieces that react to open/closed. |