Tab-Leiste (Pills) — component.tab-bar
Segmentierte Pill-Tab-Leiste (Atlassian-Collections-Muster): Leiste auf sunken-Fläche, aktiver Tab als Secondary-Pill — progressive Links, optional zentriert
Componentv1.0.0Navigationweb.documentbuilder.preview
Beispiele
Segmentierte Pill-Tabs, aktiver Tab als Secondary-Pill
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
items * | array | — |
centered | boolean | true |
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--tab-bar-action-on-secondary | var(--color-action-on-secondary) |
--tab-bar-action-secondary | var(--color-action-secondary) |
--tab-bar-focus-ring-color | var(--focus-ring-color) |
--tab-bar-focus-ring-offset | var(--focus-ring-offset) |
--tab-bar-focus-ring-width | var(--focus-ring-width) |
--tab-bar-radius-full | var(--radius-full) |
--tab-bar-surface-sunken | var(--color-surface-sunken) |
--tab-bar-text-default | var(--color-text-default) |
Genutzte Design-Tokens
color.action.on-secondary color.action.secondary color.surface.sunken color.text.default duration.fast easing.standard focus.ring-color focus.ring-offset focus.ring-width font.family.default radius.full size.1 size.2 size.6 text.lg weight.medium