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.
Multiple sub tabs could be placed underneath one main tab. Nesting allows deeper hierarchies with indentations
to indicate the level of each nested tab. When a tab has both sub tabs and own content its click area is split
to allow the user to display the content or alternatively to expand / collapse the list of sub tabs.
This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
In order to use this functionality, you need to import the following module:
import "@ui5/webcomponents-base/dist/features/F6Navigation.js"
Defines the alignment of the content and the additionalText of a tab. Note: The content and the additionalText would be displayed vertically by default, but when set to Inline, they would be displayed horizontally.
Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible. All other tabs that can 't fit on the screen are available in an overflow tab "More". Note: Only one overflow at the end would be displayed by default, but when set to StartAndEnd, there will be two overflows on both ends, and tab order will not change on tab selection.
tab: Tab The selected tab. tabIndex: Integer The selected tab index in the flattened array of all tabs and their subTabs, provided by the allItems getter.
Fired when element is being moved over the tab container. If the new position is valid, prevent the default action of the event using preventDefault().
Type
CustomEvent<TabContainerMoveEventDetail>
Parameters
source: object Contains information about the moved element under element property. destination: object Contains information about the destination of the moved element. Has element and placement properties.
Fired when element is moved to the tab container. Note:move event is fired only if there was a preceding move-over with prevented default action.
Type
CustomEvent<TabContainerMoveEventDetail>
Parameters
source: object Contains information about the moved element under element property. destination: object Contains information about the destination of the moved element. Has element and placement properties.