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 Zusätzliche 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 Übersicht Power-Apps Digitale Werbebanner SAP AI Design: Grundlagen 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.
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 Default
HTML in Zwischenablage 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>

Events

Consumers can listen to the active event on the sbb-tab component to intercept the activation event.

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
group - public SbbTabGroupElement | null Get the parent sbb-tab-group.
label - public SbbTabLabelElement | null The sbb-tab-label associated with the tab.

Events

Name Type Description Inherited From
active Event The active event fires when the sbb-tab has been activated via user selection on the sbb-tab-label.

Slots

Name Description
Use the unnamed slot to provide content.