UI Components

UI Components

Short Description

Tabs make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets

5.4.1 Guideline

Certain guideline must be taken care while adopting tab panel which are listed as below.

  • Present tabs as a single row. Tab labels should be in one line. Character limit is maximum 40 character, more then that will truncate and it can be shown as heading in the active tab. As shown in the Fig 5.4.1b.
  • Tabs height should be 30PX. Labels will always be in center vertically.
  • Group tabs together hierarchically. Connect a group of tabs with its content. First tab will act as active as default.
  • Keep tabs adjacent to their content. It helps maintain the relationship between the two with less ambiguity.
  • Distance between left/right border of the tab panel and label will be 15PX respectively.
  • Label color will be DarkGray(#5c5c5c)   and border color will be Gray(#d8d8d8)  . Background will be LightGray(#e6e6e6)  . Labels font size will be 12PX and style Bold.
  • In smaller screens it will act as an accordions with the same design specifications.
  • Tab place holder as default will have background White(#ffffff)  and border will be Gray(#d8d8d8)  .
Parameter of Tab
Fig 5.4.1a Parameter of Tab
Character length of label
Fig 5.4.1b Character length of label

5.4.2 Behaviour

Behaviour of tabs in different state are listed as below.

  • Border color for the placeholder will remain same across all behaviour state.
  • Normal State

As described, each tab's label color in normal state will be DarkGray(#5c5c5c)   and background will be LighterGray(#f6f6f6)  . It will have 1PX border will color Gray(#d8d8d8)  .

  • Active State

In active state the open tab matches the background color of the container, each tab's label color in active state will be SkyBlue(#2991d6)   and background will be White(#ffffff)  .

  • Hover State

Just a label color will change to SkyBlue(#2991d6)  .

  • Disable State

Label color will change to DimGray(#c5c5c5)   & background will be LightGray(#e6e6e6)  .

Different behaviour of Tab
Fig 5.4.2 Different behaviour of Tab

5.4.3 Usage

When its required to put different related informational pages in single place, A tabbed document interface (TDI) or Tab is a graphical control element can be used. It allows multiple document or panels to be contained within a single window, using tabs as a navigational widget for switching between sets of documents.