Tabs

Component to display tabs (to control show/hide of content panel).

Scrollable content

When there is too many tabs to display in the space available, the tabs area becomes scrollable, either via scroll or buttons, depending on the device. This needs to be re-calculated on page load and on window resize as well using Javascript.

Touch devices (mobile, tablet...)

The tabs area becomes scrollable via touch. A gradient, on either sides, helps show that more content is available to scroll.

Resize your browser (or use Chrome emulator for touch device) to see the touch and scroll functionality.

Non-touch devices (desktop...)

On page load if more tabs are hidden, we display a More button and gradient on the right side to allow user to access (partially) hidden tabs. Once the user starts scrolling (clicked on More button), then another button is displayed on the left side to go back to the start. If tabs are hidden on both sides, both More buttons are available.

Default

Usage

<!-- Tabs -->
<div class="ui-tabs">

  <!-- header section -->
  <div class="ui-tabs__header">
    <div class="ui-tabs__list">

      <!-- the "data-tab" id must match the "id" of the tab contents (see below) -->
      <button class="ui-tabs__item" data-tab="a1">...</button>
      <button class="ui-tabs__item" data-tab="a2">...</button>
      <button class="ui-tabs__item" data-tab="a3">...</button>
      <button class="ui-tabs__item" data-tab="a4">...</button>
    </div>

    <!-- the left/right nav buttons MUST always be in the DOM (hidden by default by CSS) -->
    <!-- they will be shown dynamically by JS when required only -->
    <button class="ui-tabs__nav-left"><span>...</span></button>
    <button class="ui-tabs__nav-right"><span>...</span></button>
  </div>

  <!-- content section -->
  <div class="ui-tabs__body">
    <!-- in this case, no tab is selected, so no tab content is visible -->
    <!-- the "id" here must match the id of the tab buttons (see above) -->
    <div class="ui-tabs__content" id="a1">...</div>
    <div class="ui-tabs__content" id="a2">...</div>
    <div class="ui-tabs__content" id="a3">...</div>
    <div class="ui-tabs__content" id="a4">...</div>
  </div>
</div>

Tab Selected

If a tab has to be pre-selected on page load, add specific modifier classes to the tab buttons and tab content elements.

Usage

<!-- Tab selected -->
<div class="ui-tabs">
  <div class="ui-tabs__header">
    <div class="ui-tabs__list">

      <!-- Dynamically (javascript) set the active tab with the class "ui-tabs__item--active" -->
      <button class="ui-tabs__item ui-tabs__item--active" data-tab="b1">...</button>
      <button class="ui-tabs__item" data-tab="b2">...</button>
      <button class="ui-tabs__item" data-tab="b3">...</button>
      <button class="ui-tabs__item" data-tab="b4">...</button>
    </div>

    <button class="ui-tabs__nav-left"><span>...</span></button>
    <button class="ui-tabs__nav-right"><span>...</span></button>
  </div>

  <div class="ui-tabs__body">
    <div class="ui-tabs__content ui-tabs__content--active" id="b1">...</div>
    <div class="ui-tabs__content" id="b2">...</div>
    <div class="ui-tabs__content" id="b3">...</div>
    <div class="ui-tabs__content" id="b4">...</div>
  </div>
</div>

Tabs with scroll

If the tabs are wider than the available space, they will be scrollable (touch on mobile) using left/right buttons. This is all handled by javascript, so no extra step need to be taken to achieve this.

Usage

<!-- Tabs with scroll -->
<!-- The additional classes are dynamically controlled by Javascript -->
<div class="ui-tabs">
  <div class="ui-tabs__header">
    <div class="ui-tabs__list">...</div>
    <button class="ui-tabs__nav-left"><span>...</span></button>
    <button class="ui-tabs__nav-right"><span>...</span></button>
  </div>
  <div class="ui-tabs__body">...</div>
</div>

Listing Tabs

Listing tabs have a different style and tabs can have an icon.

The background color here is $grey-lightest, which is the same as the page background-color everywhere, so it will look like the tabs "float" on the page.

Usage

<!-- Listing Tabs (with icons) -->
<!-- Modifier class "ui-tabs--listing" -->
<div class="ui-tabs ui-tabs--listing">
  <div class="ui-tabs__header">
    <div class="ui-tabs__list">

      <!-- Normal icon markup, just before the tab text -->
      <button class="ui-tabs__item" data-tab="d1"><i class="ui-icon ui-icon--tag"></i>...</button>
      <button class="ui-tabs__item" data-tab="d2">...</button>
      <button class="ui-tabs__itemui-tabs__item--active" data-tab="d3"><i class="ui-icon ui-icon--tag"></i>...</button>
      <button class="ui-tabs__item" data-tab="d4"><i class="ui-icon ui-icon--tag"></i>...</button>
    </div>
    <button class="ui-tabs__nav-left"><span>...</span></button>
    <button class="ui-tabs__nav-right"><span>...</span></button>
  </div>
  <div class="ui-tabs__body">...</div>
</div>