> ## 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. # Taburi > Comutați între panouri asociate folosind navigarea accesibilă prin file. ## Prezentare generală `Tabs` conectează fiecare filă la un panou de conținut asociat folosind o valoare `value` comună. Păstrați valorile unice în cadrul unei rădăcini. Utilizați [TabButton](https://docs.twenty.com/ro/ui/components/navigation/tab-button.md) pentru linkuri de rută și acțiuni adiacente. **Light** [Exemplu de file (light)](https://storybook.twenty.com/iframe.html?id=ui-navigation-tabs--display\&viewMode=story\&globals=colorScheme:light) **Dark** [Exemplu de file (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) ## Utilizare Utilizați `defaultValue` pentru a seta selecția inițială. Rădăcina gestionează modificările ulterioare. ```tsx theme={null} import { Tabs } from 'twenty-ui/primitives/navigation'; export const RecordTabs = () => ( Overview Activity Settings Record overview Recent activity Record settings ); ``` `Tabs.Tab` acceptă `startIcon`, `endIcon`, `badge` și o `size` de `compact`, `sm` sau `md` (`sm` implicit). Props-urile rămase păstrează contractul Base UI instalat. Valorile nu sunt restricționate la șiruri sau numere. Valorile de referință trebuie să utilizeze aceeași identitate în filă, panou și rădăcină. O valoare de rădăcină `null` nu selectează niciun panou. ### File compacte Utilizați `size="compact"` pentru fiecare filă, pentru controale de intrare/ieșire scurte în interiorul unui card. Filele compacte au o înălțime minimă a rândului de 24px, text mic și spațiere interioară a conținutului de 4px pe fiecare parte. Dimensiunile existente `sm` și `md` își păstrează înălțimea minimă de 40px. Filele compacte folosesc același indicator, același contur de focalizare și aceeași activare de la tastatură ca celelalte dimensiuni. ```tsx theme={null} import { Tabs } from 'twenty-ui/primitives/navigation'; export const ToolCallTabs = () => ( Output Input Tool output Tool input ); ``` **Light** [File compacte de intrare și ieșire (light)](https://storybook.twenty.com/iframe.html?id=ui-navigation-tabs--compact\&viewMode=story\&globals=colorScheme:light) **Dark** [File compacte de intrare și ieșire (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) ## Anatomie Plasați filele și un indicator opțional în `Tabs.List`. Plasați panourile acestora lângă listă, toate în cadrul aceleiași `Tabs.Root`. ```text theme={null} Tabs.Root ├── Tabs.List │ ├── Tabs.Tab │ ├── Tabs.Tab │ └── Tabs.Indicator ├── Tabs.Panel └── Tabs.Panel ``` | Componentă | Cerință | Scop | | - | - | - | | `Root` | Obligatoriu | Gestionează valoarea selectată și orientarea. | | `Listă` | Obligatoriu | Grupează filele și oferă navigare prin focalizare de la tastatură. | | `Filă` | Unul pentru fiecare panou | Activează panoul cu același `value`. | | `Panel` | Unul pentru fiecare vizualizare de conținut | Afișează conținutul său când `value` este activ. | | `Indicator` | Opțional | Afișează poziția filei active cu stilizare bazată pe temă. | Dați listei un nume accesibil și asociați `value` fiecărei file cu `value` al panoului său. Base UI furnizează ID-urile filei și panoului, precum și relațiile `aria-controls` și `aria-labelledby`. Când furnizați un `id` personalizat pentru `Tabs.Panel`, setați `aria-controls` pe `Tabs.Tab` corespunzător la același ID. Implementarea instalată Base UI 1.8.0 necesită această relație explicită. ID-urile personalizate ale filelor sunt înregistrate corect pentru `aria-labelledby` al panoului. Adăugați un `Tabs.Indicator` atunci când doriți sublinierea activă. `List` nu inserează un indicator. ## Stare controlată și detalii despre evenimente Transmiteți `value` și actualizați-l cu `onValueChange` pentru a gestiona selecția. Callback-ul primește valoarea următoare și detaliile evenimentului Base UI, inclusiv `event`, `reason`, `activationDirection` și `cancel()`. ```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. ); }; ``` Activarea de către utilizator are motivul `none`. În rădăcinile necontrolate, revenirea automată poate avea motivul `initial`, `disabled` sau `missing`. Revenirea automată poate selecta `null` atunci când nu mai rămâne nicio filă activată. Aceste modificări automate nu pot fi anulate. Rădăcinile controlate păstrează selecția sub controlul aplicației. Anulați o modificare a utilizatorului înainte de actualizarea stării controlate sau utilizați același callback cu o rădăcină necontrolată: ```tsx theme={null} import { Tabs } from 'twenty-ui/primitives/navigation'; export const ProtectedTabs = () => ( { if (value === 'restricted') { details.cancel(); } }} > Overview Restricted Account details. Restricted content. ); ``` ## Activare de la tastatură, orientare și direcție `Tabs.List` utilizează activarea manuală în mod implicit (`activateOnFocus={false}`). Tastele săgeată mută focalizarea; Enter sau Space activează fila focalizată. Setați `activateOnFocus` pentru a selecta o filă când focalizarea de la tastatură ajunge la aceasta. Ambele politici funcționează cu starea controlată și necontrolată. ```tsx theme={null} import { Tabs } from 'twenty-ui/primitives/navigation'; export const SettingsTabs = () => ( Profile Billing Notifications Profile settings. Billing settings. Notification settings. ); ``` Listele orizontale utilizează Stânga și Dreapta; listele verticale utilizează Sus și Jos. Home și End focalizează prima și ultima filă activată. Filele dezactivate sunt omise. `loopFocus` este `true` în mod implicit; setați-l la `false` pentru a vă opri la oricare dintre limite. Utilizați [DirectionProvider](https://docs.twenty.com/ro/ui/primitives/layout/direction-provider.md) pentru direcția tastaturii RTL și `dir="rtl"` pe rădăcină pentru aspect. Setați `orientation="vertical"` pe `Root` pentru o listă verticală și un indicator. ## Durata de viață a panoului Utilizați `keepMounted` când conținutul panoului trebuie să își păstreze starea cât timp este inactiv. Panourile inactive montate rămân ascunse și nu ocupă spațiu în aspect. ## Aspectul panoului `Panel` umple spațiul rămas de listă și se poate micșora sub dimensiunea conținutului său pe ambele axe, astfel încât să rămână într-o rădăcină cu înălțime fixă. Pentru a derula conținutul acestuia, setați `overflow: auto` pe panou sau pe un element copil care îl umple, cum ar fi un copil `flex: 1` al unui panou flex pe coloană. ## Props-uri native, compoziție de redare și referințe Toate cele cinci părți păstrează props-urile native, gestionarele de evenimente, referințele și compoziția `render` Base UI. `className` și `style` ale acestora pot fi, de asemenea, funcții ale stării părții. Elementele implicite sunt un `div` pentru Root, List și Panel, un `button` pentru Tab și un `span` pentru Indicator. Referințele indică elementele efectiv redate. ```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. ); }; ``` Păstrați `nativeButton` consecvent cu elementul compus pentru o filă. Utilizați `nativeButton={false}` pentru un element interactiv personalizat care nu este un buton nativ și care transmite props-urile și referința furnizate. O ancoră de rută aparține în `TabButton`, unde ruta gestionează navigarea și `aria-current`. ## Accent vizuală. Utilizați `highlighted` pe `Tabs.Tab` pentru a-i evidenția conținutul independent de selecție, de exemplu atunci când setările sale sunt deschise. Selecția rămâne gestionată de `Tabs.Root`. ## Proprietăți Referința generată include props-urile publice pentru fiecare parte. Tipurile de stare publică ale părților și tipurile de detalii/motiv ale modificării Root sunt disponibile din `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 `