WebUI mobile-first CSS

Tab Classes

The following tables describe the classes available in WebUI for tabs.

Tab Classes

Class

Description

tabs

Defines a container for one or more tabs.

tab-item

Defines a single tab element.

tab-activator

Toggles the element specified by the data target attribute.

Data Attributes

Attribute

Description

data-target

Specifies an element that will be toggled by a tab activator.

Tabs

Basic Tabs

Example

Tab 1 content

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Tab 2 content

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Tab 3 content

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Markup

<div id="tabs1" class="tabs">
  <div class="control-group text-sm">
    <button type="button" data-target="#tab1" class="tab-activator menu-button menu-button-accent-4 transition-long rounded-top-sm width-md">Tab 1</button>
    <button type="button" data-target="#tab2" class="tab-activator menu-button menu-button-accent-4 transition-long rounded-top-sm width-md">Tab 2</button>
    <button type="button" data-target="#tab3" class="tab-activator menu-button menu-button-accent-4 transition-long rounded-top-sm width-md">Tab 3</button>
  </div>
  <div class="tab-item primary border-sm border-accent-4 height-lg" id="tab1">
    <div class="area">
      Tab 1 content
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
    </div>
  </div>
  <div class="tab-item primary border-sm border-accent-4 height-lg" id="tab2">
    <div class="area">
      Tab 2 content
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
    </div>
  </div>
  <div class="tab-item primary border-sm border-accent-4 height-lg" id="tab3">
    <div class="area">
      Tab 3 content
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
    </div>
  </div>
</div>

Script

webui.ready(function() {

  ui("#tabs1").tabControl({ 
    activeTabId: "#tab1", 
    activeTabFocused: true,
    transitionDuration: 1000,
    transitionType: "fade"
  });

});

Nesting Tabs

Example

Tab 1a content

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Tab 2a content

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Tab 3a content

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Tab 2 content

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Tab 3 content

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Markup

<div id="tabsNested1" class="tabs">
  <div class="control-group text-sm">
    <button type="button" data-target="#tabNested1" class="tab-activator menu-button menu-button-accent-4 transition-long rounded-top-sm width-md">Tab 1</button>
    <button type="button" data-target="#tabNested2" class="tab-activator menu-button menu-button-accent-4 transition-long rounded-top-sm width-md">Tab 2</button>
    <button type="button" data-target="#tabNested3" class="tab-activator menu-button menu-button-accent-4 transition-long rounded-top-sm width-md">Tab 3</button>
  </div>
  <div class="tab-item primary border-sm border-accent-4 height-lg-xl" id="tabNested1">
    <div class="panel">
      <div class="tabs" id="tabsNested1a">
        <div class="control-group text-sm">
          <button type="button" data-target="#tabNested1a" class="tab-activator menu-button menu-button-accent-4 transition-long rounded-top-sm width-md">Tab 1a</button>
          <button type="button" data-target="#tabNested2a" class="tab-activator menu-button menu-button-accent-4 transition-long rounded-top-sm width-md">Tab 2a</button>
          <button type="button" data-target="#tabNested3a" class="tab-activator menu-button menu-button-accent-4 transition-long rounded-top-sm width-md">Tab 3a</button>
        </div>
        <div class="tab-item primary border-sm border-accent-4 height-lg" id="tabNested1a">
          <div class="area">
            Tab 1a content
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
          </div>
        </div>
        <div class="tab-item primary border-sm border-accent-4 height-lg" id="tabNested2a">
          <div class="area">
            Tab 2a content
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
          </div>
        </div>
        <div class="tab-item primary border-sm border-accent-4 height-lg" id="tabNested3a">
          <div class="area">
            Tab 3a content
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
          </div>
        </div>
      </div>      
    </div>
  </div>
  <div class="tab-item primary border-sm border-accent-4 height-lg-xl" id="tabNested2">
    <div class="area">
      Tab 2 content
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
    </div>
  </div>
  <div class="tab-item primary border-sm border-accent-4 height-lg-xl" id="tabNested3">
    <div class="area">
      Tab 3 content
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
    </div>
  </div>
</div>

Script

webui.ready(function() {

  ui("#tabsNested1").tabControl({ 
    activeTabId: "#tabNested1", 
    activeTabFocused: false,
    transitionDuration: 1000,
    transitionType: "fade"
  });

});

Initialisation

The JavaScript initialisation is required for fully working tabs. However, you do not have to set any properties as the default settings will take effect.

Events

There are 2 event callbacks that can be used, ui.tabs.change.before and ui.tabs.change.after. The before event is fired just before the tab change occurs, and the after event is fired just after the tab has changed. The following script shows how to setup the event callbacks.

Script

webui.ready(function() {
  
  ui( "#tabs1" ).on("ui.tabs.change.before", function(e) {
    // Take some action
  });

  ui( "#tabs1" ).on("ui.tabs.change.after", function(e) {
    console.log("Previous tab id: " + e.detail[0] + ", New tab id: " + e.detail[1]);

    // Take some action
  });

});