Was macht die Komponente?

Eine Tab-Group ermöglicht es Nutzenden, zwischen verschiedenen Inhalten oder Ansichten innerhalb derselben Seite zu wechseln, ohne die Seite neu zu laden.

Wann soll die Komponente eingesetzt werden?

• Um Inhalte thematisch zu gruppieren und strukturiert darzustellen.
• Um eine einfache und intuitive Navigation zwischen verschiedenen Inhalten oder Ansichten zu ermöglichen.
• Um Platz auf der Benutzeroberfläche zu sparen, indem nur ein Teil des Inhalts gleichzeitig angezeigt wird.

Regeln

• Tabs sollen klar beschriftet und leicht verständlich sein.
• Die Reihenfolge und Beschriftung der Tabs sollen logisch und intuitiv sein.
• Vermeide zu viele Tabs auf einmal, um die Übersichtlichkeit zu gewährleisten und die Benutzer nicht zu überfordern.

The sbb-tab-group is a component used to organize and gather tabs that the user can navigate through;
use it when you want to provide navigation within blocks of content, instead of showing everything in one place
or requiring the user to navigate between several different views.

Each tab has a related content, distinct from other tabs' content;
tab panels can present different sections of content and include text, images, forms, other tab groups, etc.

<sbb-tab-group>
  <sbb-tab-label>I am the first</sbb-tab-label>
  <sbb-tab> Tab content 1 </sbb-tab>

  <sbb-tab-label>I am the second</sbb-tab-label>
  <sbb-tab> Tab content 2 </sbb-tab>

  <sbb-tab-label>I am the third</sbb-tab-label>
  <sbb-tab> Tab content 3 </sbb-tab>
</sbb-tab-group>

To display a tab label within the tab bar, provide a sbb-tab-label right before its related tab content;
please refer to the sbb-tab-label documentation for more details.

The content element must be wrapped in a sbb-tab and placed right after its relative sbb-tab-label.
Tab groups can also be nested, which means that a sbb-tab can contain another sbb-tab-group,
as shown in the "Nested Tab Groups" example.

Fixed height

By default, the tab group adjusts its height based on the content of the active tab.
If you want to set a fixed height for the tab group, you can apply the fixed-height attribute or property
and set an explicit (or implicit) height on the element.
This will make the tab content scrollable if it exceeds the available space.

<sbb-tab-group fixed-height style="height: 400px;">
  <sbb-tab-label>Tab 1</sbb-tab-label>
  <sbb-tab>Long content that may need scrolling...</sbb-tab>

  <sbb-tab-label>Tab 2</sbb-tab-label>
  <sbb-tab>More content...</sbb-tab>
</sbb-tab-group>

States

A tab can be selected, unselected, or in disabled state; disable a tab to mark it as unavailable.
Disabled tabs cannot be focused and may be invisible to assistive technologies such as screen readers.

It's possible to set the first selected tab using the initialSelectedIndex property.

<sbb-tab-group initial-selected-index="1"> ... </sbb-tab-group>

Events

Consumers can listen to the tabchange event, whose event.detail is typed as SbbTabChangedEventDetails.
From it, it's possible to retrieve the information about the current sbb-tab-label, sbb-tab and index, and,
if available, also the information about the previous ones.

type SbbTabChangedEventDetails = {
  activeIndex: number;
  activeTabLabel: SbbTabLabelElement;
  activeTab: SbbTabElement;
  previousIndex: number;
  previousTabLabel: SbbTabLabelElement | undefined;
  previousTab: SbbTabElement | undefined;
};

Properties

Methods

Events

Slots