Tabs

tabs component

Introduction

Tabs are used to switch between different views.

View in Groundhog

The first tab is always preselected. This component is themable.

Styleguide

Tabs use the whole available width. The tabs width is equally distributed.

Tabs styleguide

tab-box-color: main theme color
x: 4px
height: 32px
font-family: Bernina Sans Semibold
font-weight: 600
font-size: 14px
font-color: $gray-700
text-align: center
vertical-align: center
padding-left: min. 16px
padding-right: min. 16px

Default

Normal tab

tab-box-height: 1px

Hover

Hover on tab

tab-box-height: 4px

Active

Active tab

font-color: #fff
tab-box-height: 32px

Disabled

Disabled tab

font-color: $gray-300
tab-box: 1px
tab-box-color: $gray-300

Chart tabs

The metrics displayed in the chart can be switched by tabs above the chart. These tabs can contain single metrics or metric groups (e.g. response time and requests).

Chart tabs

Chart tab styling

Default

font-color: main theme color
font-family: Bernina Sans Regular
font-size: 14px
height: 32px
width: depends on text
border-color: $gray-300
border-width: 1px
border-radius: 3px //only outside corners
padding-left: 12px
padding-right: 12px
vertical-align: center

Hover state

Chart tab hover state

font-color: theme hover color
border-color: theme hover color
fill: $gray-100

Active

font-family: Bernina Sans Regular
font-size: 14px
font-color: theme color shade 700
height: 32px
width: depends on text
border-color: theme color shade 700
border-width: 1px
border-radius: 3px //only outside corners
fill: $gray-100
padding-left: 12px
padding-right: 12px
vertical-align: center

Margin

x: 8px

Dos and don'ts

Abbreviation of long tab names

Do

Do - abbreviate with ...

Abbreviate long names with "..."

Don't

Don't - use multiple lines

Don't use more than one line for tabs.

Single tabs

Do

Do - use headline instead of tab

If there is only one tab, use a headline instead of a tab.

Don't

Don't - use a single tab

Don't use one single tab, a minimum of two tabs is required.

Problem indicator

If content in a tab is problematic, the tab box, as well as the text are red.

Tab problem handling

font-color: $red-500
tab-box-color: $red-500

Animation

On hover over a tab the tab box grows to 4px and on click, the box grows to 32px.

transition: height 100ms ease-out