The IconTabBar represents a collection of tabs with associated content.
The IconTabBar can be used for navigation within an object, or as a filter. Different types of IconTabBar are used based on the contents.
The IconTabBar can hold two types of entities sap.m.IconTabFilter and sap.m.IconTabSeparator
The IconTabFilter holds all information on an item - text, icon and count.
The IconTabSeparator holds an icon that can be used to show a process that runs from item to item.
Uses text labels as tabs with optional counter
headerMode
property is set to Inline
the text and the count are displayed in one line.UpperCase
is disabled.Round tabs with optional counter and label
Tabs with filtered content from the same set of items
Tabs show a single step in a process
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.
expandable
property to specify whether users can collapse the tab container (default = true).enableTabReordering
).sap.m.IconTabBar
in SAP Quartz themes, the breakpoints and layout paddings could be determined by the Icon Tab Bar's width. To enable this concept and add responsive paddings to an element of the Icon Tab Bar control, you have to add the following classes depending on your use case: sapUiResponsivePadding--header
, sapUiResponsivePadding--content
.
Constructor for a new IconTabBar.
Accepts an object literal mSettings
that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject#constructor for a general description of the syntax of the settings object.
new sap.m.IconTabBar(sId?, mSettings?)
Param | Type | Default Value | Description |
---|---|---|---|
sId? | string | ID for the new control, generated automatically if no ID is given |
|
mSettings? | object | Initial settings for the new control |
Name | Type | Default Value | Description |
---|---|---|---|
applyContentPadding | boolean | true | Determines whether the IconTabBar content fits to the full area. The paddings are removed if it's set to false. |
ariaTexts | object | Specifies optional texts for the screen reader. The given object can contain the following keys: |
|
backgroundDesign | sap.m.BackgroundDesign | Solid | Specifies the background color of the IconTabBar. Depending on the theme, you can change the state of the background color to "Solid", "Translucent", or "Transparent". Default is "Solid". |
enableTabReordering | boolean | false | Specifies whether tab reordering is enabled. Relevant only for desktop devices. The sap.m.IconTabSeparator cannot be dragged and dropped Items can be moved around sap.m.IconTabSeparator |
expandable | boolean | true | Defines if the tabs are collapsible and expandable. |
expanded | boolean | true | Indicates if the actual tab content is expanded or not. |
headerBackgroundDesign | sap.m.BackgroundDesign | Solid | Specifies the background color of the header. Depending on the theme, you can change the state of the background color to "Solid", "Translucent", or "Transparent". Note: In SAP Belize Deep (sap_belize_plus) theme this property should be set to "Solid". |
headerMode | sap.m.IconTabHeaderMode | Standard | Specifies the header mode. |
maxNestingLevel | int | 0 | Specifies the allowed level of tabs nesting within one another using drag and drop. Default value is 0 which means nesting via interaction is not allowed. Maximum value is 100. This property allows nesting via user interaction only, and does not restrict adding items to the |
selectedKey | string | Key of the selected tab item. If the key has no corresponding aggregated item, no changes will apply. If duplicate keys exists the first item matching the key is used. |
|
showOverflowSelectList | boolean | false | Specifies if the overflow select list is displayed. The overflow select list represents a list, where all tab filters are displayed, so the user can select specific tab filter easier. |
showSelection | boolean | true | Defines whether the current selection should be visualized. Visibility: public |
stretchContentHeight | boolean | false | Determines whether the IconTabBar height is stretched to the maximum possible height of its parent container. As a prerequisite, the height of the parent container must be defined as a fixed value. |
tabDensityMode | sap.m.IconTabDensityMode | Cozy | Specifies the visual density mode of the tabs. The values that can be applied are |
tabsOverflowMode | sap.m.TabsOverflowMode | End | Specifies the overflow mode of the header. The default |
upperCase | boolean | false | Determines whether the text of the icon tab filter (not the count) is displayed in uppercase. |
Default Aggregation:
Name | Cardinality | Type | Description |
---|---|---|---|
_header | 0..1 | sap.m.IconTabHeader |
Internal aggregation for managing the icon tab elements. |
content | 0..n | sap.ui.core.Control |
Represents the contents displayed below the IconTabBar. If there are multiple contents, they are rendered after each other. The developer has to manage to display the right one or use the content aggregation inside the IconTabFilter (which will be displayed instead if it is set). |
items | 0..n | sap.m.IconTab |
The items displayed in the IconTabBar. |
Indicates that the tab will expand or collapse.
Since: 1.15.0.
Param | Type | Description |
---|---|---|
oControlEvent | sap.ui.base.Event | |
getSource | sap.ui.base.EventProvider | |
getParameters | object | |
expand | boolean |
If the tab will expand, this is true. |
collapse | boolean |
If the tab will collapse, this is true. |
Fires when an item is selected.
Param | Type | Description |
---|---|---|
oControlEvent | sap.ui.base.Event | |
getSource | sap.ui.base.EventProvider | |
getParameters | object | |
item | sap.m.IconTabFilter |
The selected item |
key | string |
The key of the selected item |
previousKey | string |
The key of the previous selected item |
selectedItem | sap.m.IconTabFilter |
The selected item |
selectedKey | string |
The key of the selected item |
Method | Description |
---|---|
addContent |
Adds some content to the aggregation content. |
addItem |
Adds some item to the aggregation items. |
attachExpand |
Attaches event handler When called, the context of the event handler (its Indicates that the tab will expand or collapse. |
attachSelect |
Attaches event handler When called, the context of the event handler (its Fires when an item is selected. |
destroyContent |
Destroys all the content in the aggregation content. |
destroyItems |
Destroys all the items in the aggregation items. |
detachExpand |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachSelect |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
sap.m.IconTabBar.extend |
Creates a new subclass of class sap.m.IconTabBar with name
|
fireExpand |
Fires event expand to attached listeners. |
fireSelect |
Fires event select to attached listeners. |
getApplyContentPadding |
Gets current value of property applyContentPadding. Determines whether the IconTabBar content fits to the full area. The paddings are removed if it's set to false. Default value is |
getAriaTexts |
Gets current value of property ariaTexts. Specifies optional texts for the screen reader. The given object can contain the following keys: |
getBackgroundDesign |
Gets current value of property backgroundDesign. Specifies the background color of the IconTabBar. Depending on the theme, you can change the state of the background color to "Solid", "Translucent", or "Transparent". Default is "Solid". Default value is |
getContent |
Gets content of aggregation content. Represents the contents displayed below the IconTabBar. If there are multiple contents, they are rendered after each other. The developer has to manage to display the right one or use the content aggregation inside the IconTabFilter (which will be displayed instead if it is set). |
getEnableTabReordering |
Gets current value of property enableTabReordering. Specifies whether tab reordering is enabled. Relevant only for desktop devices. The sap.m.IconTabSeparator cannot be dragged and dropped Items can be moved around sap.m.IconTabSeparator Default value is |
getExpandable |
Gets current value of property expandable. Defines if the tabs are collapsible and expandable. Default value is |
getExpanded |
Gets current value of property expanded. Indicates if the actual tab content is expanded or not. Default value is |
getHeaderBackgroundDesign |
Gets current value of property headerBackgroundDesign. Specifies the background color of the header. Depending on the theme, you can change the state of the background color to "Solid", "Translucent", or "Transparent". Note: In SAP Belize Deep (sap_belize_plus) theme this property should be set to "Solid". Default value is |
getHeaderMode |
Gets current value of property headerMode. Specifies the header mode. Default value is |
getItems |
Gets content of aggregation items. The items displayed in the IconTabBar. |
getMaxNestingLevel |
Gets current value of property maxNestingLevel. Specifies the allowed level of tabs nesting within one another using drag and drop. Default value is 0 which means nesting via interaction is not allowed. Maximum value is 100. This property allows nesting via user interaction only, and does not restrict adding items to the Default value is |
sap.m.IconTabBar.getMetadata |
Returns a metadata object for class sap.m.IconTabBar. |
getSelectedKey |
Reflector for the internal header's selectedKey property. |
getShowOverflowSelectList |
Gets current value of property showOverflowSelectList. Specifies if the overflow select list is displayed. The overflow select list represents a list, where all tab filters are displayed, so the user can select specific tab filter easier. Default value is |
getShowSelection |
Reflector for the internal header's showSelection property. |
getStretchContentHeight |
Gets current value of property stretchContentHeight. Determines whether the IconTabBar height is stretched to the maximum possible height of its parent container. As a prerequisite, the height of the parent container must be defined as a fixed value. Default value is |
getTabDensityMode |
Gets current value of property tabDensityMode. Specifies the visual density mode of the tabs. The values that can be applied are Default value is |
getTabsOverflowMode |
Gets current value of property tabsOverflowMode. Specifies the overflow mode of the header. The default Default value is |
getUpperCase |
Gets current value of property upperCase. Determines whether the text of the icon tab filter (not the count) is displayed in uppercase. Default value is |
indexOfContent |
Checks for the provided |
indexOfItem |
Checks for the provided |
insertContent |
Inserts a content into the aggregation content. |
insertItem |
Inserts a item into the aggregation items. |
removeAllContent |
Removes all the controls from the aggregation content. Additionally, it unregisters them from the hosting UIArea. |
removeAllItems |
Removes all the controls from the aggregation items. Additionally, it unregisters them from the hosting UIArea. |
removeContent |
Removes a content from the aggregation content. |
removeItem |
Removes a item from the aggregation items. |
setApplyContentPadding |
Sets a new value for property applyContentPadding. Determines whether the IconTabBar content fits to the full area. The paddings are removed if it's set to false. When called with a value of Default value is |
setAriaTexts |
Sets the ariaTexts property. |
setBackgroundDesign |
Sets a new value for property backgroundDesign. Specifies the background color of the IconTabBar. Depending on the theme, you can change the state of the background color to "Solid", "Translucent", or "Transparent". Default is "Solid". When called with a value of Default value is |
setEnableTabReordering |
Sets the enableTabReordering property. |
setExpandable |
Sets a new value for property expandable. Defines if the tabs are collapsible and expandable. When called with a value of Default value is |
setExpanded |
Sets the tab content as expanded. |
setHeaderBackgroundDesign |
Sets the header background design. |
setHeaderMode |
Sets the header mode. |
setMaxNestingLevel |
Sets a new value for property maxNestingLevel. Specifies the allowed level of tabs nesting within one another using drag and drop. Default value is 0 which means nesting via interaction is not allowed. Maximum value is 100. This property allows nesting via user interaction only, and does not restrict adding items to the When called with a value of Default value is |
setSelectedKey |
Reflector for the internal header's selectedKey property. |
setShowOverflowSelectList |
Sets a new value for property showOverflowSelectList. Specifies if the overflow select list is displayed. The overflow select list represents a list, where all tab filters are displayed, so the user can select specific tab filter easier. When called with a value of Default value is |
setShowSelection |
Reflector for the internal header's showSelection property. |
setStretchContentHeight |
Sets a new value for property stretchContentHeight. Determines whether the IconTabBar height is stretched to the maximum possible height of its parent container. As a prerequisite, the height of the parent container must be defined as a fixed value. When called with a value of Default value is |
setTabDensityMode |
Sets the tab density mode. |
setTabsOverflowMode |
Sets a new value for property tabsOverflowMode. Specifies the overflow mode of the header. The default When called with a value of Default value is |
setUpperCase |
Sets a new value for property upperCase. Determines whether the text of the icon tab filter (not the count) is displayed in uppercase. When called with a value of Default value is |
Adds some content to the aggregation content.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContent | sap.ui.core.Control |
The content to add; if empty, nothing is inserted |
Adds some item to the aggregation items.
Param | Type | DefaultValue | Description |
---|---|---|---|
oItem | sap.m.IconTab |
The item to add; if empty, nothing is inserted |
Attaches event handler fnFunction
to the expand event of this sap.m.IconTabBar
.
When called, the context of the event handler (its this
) will be bound to oListener
if specified, otherwise it will be bound to this sap.m.IconTabBar
itself.
Indicates that the tab will expand or collapse.
Param | Type | DefaultValue | Description |
---|---|---|---|
oData | object |
An application-specific payload object that will be passed to the event handler along with the event object when firing the event |
|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called when the event occurs |
|
oListener | object |
Context object to call the event handler with. Defaults to this |
Attaches event handler fnFunction
to the select event of this sap.m.IconTabBar
.
When called, the context of the event handler (its this
) will be bound to oListener
if specified, otherwise it will be bound to this sap.m.IconTabBar
itself.
Fires when an item is selected.
Param | Type | DefaultValue | Description |
---|---|---|---|
oData | object |
An application-specific payload object that will be passed to the event handler along with the event object when firing the event |
|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called when the event occurs |
|
oListener | object |
Context object to call the event handler with. Defaults to this |
Detaches event handler fnFunction
from the expand event of this sap.m.IconTabBar
.
The passed function and listener object must match the ones used for event registration.
Param | Type | DefaultValue | Description |
---|---|---|---|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called, when the event occurs |
|
oListener | object |
Context object on which the given function had to be called |
Detaches event handler fnFunction
from the select event of this sap.m.IconTabBar
.
The passed function and listener object must match the ones used for event registration.
Param | Type | DefaultValue | Description |
---|---|---|---|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called, when the event occurs |
|
oListener | object |
Context object on which the given function had to be called |
Creates a new subclass of class sap.m.IconTabBar with name sClassName
and enriches it with the information contained in oClassInfo
.
oClassInfo
might contain the same kind of information as described in sap.ui.core.Control.extend.
Param | Type | DefaultValue | Description |
---|---|---|---|
sClassName | string |
Name of the class being created |
|
oClassInfo | object |
Object literal with information about the class |
|
FNMetaImpl | function |
Constructor function for the metadata object; if not given, it defaults to the metadata implementation used by this class |
Fires event expand to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
|
expand | boolean |
If the tab will expand, this is true. |
|
collapse | boolean |
If the tab will collapse, this is true. |
Fires event select to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
|
item | sap.m.IconTabFilter |
The selected item |
|
key | string |
The key of the selected item |
|
previousKey | string |
The key of the previous selected item |
|
selectedItem | sap.m.IconTabFilter |
The selected item |
|
selectedKey | string |
The key of the selected item |
Gets current value of property applyContentPadding.
Determines whether the IconTabBar content fits to the full area. The paddings are removed if it's set to false.
Default value is true
.
Gets current value of property ariaTexts.
Specifies optional texts for the screen reader.
The given object can contain the following keys: headerLabel
- text to serve as a label for the header, headerDescription
- text to serve as a description for the header.
Gets current value of property backgroundDesign.
Specifies the background color of the IconTabBar.
Depending on the theme, you can change the state of the background color to "Solid", "Translucent", or "Transparent". Default is "Solid".
Default value is Solid
.
Gets content of aggregation content.
Represents the contents displayed below the IconTabBar. If there are multiple contents, they are rendered after each other. The developer has to manage to display the right one or use the content aggregation inside the IconTabFilter (which will be displayed instead if it is set).
Gets current value of property enableTabReordering.
Specifies whether tab reordering is enabled. Relevant only for desktop devices. The sap.m.IconTabSeparator cannot be dragged and dropped Items can be moved around sap.m.IconTabSeparator
Default value is false
.
Gets current value of property expandable.
Defines if the tabs are collapsible and expandable.
Default value is true
.
Gets current value of property expanded.
Indicates if the actual tab content is expanded or not.
Default value is true
.
Gets current value of property headerBackgroundDesign.
Specifies the background color of the header.
Depending on the theme, you can change the state of the background color to "Solid", "Translucent", or "Transparent". Note: In SAP Belize Deep (sap_belize_plus) theme this property should be set to "Solid".
Default value is Solid
.
Gets current value of property headerMode.
Specifies the header mode.
Default value is Standard
.
Gets current value of property maxNestingLevel.
Specifies the allowed level of tabs nesting within one another using drag and drop. Default value is 0 which means nesting via interaction is not allowed. Maximum value is 100. This property allows nesting via user interaction only, and does not restrict adding items to the items
aggregation of sap.m.IconTabFilter.
Default value is 0
.
Gets current value of property showOverflowSelectList.
Specifies if the overflow select list is displayed.
The overflow select list represents a list, where all tab filters are displayed, so the user can select specific tab filter easier.
Default value is false
.
Gets current value of property stretchContentHeight.
Determines whether the IconTabBar height is stretched to the maximum possible height of its parent container. As a prerequisite, the height of the parent container must be defined as a fixed value.
Default value is false
.
Gets current value of property tabDensityMode.
Specifies the visual density mode of the tabs.
The values that can be applied are Cozy
, Compact
and Inherit
. Cozy
and Compact
render the control in one of these modes independent of the global density settings. The Inherit
value follows the global density settings which are applied. For compatibility reasons, the default value is Cozy
.
Default value is Cozy
.
Gets current value of property tabsOverflowMode.
Specifies the overflow mode of the header.
The default End
mode shows as many tabs that can fit on the screen, then shows one overflow at the end containing the remaining items. The StartAndEnd
is used to keep the order of tabs intact and offers two overflow tabs on both ends of the bar.
Default value is End
.
Gets current value of property upperCase.
Determines whether the text of the icon tab filter (not the count) is displayed in uppercase.
Default value is false
.
Checks for the provided sap.ui.core.Control
in the aggregation content. and returns its index if found or -1 otherwise.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContent | sap.ui.core.Control |
The content whose index is looked for |
Checks for the provided sap.m.IconTab
in the aggregation items. and returns its index if found or -1 otherwise.
Param | Type | DefaultValue | Description |
---|---|---|---|
oItem | sap.m.IconTab |
The item whose index is looked for |
Inserts a content into the aggregation content.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContent | sap.ui.core.Control |
The content to insert; if empty, nothing is inserted |
|
iIndex | int |
The |
Inserts a item into the aggregation items.
Param | Type | DefaultValue | Description |
---|---|---|---|
oItem | sap.m.IconTab |
The item to insert; if empty, nothing is inserted |
|
iIndex | int |
The |
Removes all the controls from the aggregation content.
Additionally, it unregisters them from the hosting UIArea.
Removes all the controls from the aggregation items.
Additionally, it unregisters them from the hosting UIArea.
Removes a content from the aggregation content.
Param | Type | DefaultValue | Description |
---|---|---|---|
vContent | int string sap.ui.core.Control |
The content to remove or its index or id |
Removes a item from the aggregation items.
Param | Type | DefaultValue | Description |
---|---|---|---|
vItem | int string sap.m.IconTab |
The item to remove or its index or id |
Sets a new value for property applyContentPadding.
Determines whether the IconTabBar content fits to the full area. The paddings are removed if it's set to false.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is true
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bApplyContentPadding | boolean | true |
New value for property |
Sets the ariaTexts property.
Param | Type | DefaultValue | Description |
---|---|---|---|
oAriaTexts | object |
New value for ariaTexts. |
Sets a new value for property backgroundDesign.
Specifies the background color of the IconTabBar.
Depending on the theme, you can change the state of the background color to "Solid", "Translucent", or "Transparent". Default is "Solid".
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is Solid
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sBackgroundDesign | sap.m.BackgroundDesign | Solid |
New value for property |
Sets the enableTabReordering property.
Param | Type | DefaultValue | Description |
---|---|---|---|
value | boolean |
New value for enableTabReordering. |
Sets a new value for property expandable.
Defines if the tabs are collapsible and expandable.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is true
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bExpandable | boolean | true |
New value for property |
Sets the tab content as expanded.
Param | Type | DefaultValue | Description |
---|---|---|---|
bExpanded | boolean |
New parameter value. |
Sets the header background design.
Param | Type | DefaultValue | Description |
---|---|---|---|
headerBackgroundDesign | sap.m.BackgroundDesign |
New parameter value. |
Sets the header mode.
Param | Type | DefaultValue | Description |
---|---|---|---|
mode | sap.m.IconTabHeaderMode |
New parameter value. |
Sets a new value for property maxNestingLevel.
Specifies the allowed level of tabs nesting within one another using drag and drop. Default value is 0 which means nesting via interaction is not allowed. Maximum value is 100. This property allows nesting via user interaction only, and does not restrict adding items to the items
aggregation of sap.m.IconTabFilter.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is 0
.
Param | Type | DefaultValue | Description |
---|---|---|---|
iMaxNestingLevel | int | 0 |
New value for property |
Reflector for the internal header's selectedKey property.
Param | Type | DefaultValue | Description |
---|---|---|---|
sValue | string |
The new value. |
Sets a new value for property showOverflowSelectList.
Specifies if the overflow select list is displayed.
The overflow select list represents a list, where all tab filters are displayed, so the user can select specific tab filter easier.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is false
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bShowOverflowSelectList | boolean | false |
New value for property |
Reflector for the internal header's showSelection property.
Param | Type | DefaultValue | Description |
---|---|---|---|
bValue | boolean |
the new value. |
Sets a new value for property stretchContentHeight.
Determines whether the IconTabBar height is stretched to the maximum possible height of its parent container. As a prerequisite, the height of the parent container must be defined as a fixed value.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is false
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bStretchContentHeight | boolean | false |
New value for property |
Sets the tab density mode.
Param | Type | DefaultValue | Description |
---|---|---|---|
mode | sap.m.IconTabHeaderMode |
New parameter value. |
Sets a new value for property tabsOverflowMode.
Specifies the overflow mode of the header.
The default End
mode shows as many tabs that can fit on the screen, then shows one overflow at the end containing the remaining items. The StartAndEnd
is used to keep the order of tabs intact and offers two overflow tabs on both ends of the bar.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is End
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sTabsOverflowMode | sap.m.TabsOverflowMode | End |
New value for property |
Sets a new value for property upperCase.
Determines whether the text of the icon tab filter (not the count) is displayed in uppercase.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is false
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bUpperCase | boolean | false |
New value for property |