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
| Description | The text to be displayed for the item. |
| Type | string | undefined |
| Default | undefined |
disabled
| Description | Disabled tabs can't be selected. |
| Type | boolean |
| Default | false |
additionalText
| Description | Represents 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. |
| Type | string | undefined |
| Default | undefined |
icon
| Description | Defines 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. |
| Type | string | undefined |
| Default | undefined |
design
| Description | Defines 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
| Description | Specifies if the component is selected. |
| Type | boolean |
| Default | false |
movable
| Description | Defines if the tab is movable. |
| Type | boolean |
| Default | false |
| Since | 2.0.0 |
Slots
default
| Description | Holds the content associated with this tab. |
| Type | Array<Node> |
items
| Description | Defines hierarchies with nested sub tabs.
Note: Use ui5-tab and ui5-tab-separator for the intended design. |
| Type | Array<ITab> |
Events
No events available for this component.
Methods
getDomRefInStrip
| Description | Returns the DOM reference of the tab that is placed in the header.
Note: Tabs, placed in the items slot of other tabs are not shown in the header. Calling this method on such tabs will return undefined.
Note: If you need a DOM ref to the tab content please use the getDomRef method. |
| Return type | HTMLElement | undefined |
| Since | 1.0.0-rc.16 |
CSS Parts
No CSS parts available for this component.