TabContainer

@ui5/webcomponents
<ui5-tabcontainer>

Basic TabContainer

Quibusdam, veniam! Architecto debitis iusto ad et, asperiores quisquam perferendis reprehenderit ipsa voluptate minus minima, perspiciatis cum. Totam harum necessitatibus numquam voluptatum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga magni facere error dicta beatae optio repudiandae vero, quidem voluptatibus perferendis eum maiores rem tempore voluptates aperiam eos enim delectus unde. Dignissimos debitis architecto temporibus doloribus reiciendis libero rem nemo, nobis quidem dolor praesentium, beatae voluptatum iste eveniet, nam voluptatem obcaecati ducimus dolore. Possimus ipsa eos impedit aut nisi repellendus recusandae, temporibus ducimus, necessitatibus tenetur facere, minima vero fugit rem reiciendis natus ratione quia numquam? Explicabo laboriosam ab consequuntur, qui dignissimos inventore sapiente ullam quaerat ratione libero vero, beatae laudantium! Aperiam numquam tempore, laudantium perferendis recusandae autem.
<ui5-tabcontainer class="full-width" show-overflow>
	<ui5-tab text="Tab 1">
		<ui5-label>Quibusdam, veniam! Architecto debitis iusto ad et, asperiores quisquam perferendis reprehenderit ipsa voluptate minus minima, perspiciatis cum. Totam harum necessitatibus numquam voluptatum.</ui5-label>
	</ui5-tab>
	<ui5-tab icon="activities" text="Tab 2" selected>
		<ui5-label>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga magni facere error dicta beatae optio repudiandae vero, quidem voluptatibus perferendis eum maiores rem tempore voluptates aperiam eos enim delectus unde.</ui5-label>
	</ui5-tab>
	<ui5-tab icon="add" text="Tab 3">
		<ui5-label>Dignissimos debitis architecto temporibus doloribus reiciendis libero rem nemo, nobis quidem dolor praesentium, beatae voluptatum iste eveniet, nam voluptatem obcaecati ducimus dolore.</ui5-label>
	</ui5-tab>
	<ui5-tab icon="calendar" text="Tab 4">
		<ui5-label>Possimus ipsa eos impedit aut nisi repellendus recusandae, temporibus ducimus, necessitatibus tenetur facere, minima vero fugit rem reiciendis natus ratione quia numquam?</ui5-label>
	</ui5-tab>
	<ui5-tab-separator></ui5-tab-separator>
	<ui5-tab icon="action-settings" text="Tab 5">
		<ui5-label>Explicabo laboriosam ab consequuntur, qui dignissimos inventore sapiente ullam quaerat ratione libero vero, beatae laudantium! Aperiam numquam tempore, laudantium perferendis recusandae autem.</ui5-label>
	</ui5-tab>
</ui5-tabcontainer>
	

TabContainer with text only tabs

<ui5-tabcontainer class="full-width" collapsed fixed show-overflow>
	<ui5-tab text="Home"></ui5-tab>
	<ui5-tab text="What's new" selected></ui5-tab>
	<ui5-tab text="Who are we"></ui5-tab>
	<ui5-tab text="About"></ui5-tab>
<ui5-tab text="Contacts"></ui5-tab>
</ui5-tabcontainer>
	

TabContainer with text and additional-text

<ui5-tabcontainer show-overflow="true" collapsed fixed>
	<ui5-tab text="Info" additional-text="3">
	</ui5-tab>
	<ui5-tab text="Attachments" additional-text="24" selected>
	</ui5-tab>
	<ui5-tab text="Notes" additional-text="16">
	</ui5-tab>
	<ui5-tab text="People" additional-text="34">
	</ui5-tab>
</ui5-tabcontainer>
	

TabContainer with tabLayout="Inline"

<ui5-tabcontainer tab-layout="Inline" show-overflow="true" collapsed fixed>
	<ui5-tab text="Monitors" additional-text="(10)">
	</ui5-tab>
	<ui5-tab text="Cameras" additional-text="(2)" selected>
	</ui5-tab>
	<ui5-tab text="Rooms" additional-text="(16)">
	</ui5-tab>
