Updated: September 20, 2016

Tab

Intro

The tab control enables you to split a large amount of information into different views. The user switches between tabs by clicking on the respective tab name.

tab-example

Do

  • Use tabs if you want to group items in a logical way and still provide the user with a simple way of browsing and editing controls in different groups.
  • Display the first tab as open by default. This is the initial setting provided by the control. After the first use, display the tab last selected by the user.
  • Hide tabs that do not contain any information and require no user input.
  • Use sentence case for the tab label.
  • Use text or text and count tabs only.
  • In cases where is important for the users to know how many items there are in each tab, the counter property can be added to show the number on top of the tab.

 Don’t

  • Don’t use the Navigation Bar from sap.ui.ux3.
  • Don’t use the Tab Strip from sap.ui.commons.
  • Don’t show empty tabs.
  • Although IconTabBar supports icons, don’t use them in the tab.