Eventival Styleguide / Components / Tabs

Tabs

Tabs are used to quickly navigate between views within the same context.

Basic structure

<nav class="tabs js-tabs" data-tab_content_container_target_id="firstTabContent">
  <div class="tab js-tab active" data-tab_content_target_id="people">People</div>
  <div class="tab js-tab" data-tab_content_target_id="companies">Companies</div>
</nav>

<div data-tab_content_container_id="firstTabContent" class="ma6">
  <div data-tab_content_id="people">
    <p>People content</p>
  </div>
  <div data-tab_content_id="companies">
    <p>Companies content</p>
  </div>
</div>

Examples

Regular Tabs

Provides basic feedback on selected tab and simple hover effects.

People content

Companies content

Films content

Film packages content

Events content

  <nav class="tabs js-tabs" data-tab_content_container_target_id="firstTabContent">
    <div class="tab js-tab active" data-tab_content_target_id="people">People</div>
    <div class="tab js-tab" data-tab_content_target_id="events">Companies</div>
    <div class="tab js-tab" data-tab_content_target_id="films">Films</div>
    <div class="tab js-tab" data-tab_content_target_id="film_packages">Film packages</div>
    <div class="tab js-tab" data-tab_content_target_id="events">Events</div>
  </nav>

  <div data-tab_content_container_id="firstTabContent" class="ma6">
    <div data-tab_content_id="people">
      <p>People content</p>
    </div>
    <div data-tab_content_id="companies">
      <p>Companies content</p>
    </div>
    <div data-tab_content_id="films">
      <p>Films content</p>
    </div>
    <div data-tab_content_id="film_packages">
      <p>Film packages content</p>
    </div>
    <div data-tab_content_id="events">
      <p>Events content</p>
    </div>
  </div>

Bordered

This version has border around the navigation.

Invitation content

Hotel content

Badges content

Events content

Travels content

Transfers content

Schedule content

<nav class="tabs tabs--bordered" data-target="primaryWithModules">
  <div class="tab js-tab" data-tab_content_target_id="invitation">Invitation</div>
  <div class="tab js-tab active" data-tab_content_target_id="hotels">Hotels</div>
  <div class="tab js-tab" data-tab_content_target_id="badges">Badges</div>
  <div class="tab js-tab" data-tab_content_target_id="events">Events</div>
  <div class="tab js-tab" data-tab_content_target_id="travels">Travels</div>
  <div class="tab js-tab" data-tab_content_target_id="transfers">Transfers</div>
  <div class="tab js-tab" data-tab_content_target_id="schedule">Schedule</div>
</nav>

<div data-tab_content_container_id="primaryWithModules">
  <div data-tab_content_id="invitation">
    <p>Invitation content</p>
  </div>
  <div data-tab_content_id="hotels">
    <p>Hotel content</p>
  </div>
  <div data-tab_content_id="badges" >
    <p>Badges content</p>
  </div>
  <div data-tab_content_id="events" >
    <p>Events content</p>
  </div>
  <div data-tab_content_id="travels">
    <p>Travels content</p>
  </div>
  <div data-tab_content_id="transfers" >
    <p>Transfers content</p>
  </div>
  <div data-tab_content_id="schedule">
    <p>Schedule content</p>
  </div>
</div>

Bordered prolonged

Dashboard content
Links content
<nav class="tabs js-tabs tabs--bordered" data-tab_content_container_target_id="foo_content_container">
  <div class="tab js-tab active" data-tab_target_all="1">all</div>
  <div class="tab js-tab" data-tab_content_target_id="dashboard">Dashboard</div>
  <div class="tab js-tab" data-tab_content_target_id="links">Links</div>
</nav>

<div data-tab_content_container_id="foo_content_container">
  <div data-tab_content_id="dashboard">Dashboard content</div>
  <div data-tab_content_id="links">Links content</div>
</div>

Bordered prolonged

Account content

Password content

  <nav class="tabs js-tabs tabs--bordered--prolonged" data-tab_content_container_target_id="tabs-prolonged">
    <div class="tab js-tab"></div>
    <div class="tab js-tab active" data-tab_content_target_id="account">Account</div>
    <div class="tab js-tab" data-tab_content_target_id="password">Password</div>
    <div class="tab js-tab"></div>
  </nav>

  <div data-tab_content_container_id="tabs-prolonged" class="ma6">
    <div data-tab_content_id="account">
      <p>Account content</p>
    </div>
    <div data-tab_content_id="password">
      <p>Password content</p>
    </div>
  </div>

Usage

Tabs navigation (triggers):

Make sure you provide following attributes:

Navigation wrapper with class .js-tabs and attr data-tab_content_container_target_id

Tab elements with class js-tab and either attr data-tab_content_target_id or data-tab_target_all="1"

The default active tab should have class active

Attr data-tab_target_all="1" will make all tab content elements display

  <nav class="tabs js-tabs tabs--bordered" data-tab_content_container_target_id="foo_content_container">
    <div class="tab js-tab active" data-tab_target_all="1">all</div>
    <div class="tab js-tab" data-tab_content_target_id="foo_content1">foo 1</div>
    <div class="tab js-tab" data-tab_content_target_id="foo_content2">foo 2</div>
  </nav>

Tabs content elements and their container:

Make sure you provide following attributes:

Attr data-tab_content_container_id added to some element wrapping content elements for encapsulation, value should match navigation's data-tab_content_container_target_id

tab content elements with attr data-tab_content_id matching navigation's data-tab_content_target_id

If some tab content elements should be hidden on page load, add class dn to them

  <div data-tab_content_container_id="foo_content_container">
    <div data-tab_content_id="foo_content1">Some content 1</div>
    <div data-tab_content_id="foo_content2">Some content 2</div>
  </div>

Design Guideline

Hover and active state

Primary tabs have the top grey border added in the hover and active state. In Backoffice, the border color depends on the related module.