</ui5-tabcontainer>

<ui5-tabcontainer tab-layout="Inline" show-overflow="true" collapsed fixed>
	<ui5-tab icon="laptop" ext="Monitors" additional-text="(10)">
	</ui5-tab>
	<ui5-tab icon="video" text="Cameras" additional-text="(2)" selected>
	</ui5-tab>
	<ui5-tab icon="home" text="Rooms" additional-text="(16)">
	</ui5-tab>
</ui5-tabcontainer>
	

Overview

The ui5-tabcontainer represents a collection of tabs with associated content. Navigation through the tabs changes the content display of the currently active content area. A tab can be labeled with text only, or icons with text.

Structure

The ui5-tabcontainer can hold two types of entities:
  • ui5-tab - contains all the information on an item (text and icon)
  • ui5-tab-separator - used to separate tabs with a vertical line

ES6 import

import "@ui5/webcomponents/dist/TabContainer";
import "@ui5/webcomponents/dist/Tab"; (for ui5-tab)
import "@ui5/webcomponents/dist/TabSeparator"; (for ui5-tab-separator)

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
collapsed
boolean
false
Defines whether the tab content is collapsed.
fixed
boolean
false
Defines whether the tabs are in a fixed state that is not expandable/collapsible by user interaction.
showOverflow
show-overflow
boolean
false
Defines whether the overflow select list is displayed.

The overflow select list represents a list, where all tab filters are displayed so that it's easier for the user to select a specific tab filter.
tabLayout
tab-layout
TabLayout
"Standard"
Defines the alignment of the main text and the additionalText of a tab.

Note: The main text and the additionalText would be displayed vertically by defualt, but when set to Inline, they would be displayed horizontally.

Available options are:
  • Standard
  • Inline
tabsPlacement
tabs-placement
TabContainerTabsPlacement
"Top"
Defines the placement of the tab strip (tab buttons area) relative to the actual tabs' content.

Note: By default the tab strip is displayed above the tabs' content area and this is the recommended layout for most scenarios. Set to Bottom only when the ui5-tabcontainer is at the bottom of the page and you want the tab strip to act as a menu.
since v1.0.0-rc.7

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
HTMLElement [0..n]
Defines the tabs.

Note: Use ui5-tab and ui5-tab-separator for the intended design.
overflowButton
HTMLElement [0..n]
Defines the button which will open the overflow menu. If nothing is provided to this slot, the default button will be used.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
tab-select
Fired when a tab is selected.
tab
type: HTMLElement
description: The selected tab.
tabIndex
type: Number
description: The selected tab index.

Tab

The ui5-tab represents a selectable item inside a ui5-tabcontainer. It defines both the item in the tab strip (top part of the ui5-tabcontainer) and the content that is presented to the user once the tab is selected.

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
additionalText
additional-text
string
""
Represents the "additionalText" text, which is displayed in the tab filter.
disabled
boolean
false
Enabled items can be selected.
icon
string
""
Defines the icon source URI to be displayed as graphical element within the ui5-tab. The SAP-icons font provides numerous built-in icons. See all the available icons in the Icon Explorer.
selected
boolean
false
Specifies if the ui5-tab is selected.
semanticColor
semantic-color
SemanticColor
"Default"
Defines the ui5-tab semantic color.

The color is applied to:
  • the ui5-tab icon
  • the text when ui5-tab overflows
  • the tab selection line


Available semantic colors are: "Default", "Neutral", "Positive", "Critical" and "Negative".

Note: The color value depends on the current theme.
stableDomRef
stable-dom-ref
undefined
Defines the stable selector that you can use via getStableDomRef method.
since v1.0.0-rc.8
text
string
""
The text to be displayed for the item.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
Node [0..n]
Defines the tab content.

TabSeparator

The ui5-tab-separator represents a vertical line to separate tabs inside a ui5-tabcontainer.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel