Tabs
Tabs
Un Tabs di Radix — passa tra i pannelli, uno visibile alla volta.
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@pompeitech/vesuvius-ui";Default
Account
Apporta qui le modifiche al tuo account.
API
Tabs
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
value / defaultValue | string | Scheda attiva, controllata o non controllata. | |
onValueChange | (value: string) => void | ||
orientation | "horizontal" | "vertical" | "horizontal" | Cambia anche la direzione di navigazione con le frecce. |
activationMode | "automatic" | "manual" | "automatic" | "automatic": le frecce cambiano immediatamente la scheda attiva. "manual": le frecce spostano solo il focus, l'attivazione richiede un esplicito Invio/Spazio — usalo quando cambiare scheda è costoso (una richiesta di rete per scheda). |
TabsList — ogni prop nativa di <div>; contenitore role="tablist" per i trigger.
TabsTrigger
| Prop | Tipo | Descrizione |
|---|---|---|
value | string | Obbligatorio — corrisponde al value di un TabsContent. |
disabled | boolean |
TabsContent
| Prop | Tipo | Descrizione |
|---|---|---|
value | string | Obbligatorio — corrisponde al TabsTrigger che lo rivela. |
forceMount | boolean | Mantiene montati (nascosti) i pannelli inattivi invece di smontarli — necessario se un pannello conserva stato che non dovrebbe azzerarsi quando nascosto. |
Accessibilità
Implementa automaticamente il pattern ARIA tablist/tab/tabpanel — ←/→ (o ↑/↓ quando orientation="vertical") si spostano tra i trigger, aria-selected/aria-controls/aria-labelledby sono collegati automaticamente.