Tabs
Views of the same page, one at a time: underlined sections, a segmented switch or pills — one light glides from the active tab to the next, in every variant.
Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.
Pourquoi il est là. Used by Orochia, Orazaka, krizaka.com.
Quand l’utiliser
- To split a page into sections the user switches between without leaving it: videos, stories, about.
variant="segmented"for a view switch (grid, list);pillsfor a feed's sections.
Quand ne pas l’utiliser
- For a filter that narrows a list.À la place : Chip
- To go to other pages: use links in the navigation.
- For a choice in a form.À la place : Radio group
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { Tabs } from "@krizaka/ui/tabs";Exemples
Underline
The sections of a page; a disabled tab is skipped.
Segmented
A view switch: equal segments in a track.
Pills
A feed's sections, scrolling sideways on a phone.
Vertical
orientation="vertical": the list on the side.
Props
value/defaultValue + onValueChange, orientation (horizontal by default), variant for the list.
| Prop | Type | Défaut | Description |
|---|---|---|---|
variant | "segmented" | "underline" | "pills" | underline | underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections). |
Accessibilité
- Radix Tabs:
tablist,tabwitharia-selectedandaria-controls,tabpanel; name the list witharia-label. - A disabled tab is skipped.
Clavier
| Touches | Action |
|---|---|
| Tab | Moves to the active tab, then into its panel. |
| Arrow keys / Home / End | Move between tabs and activate them. |
Bonnes pratiques
- Short labels of one or two words; the active one should be clear without colour.
- Keep the URL in sync with the active tab when a tab is worth sharing.
Composants liés
Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub