IconTabBar SAP SE The IconTabBar represents a collection of tabs with associated content. <h3>Overview</h3> The IconTabBar can be used for navigation within an object, or as a filter. Different types of IconTabBar are used based on the contents. <ul> <li>Filter - There is only one main content for all tabs. The main content can be filtered, based on the selected tab.</li> <li>Normal tab bar - The contents of each tab are independent from each other.</li> <li>Combination of the above - There can be both filtered and independent contents.</li> </ul> <h3>Structure</h3> The IconTabBar can hold two types of entities {@link sap.m.IconTabFilter sap.m.IconTabFilter} and {@link sap.m.IconTabSeparator sap.m.IconTabSeparator} The IconTabBarFilter holds all information on an item - text, icon and count. The IconTabBarSeparator holds an icon that can be used to show a process that runs from item to item. <h3>Usage</h3> <h4>Text only</h4> Uses text labels as tabs with optional counter <ul> <li>Used when there are no suitable icons for all items.</li> <li>Used when longer labels are needed.</li> <li>If <code>headerMode</code> property is set to <code>Inline</code> the text and the count are displayed in one line.</li> <li><code>UpperCase</code> is disabled.</li> <li>Use title case.</li> </ul> <h4>Icon Tabs</h4> Round tabs with optional counter and label <ul> <li>Used when there are unique icons for all items.</li> <li>Only shorter labels are possible.</li> <li>Provide labels for all icons or for none. Do not mix these.</li> </ul> <h4>Tabs as filters</h4> Tabs with filtered content from the same set of items <ul> <li>Provide an <i>"All"</i> tab to show all items without filtering.</li> <li>Use counters to show the number of items in each filter.</li> </ul> <h4>Tabs as process steps</h4> Tabs show a single step in a process <ul> <li>Use an arrow (e.g. triple-chevron) as a separator to connect the steps.</li> <li>Use counters to show the number of items in each filter.</li> </ul> <h3>Responsive Behavior</h3> <ul> <li>Text-only tabs are never truncated.</li> <li>Use the <code>expandable</code> property to specify whether users can collapse the tab container (default = true).</li> <li>On desktop, tabs can be dragged and dropped (property <code>enableTabReordering</code>).</li> <li>If you have a large number of tabs, you can scroll through them with the arrows. Additionally all tabs are available in an overflow button (property <code>showOverflowSelectList</code>).</li> </ul> sap.ui.core/Control Defines whether the current selection should be visualized. Regarding to changes of this control this property is not needed anymore. Defines if the tabs are collapsible and expandable. Indicates if the actual tab content is expanded or not. 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. Determines whether the text of the icon tab filter (not the count) is displayed in uppercase. 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. Determines whether the IconTabBar content fits to the full area. The paddings are removed if it's set to false. 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". Specifies the header mode. <b>Note:</b> The Inline mode works only if no icons are set. 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. 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". Default is "Solid". Specifies whether tab reordering is enabled. Relevant only for desktop devices. The {@link sap.m.IconTabSeparator sap.m.IconTabSeparator} cannot be dragged and dropped Items can be moved around {@link sap.m.IconTabSeparator sap.m.IconTabSeparator} Specifies the visual density mode of the tabs. The values that can be applied are <code>Cozy</code>, <code>Compact</code> and <code>Inherit</code>. <code>Cozy</code> and <code>Compact</code> render the control in one of these modes independent of the global density settings. The <code>Inherit</code> value follows the global density settings which are applied. For compatibility reasons, the default value is <code>Cozy</code>. Fires when an item is selected. The selected item The key of the selected item The selected item replaced by parameter <code>item</code> instead. The key of the selected item replaced by parameter <code>key</code> instead. Indicates that the tab will expand or collapse. If the tab will expand, this is true. If the tab will collapse, this is true. The items displayed in the IconTabBar. 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). Internal aggregation for managing the icon tab elements.