Accordion
Des sections dépliables.
La hauteur s'anime sans être mesurée : le panneau est une grille dont la ligne passe de 0fr à 1fr. Pas de scrollHeight, pas de recalcul au redimensionnement, et un contenu qui change de taille suit tout seul.
Installation
bash
sia-ui add accordionOu par le paquet, sans rien copier :
tsx
import { Accordion, Collapse } from "@sia-ui/react-web";Props de Accordion
| Prop | Type | Défaut | Description |
|---|---|---|---|
* items | AccordionItem[] | — | |
className | string | — | |
collapsible | boolean | true | En single, autorise à tout refermer. |
defaultValue | string[] | — | |
onValueChange | (value: string[]) => void | — | |
type | "single" | "multiple" | single | single referme la section précédente, multiple les cumule. |
value | string[] | — | |
variant | "bordered" | "separated" | "plain" | bordered |
Props de Collapse
Une section seule. Le même rendu, pour le cas le plus courant.
| Prop | Type | Défaut | Description |
|---|---|---|---|
* title | ReactNode | — | |
className | string | — | |
defaultOpen | boolean | false | |
description | ReactNode | — | |
disabled | boolean | false | |
icon | ReactNode | — | |
meta | ReactNode | — | |
onOpenChange | (open: boolean) => void | — | |
open | boolean | — | |
variant | "bordered" | "separated" | "plain" | bordered |
* obligatoire.
Voir aussi
- Le composant dans le catalogue — états, variantes, et bac à sable.
- La référence complète — tous les composants.