Tabs

Přepínání pohledů na tentýž záznam: řízené value/onChange, role tablist a šipky mezi taby.

Kdy použít

Víc pohledů na TENTÝŽ záznam — detail objednávky s Přehledem, Položkami a Historií.

Aktivní pohled má přežít obnovení stránky: value je řízené zvenčí, takže ho volající drží v URL. Vzor:

const [params, setParams] = useSearchParams();
const view = params.get("view") ?? "overview";

<IngotTabs
  items={ITEMS}
  value={view}
  onChange={(key) => setParams({ view: key }, { replace: true })}
>

Nejvýš 6 pohledů s popisky na 1–2 slova. Víc pohledů nebo delší popisky znamenají, že to nejsou taby, ale navigace.

Kdy nepoužít

Kroky procesu, které mají pořadí a dokončení — to je steps pattern, ne taby.
Filtrování téhož seznamu („Vše / Aktivní / Archiv“) — to jsou chipy; tab slibuje jiný pohled, ne jiný výřez.
Navigace mezi různými záznamy nebo stránkami — na to je menu, ne taby.

Vlastnosti

items: IngotTabItem[] — Pohledy: klíč, přeložený popisek a nepovinný počet záznamů.
value: string — Klíč aktivního pohledu. Řízené zvenčí — typicky z URL volajícího.
onChange: (key: string) => void — Přepnutí pohledu. Nemění scroll pozici stránky.
children: ReactNode — Obsah aktivního pohledu — vykreslí se jako tabpanel svázaný s aktivním tabem.
label: string — Přeložený aria-label seznamu tabů.
testId: string — data-testid tablistu; tab dostane `${testId}-tab-${key}`.