Accordion
Accordion
Un Accordion di Radix — sezioni espandibili/comprimibili, una aperta alla volta (type="single") o diverse (type="multiple").
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@pompeitech/vesuvius-ui";Default
Più elementi aperti insieme
type="multiple" rimuove il vincolo di apertura singola — qualsiasi numero di elementi può essere espanso insieme, e non c'è alcuna prop collapsible da impostare (si applica solo a type="single"):
API
Accordion
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
type | "single" | "multiple" | Obbligatorio. "single" permette al massimo un elemento aperto; "multiple" ne permette qualsiasi numero. | |
collapsible | boolean | false | Solo type="single" — se l'elemento aperto può essere chiuso ricliccandolo, lasciandone nessuno aperto. |
value / defaultValue | string (single) o string[] (multiple) | Elemento/i aperto/i controllato/i o non controllato/i — il tipo deve corrispondere a type. | |
onValueChange | (value: string | string[]) => void | ||
disabled | boolean | false | Disabilita ogni elemento dell'accordion. |
AccordionItem
| Prop | Tipo | Descrizione |
|---|---|---|
value | string | Obbligatorio — identificatore univoco usato da value/onValueChange sopra. |
disabled | boolean | Disabilita solo questo elemento. |
AccordionTrigger — ogni prop nativa di <button>; nessuna prop personalizzata. Renderizza automaticamente l'indicatore a chevron come parte del proprio markup.
AccordionContent — ogni prop nativa di <div>; nessuna prop personalizzata. Anima l'altezza apertura/chiusura tramite custom property CSS impostate da Radix (--radix-accordion-content-height), non JavaScript.
Accessibilità
Ogni trigger è un vero <button> con aria-expanded; il contenuto è role="region" collegato tramite aria-labelledby. Tab si sposta tra i trigger, Spazio/Invio attiva/disattiva quello a fuoco — nessuna gestione da tastiera personalizzata necessaria.