Go to rebrand

Tabs

General

Component responsible to create a content handler based on tabs.

  • It's able to have multiple and independent Tabs on the same page.
  • It's able to set manually a target for every tabLink

Mandatory JS Selectors

  • .js-tabs: Tab wrapped container
  • .js-tabs-link: Tab link
  • .js-tabs-tab: Tab content
  • .js-tabs-open: Tab menu that dispactches the open action
  • .js-tabs-close: Tab menu that dispactches the close action

CSS class modifiers

  • .tabs--opened: When menu tab is opened
  • .tabs--no-menu: When there is no menu
  • .tabs-nav__item--open: When an item is an open button
  • .tabs-nav__item--close: When an item is a close button
  • .tabs-nav__lnk--active: When such a link is activated
  • .tabs-cnt__tab--visible: When such a tab is showed

Data configs

  • data-tabs-target: Data attribute to set target tab, applied on .js-tabs-link element
  • data-tabs-active: Data 'optional' attribute, the default value is 0. Responsible to set specific initial target tab, applied on .js-tabs element

How to use

You need import JS / CSS and use the HTML following indicated:

Import JS

<script defer src="{{ static("js/ca_styleguide_tabs.js") }}"></script>

Import CSS

<link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_styleguide_tabs.css') }}" />

Basic Example

Markup

<div class="tabs js-tabs"> <nav class="tabs-nav"> <ul class="tabs-nav__lst"> <li class="tabs-nav__item"><a class="tabs-nav__lnk js-tabs-link" data-tabs-target="0">Tab 1</a></li> <li class="tabs-nav__item"><a class="tabs-nav__lnk js-tabs-link" data-tabs-target="1">Tab 2</a></li> <li class="tabs-nav__item tabs-nav__item--close"><a class="tabs-nav__lnk js-tabs-close">&#215; Close menu</a></li> <li class="tabs-nav__item tabs-nav__item--open"><a class="tabs-nav__lnk js-tabs-open">&#9776; Menu</a></li> </ul> </nav> <div class="tabs-cnt"> <div class="js-tabs-tab tabs-cnt__tab"> I am displaying the content from tab #1 </div> <div class="js-tabs-tab tabs-cnt__tab"> I am displaying the content from tab #2 </div> </div> </div>
I am displaying the content from tab #1
I am displaying the content from tab #2

Example using data-tabs-active

<div class="tabs js-tabs" data-tabs-active="3"> <nav class="tabs-nav"> <ul class="tabs-nav__lst"> <li class="tabs-nav__item"><a class="tabs-nav__lnk js-tabs-link" data-tabs-target="0">Tab 1</a></li> <li class="tabs-nav__item"><a class="tabs-nav__lnk js-tabs-link" data-tabs-target="1">Tab 2</a></li> <li class="tabs-nav__item"><a class="tabs-nav__lnk js-tabs-link" data-tabs-target="2">Tab 3</a></li> <li class="tabs-nav__item"><a class="tabs-nav__lnk js-tabs-link" data-tabs-target="3">Huge tab name 4</a></li> <li class="tabs-nav__item tabs-nav__item--close"><a class="tabs-nav__lnk tabs-nav__lnk--close js-tabs-close">&#215; Close menu</a></li> <li class="tabs-nav__item tabs-nav__item--open"><a class="tabs-nav__lnk tabs-nav__lnk--open js-tabs-open">&#9776; Menu</a></li> </ul> </nav> <div class="tabs-cnt"> <div class="js-tabs-tab tabs-cnt__tab"> I am displaying the content from tab #1 </div> <div class="js-tabs-tab tabs-cnt__tab"> I am displaying the content from tab #2 </div> <div class="js-tabs-tab tabs-cnt__tab"> I am displaying the content from tab #3 </div> <div class="js-tabs-tab tabs-cnt__tab"> I am displaying the content from tab #4 </div> </div> </div>
I am displaying the content from tab #1
I am displaying the content from tab #2
I am displaying the content from tab #3
I am displaying the content from tab #4

Example non-menu version

<div class="tabs tabs--no-menu js-tabs"> <nav class="tabs-nav"> <ul class="tabs-nav__lst"> <li class="tabs-nav__item"><a class="tabs-nav__lnk js-tabs-link" data-tabs-target="0">Tab 1</a></li> <li class="tabs-nav__item"><a class="tabs-nav__lnk js-tabs-link" data-tabs-target="1">Tab 2</a></li> <li class="tabs-nav__item"><a class="tabs-nav__lnk js-tabs-link" data-tabs-target="2">Tab 3</a></li> <li class="tabs-nav__item"><a class="tabs-nav__lnk js-tabs-link" data-tabs-target="3">Huge tab name 4</a></li> </ul> </nav> <div class="tabs-cnt"> <div class="js-tabs-tab tabs-cnt__tab"> I am displaying the content from tab #1 </div> <div class="js-tabs-tab tabs-cnt__tab"> I am displaying the content from tab #2 </div> <div class="js-tabs-tab tabs-cnt__tab"> I am displaying the content from tab #3 </div> <div class="js-tabs-tab tabs-cnt__tab"> I am displaying the content from tab #4 </div> </div> </div>
I am displaying the content from tab #1
I am displaying the content from tab #2
I am displaying the content from tab #3
I am displaying the content from tab #4

Public methods

switchTo(Number)

Used to handle sort of Tab content through the external scope

const element = document.querySelector('.js-tabs'); element.tabs.switchTo(2);

Tracking

To track the tab elements of this module we make use the data-uapi-event attribute, we especifically add some context to it so that we can identify that the element tracked is a tab module, this property needs to be added to each tab element in the following way

<div class="tabs tabs--no-menu js-tabs"> <nav class="tabs-nav"> <ul class="tabs-nav__lst"> <li class="tabs-nav__item"><a class="tabs-nav__lnk js-tabs-link" data-uapi-event='{"element": "Tracking name", "context": { "nav_tab": "Tab 1" }}" data-tabs-target="0">Tab 1</a></li> <li class="tabs-nav__item"><a class="tabs-nav__lnk js-tabs-link" data-uapi-event='{"element": "Tracking name", "context": { "nav_tab": "Tab 2" }}" data-tabs-target="1">Tab 2</a></li> <li class="tabs-nav__item"><a class="tabs-nav__lnk js-tabs-link" data-uapi-event='{"element": "Tracking name", "context": { "nav_tab": "Tab 3" }}" data-tabs-target="2">Tab 3</a></li> <li class="tabs-nav__item"><a class="tabs-nav__lnk js-tabs-link" data-uapi-event='{"element": "Tracking name", "context": { "nav_tab": "Huge tab name 4" }}" data-tabs-target="3">Huge tab name 4</a></li> </ul> </nav> <div class="tabs-cnt"> <div class="js-tabs-tab tabs-cnt__tab"> I am displaying the content from tab #1 </div> <div class="js-tabs-tab tabs-cnt__tab"> I am displaying the content from tab #2 </div> <div class="js-tabs-tab tabs-cnt__tab"> I am displaying the content from tab #3 </div> <div class="js-tabs-tab tabs-cnt__tab"> I am displaying the content from tab #4 </div> </div> </div>