Zur Navigation Zum Inhalt Kontakt Menu Find component Overview Lyne Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Functional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Releases Design Tokens Komponenten Overview Base Informationen Overview Base Components Sense & Purpose Community Assets Instructions Power-Apps Digital banner ads SAP Design Guidelines App Icons Tab Info

What does the component do?

It is part of the tab-group component.

When should the component be used?

  • Only within the tab-group component.

Parent Components

Tab-Group
Anatomie
Anatomy of the component
Number Type Description Optional Info
1a Component sbb-tab-label No Active state
1b Component sbb-tab-label No Default state
2 Component sbb-tab No
Demo

Examples

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.
Imprint Contact Cookie settings