Tab

Create horizontal tab navigations and vertical nativations easily.

Introduction

The tab component includes two parts, tab indicators and tab panes. Tab panes are used to wrap contents, and tab indicators are used to control which tab pane to show. A tab can be created with these classes: .tab, .tab-indicators, .tab-panes and .tab-pane.

Vertical Tab

To create a vertical tab navigation, add the class .tab to a container, then wrap tab indicators and tab panes like the below example.

Once upon time a girl named Cinderella lived with her stepmother and two stepsisters. Poor Cinderella had to work hard all day long so the others could rest...

It was she who had to wake up each morning when it was still dark and cold to start the fire. It was she who cooked the meals...

It was she who kept the fire going. The poor girl could not stay clean, from all the ashes and cinders by the fire...

<div class="tab">
  <nav class="tab-indicators btns-x">
    <div class="btn-radio btn-hollow-secondary">
      <input type="radio" id="indicator1" name="tab_example1" value="1">
      <label for="indicator1">Tab One</label>
    </div>
    <div class="btn-radio btn-hollow-secondary">
      <input type="radio" id="indicator2" name="tab_example1" value="2">
      <label for="indicator2">Tab Two</label>
    </div>
    <div class="btn-radio btn-hollow-secondary">
      <input type="radio" id="indicator3" name="tab_example1" value="3">
      <label for="indicator3">Tab Three</label>
    </div>
  </nav>
  <div class="tab-panes">
    <div class="tab-pane">
      <p>
        Once upon time a girl named Cinderella lived with her stepmother
        and two stepsisters. Poor Cinderella had to work hard all day long
        so the others could rest...
      </p>
    </div>
    <div class="tab-pane">
      <p>It was she who had to wake up each morning when it was still dark and cold
         to start the fire. It was she who cooked the meals...
       </p>
    </div>
    <div class="tab-pane">
      <p>
        It was she who kept the fire going. The poor girl could not stay clean,
        from all the ashes and cinders by the fire...
      </p>
    </div>
  </div>
</div>

Horizontal Tab

To create a horizontal tab navigation, a .grid need be wrapped in the .tab container. Let’s see the below example for detail.

Once upon time a girl named Cinderella lived with her stepmother and two stepsisters. Poor Cinderella had to work hard all day long so the others could rest...

It was she who had to wake up each morning when it was still dark and cold to start the fire. It was she who cooked the meals...

It was she who kept the fire going. The poor girl could not stay clean, from all the ashes and cinders by the fire...

<div class="tab">
  <div class="grid">
    <div class="col-4 col-3-m">
      <nav class="tab-indicators btns-y btns-fluid">
        <div class="btn-radio btn-hollow-secondary">
          <input type="radio" id="indicator_1" name="tab_example2" value="1">
          <label for="indicator_1">One</label>
        </div>
        <div class="btn-radio btn-hollow-secondary">
          <input type="radio" checked id="indicator_2" name="tab_example2" value="2">
          <label for="indicator_2">Two</label>
        </div>
        <div class="btn-radio btn-hollow-secondary">
          <input type="radio" id="indicator_3" name="tab_example2" value="3">
          <label for="indicator_3">Three</label>
        </div>
      </nav>
    </div>
    <div class="col-auto">
      <div class="tab-panes">
        <div class="tab-pane">
          <p>
            Once upon time a girl named Cinderella lived with her stepmother
            and two stepsisters. Poor Cinderella had to work hard all day long
            so the others could rest...
          </p>
        </div>
        <div class="tab-pane">
          <p>
            It was she who had to wake up each morning
            when it was still dark and cold
            to start the fire. It was she who cooked the meals...
          </p>
        </div>
        <div class="tab-pane">
          <p>
            It was she who kept the fire going. The poor girl could not stay clean,
            from all the ashes and cinders by the fire...
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Javascript Methods

luda.tab.activate(element, index)

luda.tab.activate(document.querySelector('#my-tab'), 0)

Activate a specific tab pane by passing in its index number.

DOM Events

luda:tab:activate

luda.on('luda:tab:activate', '#my-tab', function(event){
  let $myTab = this, $pane = event.tartet, index = event.detail
  event.preventDefault() // Prevent the pane from being activated if necessary.
})

Will be triggered before the .tab-pane-active class added to a tab pane.

luda:tab:activated

luda.on('luda:tab:activated', '#my-tab', function(event){
  let $myTab = this, $pane = event.tartet, index = event.detail
})

Will be triggered after the .tab-pane-active class added to a tab pane and CSS transition finished.

luda:tab:deactivate

luda.on('luda:tab:deactivate', '#my-tab', function(event){
  let $myTab = this, $pane = event.tartet, index = event.detail
  event.preventDefault() // Prevent the pane from being deactivated if necessary.
})

Will be triggered before the .tab-pane-active class removed from a tab pane.

luda:tab:deactivated

luda.on('luda:tab:deactivated', '#my-tab', function(event){
  let $myTab = this, $pane = event.tartet, index = event.detail
})

Will be triggered after the .tab-pane-active class removed from a tab pane and CSS transition finished.

Sass Variables

$tab-panes-padding-rem: null !default