Komponente · 6 Varianten
Tabs
components/Tabs.astro
Tabliste in sechs Anordnungen: Unterstrich, Pille, vertikal, Haarlinie gedimmt, Nummer, voll. ARIA-Muster, Pfeiltasten. Active-Optik statisch in v1.
Notizen
- Bestand: Feature-Tabs als Sektion mit Runtime (Unterstrich, Progress). Keine freie Komponente.
- Pille invers, keine Pillen-Leiste mit Fond. Vertikal mit Kante links wie Sidebar.
Props
| Name | Typ | Default | Notiz |
|---|---|---|---|
| variant | "unterstrich" | "pille" | "vertikal" | "haarlinie" | "nummer" | "voll" | "unterstrich" | 01–06. |
| surface | "nacht" | "paper" | "nacht" | Pflicht-Paar. |
<Tabs variant="unterstrich" surface="nacht" />01 · Unterstrich
Kante unter dem Tab
Feature-Tabs. -mb-px auf Haarlinie.
Nacht
Fläche: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Index: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Draht: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Paper
Fläche: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Index: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Draht: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
02 · Pille
Active invers
Tag active. Rand, kein Fond im Ruhezustand.
Nacht
Fläche: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Index: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Draht: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Paper
Fläche: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Index: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Draht: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
03 · Vertikal
Kante links, 4+8
Sidebar. Für Docs und Einstellungen.
Nacht
Fläche: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Index: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Draht: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Paper
Fläche: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Index: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Draht: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
04 · Haarlinie
Inaktiv gedimmt
Nav-Link. granit-400/600.
Nacht
Fläche: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Index: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Draht: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Paper
Fläche: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Index: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Draht: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
05 · Nummer
01 02 03 vor dem Wort
Feature-Tabs nummer. Mono-Index.
Nacht
Fläche: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Index: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Draht: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Paper
Fläche: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Index: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Draht: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
06 · Voll
Segmente füllen die Breite
Segmented Control. Active als Fond.
Nacht
Fläche: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Index: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Draht: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Paper
Fläche: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Index: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.
Draht: Der Inhalt des Panels. Wechsel per Klick oder Pfeiltaste.