Menu Icon

Tabs

Tabs display contents on seperate views on same page. They let users access divided areas with different issues.

Usage

Tabs comes with label and icon.

Guidance

  • Tabs should indicate a type to characterize their subjects.
  • Able to add new Tabs by using + icon near Tabs component on page tree.

When to use

  • Use Tabs to represent openable panes.

Additional info

  • Consider updating gutter to set spaces between Tabs.
  • Consider updating position to set placement of Tabs.

Variations

  • The updatable properties of Tabs are type, position and gutter.
  • The updatable behaviour of Tabs is centered.
  • The updatable style features of Tabs are margin, padding, size, overflow and css.
  • The updatable style features of Tab List are margin, padding, size, overflow, background, border and css.
  • The updatable style features of Tab List Nav are display, margin, padding, size, overflow, typography, background, border, effects and css.
  • The updatable style features of Tab List Tab are margin, padding, typography, background and css.
  • The updatable style features of Active Tab List Item are typography and css.
  • The updatable style features of Tab List Content are margin, padding, size, overflow, background, border and css.
  • The updatable properties of Tab Panes are tab label and icon.
  • The updatable style features of Radio Button are margin, padding, size, overflow, background, border and css.
  • The usable dynamic properties of Tabs are type, tabPosition, centered, hideAdd, tabBarGutter, tabBarExtraContent, hidden and style.
  • The usable dynamic properties of Tab Pane are tab, hidden and style.