Tabs

Anatomia#

Instalacja#

$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/tabs.json

Użycie#

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account settings.</TabsContent>
  <TabsContent value="password">Password settings.</TabsContent>
</Tabs>

Każdy TabsTrigger musi znajdować się wewnątrz TabsList, a każdy TabsContent tworzy parę z wyzwalaczem o tym samym value. Lista renderuje własny wskaźnik: jeden element, który płynnie przesuwa się do aktywnej zakładki według pozycji zmierzonej przez Base UI — zamiast tła, które każda zakładka osobno rozjaśnia i wygasza.

Przykłady#

Wariant segmentowy#

Domyślny wariant to kontrolka segmentowa — aktywna zakładka leży na wyniesionej „pigułce” wewnątrz stonowanego paska. Używaj go do kompaktowego przełączania widoków oraz do zakładek w kartach, na paskach narzędzi i w oknach dialogowych.

Wariant liniowy#

variant="line" rysuje cienką linię z przesuwającym się podkreśleniem. Używaj go do sekcji na poziomie strony, gdzie zakładki pełnią rolę drugiego paska nawigacji pod tytułem strony.

Układ pionowy#

Ustaw orientation="vertical" na stronach ustawień i przy długich listach sekcji. Nawigacja strzałkami sama przełącza się wtedy na ↑ i ↓.

Z ikonami#

Ikony ułatwiają przeglądanie zakładek, które odpowiadają układom lub typom treści. Zostaw etykietę tekstową — sama ikona rzadko jest jednoznaczna.

Wyłączona zakładka#

Wyłącz zakładkę, gdy jej widok istnieje, ale jest niedostępny — i wyjaśnij dlaczego, krótką odznaką albo podpowiedzią. Base UI pomija wyłączone zakładki podczas nawigacji klawiaturą.

Tryb kontrolowany#

Kontroluj value, gdy widok zmienia coś innego niż same zakładki — tutaj przycisk Dalej w kreatorze krokowym.

Wytyczne#

Kiedy używać#

• Do porządkowania powiązanych treści o równej wadze, między którymi użytkownik się przełącza i których nie musi porównywać obok siebie.
• Do dzielenia długich stron ustawień lub szczegółów na sekcje, które mają wspólny nagłówek i kontekst.

Kiedy nie używać#

• Do kolejnych kroków, które trzeba wykonać po kolei — użyj kreatora z wyraźnymi przyciskami Wstecz i Dalej albo jednego przewijanego formularza.
• Do treści, które trzeba porównać — pokaż je obok siebie.
• Do nawigacji między stronami — zakładki przełączają widoki w miejscu, a linki należą do Navigation Menu lub Sidebar.
• Do zestawu dwóch–pięciu opcji, które ustawiają wartość — użyj Toggle Group.

Etykiety#

Używaj krótkich, konkretnych rzeczowników — po jednym lub dwa słowa — z wielką literą tylko na początku. Etykieta musi opisywać swój panel, żeby dało się przewidzieć, co się w nim zobaczy: Członkowie, a nie Więcej. Nie łam etykiet zakładek na dwa wiersze; jeśli się nie mieszczą, zakładek jest za dużo.

Wybór wariantu#

Wybierz jeden wariant dla danej powierzchni i trzymaj się go. line należy do ramy strony, a domyślny wariant segmentowy — do wnętrza komponentów. Nigdy nie zagnieżdżaj jednego zestawu zakładek w panelu drugiego — powstają wtedy dwa konkurujące ze sobą miejsca, które odpowiadają na pytanie „gdzie jestem?”.

Stan i adresy URL#

Gdy zakładki odpowiadają sekcjom strony, którymi ktoś może się podzielić albo do których może wrócić, zapisuj aktywną zakładkę w adresie URL (na przykład ?tab=billing) i na tej podstawie steruj value. Utrzymuj panele zamontowane przez keepMounted tylko wtedy, gdy ich stan musi przetrwać przełączanie.

Dostępność#

Tabs implementuje wzorzec WAI-ARIA tabs: tablist złożony z elementów tab, z których każdy steruje jednym tabpanel. Lista zajmuje jedno miejsce w kolejności tabulacji, a fokus wędruje w jej obrębie (roving focus).

• Ręczna aktywacja jest domyślna: strzałki przenoszą fokus, a Enter lub Spacja przełącza panel. Ustaw activateOnFocus na TabsList, gdy panele renderują się tanio — wtedy fokus i wybór przesuwają się razem.
• Panele przyjmują fokus, dzięki czemu osoby korzystające z klawiatury dotrą do treści bez elementów interaktywnych; po przejściu do panelu klawiszem Tab widać pierścień fokusu.
• Nazwij listę atrybutem aria-label, jeśli żaden widoczny nagłówek nie opisuje zakładek.

Dokumentacja API#

Tabs#

Komponent główny. Przyjmuje wszystkie propsy Tabs.Root z Base UI.

TabsList#

TabsTrigger#

TabsContent#

tabsListVariants#

Generator klas dla TabsList, eksportowany na potrzeby własnych list o spójnym wyglądzie.