Zur Navigation Zum Inhalt Kontakt Menu Komponente finden Übersicht Lyne Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Funktionale Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Releases Design Tokens Komponenten Übersicht Basis Informationen Übersicht Basis Komponenten Sinn & Zweck Community Assets Anleitung Power-Apps Digitale Werbebanner SAP App Icons Tab Info

Was macht die Komponente?

Sie ist Teil der Tab-Group-Komponente.

Wann soll die Komponente eingesetzt werden?

  • Nur innerhalb der Tab-Group-Komponente.

Übergeordnete Komponenten

Tab-Group
Anatomie
Anatomie der Komponente
Nummer Typ Beschreibung Optional Hinweis
1a Komponente sbb-tab-label Nein Aktiver Zustand
1b Komponente sbb-tab-label Nein Default Zustand
2 Komponente sbb-tab Nein
Demo

Beispiele

Default
HTML-Markup kopiert.
Implementation

The sbb-tab is a component used to provide content to a sbb-tab-group
(see sbb-tab-group for more details).

<sbb-tab> Content </sbb-tab>

Slots

The content is projected in an unnamed slot.
Use a semantic element as a content wrapper (p, article, section and so on)
to improve screen-reader usability due to its implicit role.

<sbb-tab>
  <section>Content</section>
</sbb-tab>

Accessibility

The role and the id for the aria-controls attribute is managed directly by the sbb-tab-group component.

Properties

Name Attribute Privacy Type Default Description
label - public SbbTabLabelElement | null null The sbb-tab-label associated with the tab.

Slots

Name Description
Use the unnamed slot to provide content.
Impressum Kontakt Cookie Einstellungen