> ## Documentation Index > Fetch the complete documentation index at: https://docs.twenty.com/llms.txt > Use this file to discover all available pages before exploring further. # Schede > Passa da un pannello correlato all'altro con una navigazione a schede accessibile. ## Panoramica `Tabs` collega ogni scheda a un pannello di contenuto correlato usando un `value` condiviso. Mantieni i valori univoci all'interno di una root. Usa [TabButton](https://docs.twenty.com/it/ui/components/navigation/tab-button.md) per i collegamenti alle route e le azioni adiacenti. **Light** [Esempio di Tabs (light)](https://storybook.twenty.com/iframe.html?id=ui-navigation-tabs--display\&viewMode=story\&globals=colorScheme:light) **Dark** [Esempio di Tabs (dark)](https://storybook.twenty.com/iframe.html?id=ui-navigation-tabs--display\&viewMode=story\&globals=colorScheme:dark) [Open in Storybook](https://storybook.twenty.com/?path=/story/ui-navigation-tabs--display) ## Utilizzo Usa `defaultValue` per impostare la selezione iniziale. La root gestisce le modifiche successive. ```tsx theme={null} import { Tabs } from 'twenty-ui/primitives/navigation'; export const RecordTabs = () => ( Overview Activity Settings Record overview Recent activity Record settings ); ``` `Tabs.Tab` accetta `startIcon`, `endIcon`, `badge` e una `size` pari a `compact`, `sm` o `md` (il valore predefinito è `sm`). Le restanti props mantengono il contratto di Base UI installato. I valori non sono limitati a stringhe o numeri. I valori di riferimento devono usare la stessa identità nella scheda, nel pannello e nella root. Un valore root pari a `null` non seleziona alcun pannello. ### Schede compatte Usa `size="compact"` su ciascuna scheda per controlli Input/Output brevi all'interno di una card. Le schede compatte hanno un'altezza minima della riga di 24px, testo piccolo e una spaziatura interna del contenuto di 4px su ciascun lato. Le dimensioni `sm` e `md` esistenti mantengono la loro altezza minima di 40px. Le schede compatte usano lo stesso indicatore, anello di focus e attivazione tramite tastiera delle altre dimensioni. ```tsx theme={null} import { Tabs } from 'twenty-ui/primitives/navigation'; export const ToolCallTabs = () => ( Output Input Tool output Tool input ); ``` **Light** [Schede di input e output compatte (light)](https://storybook.twenty.com/iframe.html?id=ui-navigation-tabs--compact\&viewMode=story\&globals=colorScheme:light) **Dark** [Schede di input e output compatte (dark)](https://storybook.twenty.com/iframe.html?id=ui-navigation-tabs--compact\&viewMode=story\&globals=colorScheme:dark) [Open in Storybook](https://storybook.twenty.com/?path=/story/ui-navigation-tabs--compact) ## Anatomia Inserisci le schede e un indicatore facoltativo all'interno di `Tabs.List`. Inserisci i relativi pannelli accanto all'elenco, tutti all'interno dello stesso `Tabs.Root`. ```text theme={null} Tabs.Root ├── Tabs.List │ ├── Tabs.Tab │ ├── Tabs.Tab │ └── Tabs.Indicator ├── Tabs.Panel └── Tabs.Panel ``` | Parte | Requisito | Scopo | | - | - | - | | `Root` | Obbligatorio | Gestisce il valore e l'orientamento selezionati. | | `Elenco` | Obbligatorio | Raggruppa le schede e fornisce la navigazione del focus tramite tastiera. | | `Scheda` | Uno per pannello | Attiva il pannello con lo stesso `value`. | | `Panel` | Uno per visualizzazione di contenuto | Visualizza il relativo contenuto quando il relativo `value` è attivo. | | `Indicator` | Facoltativo | Mostra la posizione della scheda attiva con uno stile a tema. | Assegna all'elenco un nome accessibile e fai corrispondere il `value` di ogni scheda al `value` del relativo pannello. Base UI fornisce gli ID di schede e pannelli e le relazioni `aria-controls` e `aria-labelledby`. Quando fornisci un `id` personalizzato in `Tabs.Panel`, imposta `aria-controls` nella `Tabs.Tab` corrispondente sullo stesso ID. L'implementazione installata di Base UI 1.8.0 richiede questa relazione esplicita. Gli ID delle schede personalizzate vengono registrati correttamente per `aria-labelledby` del pannello. Aggiungi un `Tabs.Indicator` quando desideri la sottolineatura attiva. `List` non inserisce un indicatore. ## Stato controllato e dettagli dell'evento Passa `value` e aggiornalo con `onValueChange` per gestire la selezione. La callback riceve il valore successivo e i dettagli dell'evento di Base UI, inclusi `event`, `reason`, `activationDirection` e `cancel()` di origine. ```tsx theme={null} import { useState } from 'react'; import { Tabs } from 'twenty-ui/primitives/navigation'; export const RecordTabs = () => { const [tab, setTab] = useState('overview'); return ( Overview Activity Company and contact details. Recent calls and emails. ); }; ``` L'attivazione utente ha `reason` `none`. Nelle root non controllate, il fallback automatico può avere `reason` `initial`, `disabled` o `missing`. Il fallback automatico può selezionare `null` quando non rimane alcuna scheda abilitata. Queste modifiche automatiche non possono essere annullate. Le root controllate mantengono la selezione sotto il controllo dell'applicazione. Annulla una modifica utente prima di aggiornare lo stato controllato oppure usa la stessa callback con una root non controllata: ```tsx theme={null} import { Tabs } from 'twenty-ui/primitives/navigation'; export const ProtectedTabs = () => ( { if (value === 'restricted') { details.cancel(); } }} > Overview Restricted Account details. Restricted content. ); ``` ## Attivazione da tastiera, orientamento e direzione `Tabs.List` usa per impostazione predefinita l'attivazione manuale (`activateOnFocus={false}`). I tasti freccia spostano il focus; Invio o Spazio attivano la scheda con focus. Imposta `activateOnFocus` per selezionare una scheda quando il focus da tastiera la raggiunge. Entrambi i criteri funzionano con stato controllato e non controllato. ```tsx theme={null} import { Tabs } from 'twenty-ui/primitives/navigation'; export const SettingsTabs = () => ( Profile Billing Notifications Profile settings. Billing settings. Notification settings. ); ``` Gli elenchi orizzontali usano Sinistra e Destra; quelli verticali usano Su e Giù. Home ed End posizionano il focus sulla prima e sull'ultima scheda abilitate. Le schede disabilitate vengono ignorate. `loopFocus` è `true` per impostazione predefinita; impostalo su `false` per fermarti a uno dei due limiti. Usa [DirectionProvider](https://docs.twenty.com/it/ui/primitives/layout/direction-provider.md) per la direzione della tastiera RTL e `dir="rtl"` sulla root per il layout. Imposta `orientation="vertical"` su `Root` per un elenco e un indicatore verticali. ## Durata del pannello Usa `keepMounted` quando il contenuto dei pannelli deve mantenere il proprio stato mentre è inattivo. I pannelli inattivi montati rimangono nascosti e non occupano spazio nel layout. ## Layout del pannello `Panel` riempie lo spazio rimanente dell'elenco e può ridursi al di sotto delle dimensioni del proprio contenuto su entrambi gli assi, così rimane all'interno di una radice ad altezza fissa. Per scorrere il relativo contenuto, imposta `overflow: auto` sul pannello o su un elemento figlio che lo riempie, come un elemento figlio `flex: 1` di un pannello flex a colonna. ## Props native, composizione del rendering e ref Tutte e cinque le parti preservano le props native, i gestori di eventi, le ref e la composizione `render` di Base UI. Anche `className` e `style` possono essere funzioni dello stato della parte. Gli elementi predefiniti sono un `div` per Root, List e Panel, un `button` per Tab e uno `span` per Indicator. Le ref puntano agli elementi effettivamente renderizzati. ```tsx theme={null} import { useRef } from 'react'; import { Tabs } from 'twenty-ui/primitives/navigation'; export const ComposedTabs = () => { const panelRef = useRef(null); return ( }> }> Overview } /> } ref={(element) => { panelRef.current = element; }} > Account details. ); }; ``` Mantieni `nativeButton` coerente con l'elemento composto per una scheda. Usa `nativeButton={false}` per un elemento interattivo personalizzato che non sia un pulsante nativo e che inoltri le props e la ref fornite. Un'ancora di route appartiene a `TabButton`, dove la route gestisce la navigazione e `aria-current`. ## Enfasi visiva Usa `highlighted` su `Tabs.Tab` per evidenziarne il contenuto indipendentemente dalla selezione, ad esempio quando le relative impostazioni sono aperte. La selezione rimane gestita da `Tabs.Root`. ## Props Il riferimento generato include le props pubbliche di ogni parte. I tipi di stato pubblico delle parti e i tipi di dettaglio/motivo della modifica di Root sono disponibili da `twenty-ui/primitives/navigation`. ### Tabs.Root **Root.className** `string | ((state: TabsRootState) =\> string | undefined)` CSS class applied to the element, or a function that returns a class based on the component's state. **Root.defaultValue** `any` (default: 0) The default value. Use when the component is not controlled. When the value is `null`, no Tab will be active. **Root.onValueChange** `((value: any, eventDetails: TabsRootChangeEventDetails) =\> void)` Callback invoked when new value is being set. The event `reason` is `'none'` for user-initiated changes, such as a click or keyboard navigation; `'initial'` for the first automatic selection or fallback in uncontrolled roots when `defaultValue` is omitted or `undefined`, including when the implicit initial value is disabled or missing; `'disabled'` for automatic fallback when the selected tab becomes disabled in uncontrolled roots; or `'missing'` for automatic fallback when the selected tab is removed, or when an explicit `defaultValue` never matches a mounted tab in uncontrolled roots. For automatic changes, the selected value can be `null` when no enabled Tab is available as a fallback. Automatic changes cannot be canceled; calling `eventDetails.cancel()` for `'initial'`, `'disabled'`, or `'missing'` has no effect. **Root.orientation** `"horizontal" | "vertical"` (default: horizontal) The component orientation (layout flow direction). **Root.render** `ReactElement\\> | ComponentRenderFn\` Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. **Root.style** `CSSProperties | ((state: TabsRootState) =\> CSSProperties | undefined)` Style applied to the element, or a function that returns a style object based on the component's state. **Root.value** `any` The value of the currently active `Tab`. Use when the component is controlled. When the value is `null`, no Tab will be active. ### Tabs.List **List.activateOnFocus** `boolean` (default: false) Whether to automatically change the active tab on arrow key focus. Otherwise, tabs will be activated using \Enter\ or \Space\ key press. **List.className** `string | ((state: TabsListState) =\> string | undefined)` CSS class applied to the element, or a function that returns a class based on the component's state. **List.loopFocus** `boolean` (default: true) Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. **List.render** `ReactElement\\> | ComponentRenderFn\` Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. **List.style** `CSSProperties | ((state: TabsListState) =\> CSSProperties | undefined)` Style applied to the element, or a function that returns a style object based on the component's state. ### Tabs.Tab **Tab.badge** `ReactNode` Content rendered after the label, such as a count. **Tab.className** `string | ((state: TabsTabState) =\> string | undefined)` CSS class applied to the element, or a function that returns a class based on the component's state. **Tab.disabled** `boolean` Whether the Tab is disabled. If a first Tab on a `` is disabled, it won't initially be selected. Instead, the next enabled Tab will be selected. However, it does not work like this during server-side rendering, as it is not known during pre-rendering which Tabs are disabled. To work around it, ensure that `defaultValue` or `value` on `` is set to an enabled Tab's value. **Tab.endIcon** `ReactNode` Decorative content after the label and before the badge. **Tab.highlighted** `boolean` (default: false) Emphasizes the tab content without changing selection. **Tab.nativeButton** `boolean` (default: true) Whether the component renders a native `