Skip to main content

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​

text​

DescriptionThe text to be displayed for the item.
Typestring
Default""

disabled​

DescriptionDisabled tabs can't be selected.
Typeboolean
Defaultfalse

additionalText​

DescriptionRepresents the "additionalText" text, which is displayed in the tab. In the cases when in the same time there are tabs with icons and tabs without icons, if a tab has no icon the "additionalText" is displayed larger.
Typestring
Default""

icon​

DescriptionDefines the icon source URI to be displayed as graphical element within the component. The SAP-icons font provides numerous built-in icons. See all the available icons in the Icon Explorer.
Typestring
Default""

design​

DescriptionDefines the component's design color.
The design is applied to:
- the component icon
- the text when the component overflows
- the tab selection line
Available designs are: "Default", "Neutral", "Positive", "Critical" and "Negative".
Note: The design depends on the current theme.
Type"Default" | "Positive" | "Negative" | "Critical" | "Neutral"
Default"Default"

selected​

DescriptionSpecifies if the component is selected.
Typeboolean
Defaultfalse

Slots​

default​

DescriptionHolds the content associated with this tab.
TypeArray<Node>

subTabs​

DescriptionDefines hierarchies with nested sub tabs.
Note: Use ui5-tab and ui5-tab-separator for the intended design.
TypeArray<ITab>

Events​

No events available for this component.

Methods​

getTabInStripDomRef​

DescriptionReturns the DOM reference of the tab that is placed in the header.
Note: Tabs, placed in the subTabs slot of other tabs are not shown in the header. Calling this method on such tabs will return null.
Note: If you need a DOM ref to the tab content please use the getDomRef method.
Return typeITab | null
Since1.0.0-rc.16

CSS Parts​

No CSS parts available for this component.