Tabs

Updated on 15 November 2016

Docs are work in progress, check open issues and see how you can help!

Tabs component makes it easy to explore and switch between different views or functional aspects of an app.

Pseudo-code:

<tabs>
  <tabs-content>
    <tabs-item active>
      <link path="/featured" content="Featured">
    </tabs-item>
    <tabs-item>
      <link path="/feed" content="Feed">
    </tabs-item>
    <tabs-item>
      <link path="/browse" content="Browse">
    </tabs-item>
  </tabs-content>
</tabs>
Featured
Feed
Browse

Width

Parent

Parent tabs are used in mobile web and applications where navigation needs to be full-width of its parent.

Featured
Feed
Browse

Style

Wide

Wide tabs are used primary in desktop, as it provides more spacings between elements.

Featured
Feed
Browse

Featured
Feed
Browse

Themes

Primary
Featured
Feed
Browse

Featured
Feed
Browse

Specifications

// Base
$tabs-padding-vertical                  : unit(3);
$tabs-padding-horizontal                : unit(4);

$tabs-opacity                           : 0.48;
$tabs-active-opacity                    : 1;

$tabs-background-color                  : palette(cg9);

$tabs-active-line-height                : unit(0.5);
$tabs-active-line-color                 : palette(cp1);

// Text

$tabs-text-type                         : 'subtitle';
$tabs-text-theme                        : 'amplified';

// Styles

$tabs-wide-padding-vertical             : unit(4);
$tabs-wide-padding-horizontal           : unit(8);
$tabs-justify-text-centered             : true;

// Themes

$tabs-primary-background-color          : palette(cp1);
$tabs-primary-text-theme                : 'inverse';
$tabs-primary-opacity                   : 0.64;
$tabs-primary-active-line-color         : palette(cg9);

// States

$tabs-focused-darkness-unit             : 0.02;
$tabs-clicked-darkness-unit             : ($tabs-focused-darkness-unit * 2);

$tabs-focused-background-color          : rgba(palette(cg1), $tabs-focused-darkness-unit);
$tabs-clicked-background-color          : rgba(palette(cg1), $tabs-clicked-darkness-unit);

API

name type default
width content / parent content
theme primary none
style wide none