WebUI mobile-first CSS

Tabs

Any WebUI button or link button can be used for navigating between tabs in the tab component, and will be updated with an active class and associated styling when the corresponding tab is shown.

Basic Tabs

The following example demonstrates the simplest structure using buttons and divs. This component must be initialised with JavaScript. If no settings are specified when initialised, then the default settings will apply. The optional tab-item-group wrapper simply sets a height for tab items and sets any overflow to hidden.

Tab 1 content

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Tab 2 content

Pellentesque habitant morbi tristique senectus.

Tab 3 content

Pellentesque habitant morbi tristique senectus.

    
  

  
<div id="tabs1" class="tabs">

  <div class="control-group">
    <button type="button" data-target="#tabs1Tab1" class="tab-activator group-item menu-button menu-button-info transition-long rounded-top-md width-md">Tab 1</button>
    <button type="button" data-target="#tabs1Tab2" class="tab-activator group-item menu-button menu-button-info transition-long rounded-top-md width-md">Tab 2</button>
    <button type="button" data-target="#tabs1Tab3" class="tab-activator group-item menu-button menu-button-info transition-long rounded-top-md width-md">Tab 3</button>
  </div>

  <div class="tab-item-group-md border-xs border-info-dark">
    <div class="tab-item pad-xl" id="tabs1Tab1">
      <b>Tab 1 content</b>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
    </div>
    <div class="tab-item pad-xl" id="tabs1Tab2">
      <b>Tab 2 content</b>
      <p>Pellentesque habitant morbi tristique senectus.</p>
    </div>
    <div class="tab-item pad-xl" id="tabs1Tab3">
      <b>Tab 3 content</b>
      <p>Pellentesque habitant morbi tristique senectus.</p>
    </div>
  </div>
  
</div>
                                                
      
HTML

webui.ready(function() {

  ui("#tabs1").tabControl({ 
    activeTabId: null, 
    activeTabFocused: false,
    transitionDuration: 300,
    transitionType: "fade"
  });

});

JS

Initialisation

The JavaScript initialisation is required for fully working tabs. However, the settings are optional and don't have to be set if the defaults are suitable.

Classes

Classes available in WebUI for tabs.

Class	Description
tabs	Defines a container for one or more tabs.
tab-item	Defines a single tab element.
tab-item-group	Used to ensuring overflow is hidden and tab items are set to the height of the tab-item-group by default.
tab-item-group-sm	Similar to tab-item-group, but with a preset height of 5rem.
tab-item-group-md	Similar to tab-item-group, but with a preset height of 10rem.
tab-item-group-lg	Similar to tab-item-group, but with a preset height of 20rem.
tab-activator	Toggles the element specified by the data target attribute.

Data Attributes

Data attributes available in WebUI for tabs.

Attribute	Description
data-target	Specifies an element that will be toggled by a tab activator.

Settings

Javascript settings available for the tabs control.

Setting	Description
activeTabId	Specifies the id of the initial active tab. Default: null.
activeTabFocused	Whether the active tab should be focused. Default: false.
transitionDuration	The time in milliseconds that the transition effect should last when switching between tabs. Default: 300.
transitionType	The type of transition effect when switching between tabs. Can be "fade" or "collapse". Default: "fade".

Nested Tabs

Nesting tabs follows the same pattern as a single level, except that each tab item includes the navigation for another set of tabs.

Nesting Tabs

Tab 1a content

Pellentesque habitant morbi tristique senectus.

Tab 2a content

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Tab 3a content

Pellentesque habitant morbi tristique senectus.

Tab 2 content

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Tab 3 content

Pellentesque habitant morbi tristique senectus.

    
  

  
<div id="tabs2" class="tabs">

  <div class="control-group">
    <button type="button" data-target="#tabs2Tab1" class="tab-activator group-item menu-button menu-button-info transition-long rounded-top-md width-md">Tab 1</button>
    <button type="button" data-target="#tabs2Tab2" class="tab-activator group-item menu-button menu-button-info transition-long rounded-top-md width-md">Tab 2</button>
    <button type="button" data-target="#tabs2Tab3" class="tab-activator group-item menu-button menu-button-info transition-long rounded-top-md width-md">Tab 3</button>
  </div>

  <div class="tab-item-group height-lg-xl border-xs border-info-dark">
    <div class="tab-item pad-md" id="tabs2Tab1">

      <div id="tabs2Tabs1a" class="tabs">

        <div class="control-group">
          <button type="button" data-target="#tabs2Tab1a" class="tab-activator group-item menu-button menu-button-info transition-long rounded-top-md width-md">Tab 1a</button>
          <button type="button" data-target="#tabs2Tab2a" class="tab-activator group-item menu-button menu-button-info transition-long rounded-top-md width-md">Tab 2a</button>
          <button type="button" data-target="#tabs2Tab3a" class="tab-activator group-item menu-button menu-button-info transition-long rounded-top-md width-md">Tab 3a</button>
        </div>

        <div class="tab-item-group height-lg border-xs border-info-dark">
          <div class="tab-item pad-md" id="tabs2Tab1a">
            <b>Tab 1a content</b>
            <p>Pellentesque habitant morbi tristique senectus.</p>
          </div>
          <div class="tab-item pad-md" id="tabs2Tab2a">
            <b>Tab 2a content</b>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
          </div>
          <div class="tab-item pad-md" id="tabs2Tab3a">
            <b>Tab 3a content</b>
            <p>Pellentesque habitant morbi tristique senectus.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-item pad-md" id="tabs2Tab2">
      <b>Tab 2 content</b>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
    </div>
    <div class="tab-item pad-md" id="tabs2Tab3">
      <b>Tab 3 content</b>
      <p>Pellentesque habitant morbi tristique senectus.</p>
    </div>
  </div>

</div>
                                                          
      
HTML

webui.ready(function() {

  ui("#tabs2").tabControl({ 
    activeTabId: null, 
    activeTabFocused: false,
    transitionDuration: 300,
    transitionType: "collapse"
  });

});

JS

Horizontal Tabs

Horizontal tabs are structured in the same way as all other tabs, but may use some flexbox utility classes to change the orientation of the buttons in relation to the tab content panels.

Horizontal Tabs

The following example is configured using a fade type transition. The transition duration can be adjusted to achieve the optimal effect, whether using collapse or fade transitions.

Tab 1 content

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Tab 2 content

Pellentesque habitant morbi tristique senectus.

Tab 3 content

Pellentesque habitant morbi tristique senectus.

    
  

  
<div class="tabs flex" id="tabs3">	
  <nav class="flex-col gap-xs pad-md">
    <a href="#0" data-target="#tabs3Tab1" class="tab-activator menu-button-link-sm menu-button-accent-1 width-md rounded-md">Tab 1</a>
    <a href="#0" data-target="#tabs3Tab2" class="tab-activator menu-button-link-sm menu-button-accent-1 width-md rounded-md">Tab 2</a>
    <a href="#0" data-target="#tabs3Tab3" class="tab-activator menu-button-link-sm menu-button-accent-1 width-md rounded-md">Tab 3</a>
  </nav>
  <div class="tab-item-group-md flex-grow border-accent-1 rounded-lg">
    <div class="tab-item pad-xl" id="tabs3Tab1">
      <b>Tab 1 content</b>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
    </div>
    <div class="tab-item pad-xl" id="tabs3Tab2">
      <b>Tab 2 content</b>
      <p>Pellentesque habitant morbi tristique senectus.</p>
    </div>
    <div class="tab-item pad-xl" id="tabs3Tab3">
      <b>Tab 3 content</b>
      <p>Pellentesque habitant morbi tristique senectus.</p>
    </div>
  </div>
</div>
                                              
      
HTML

webui.ready(function() {

  ui("#tabs3").tabControl({ 
    activeTabId: null, 
    activeTabFocused: false,
    transitionDuration: 300,
    transitionType: "fade"
  });

});

JS

Component Update

Run-time Tab Updates

Settings specified for the tabControl instance can be updated programatically at run-time. See the following example, which sets the activeTabId setting to tab 3 and activeTabFocused setting to true. Use the restore button to revert the change.

Tab 1 content

Pellentesque habitant morbi tristique senectus et netus et malesuada.

Tab 2 content

Pellentesque habitant morbi tristique senectus.

Tab 3 content

Pellentesque habitant morbi tristique senectus.

    
  

  
<div class="row gap-md text-sm">
  <div class="col-fixed">
    <button id="tabsUpdateCommand" class="button-sm menu-button-info">Update</button>
  </div>
  <div class="col-fixed">
    <button id="tabsRestoreCommand" class="button-sm menu-button-info">Restore</button>
  </div>
</div>
  
<div class="row-spacing-md"></div>

<div id="tabs4" class="tabs">

  <div class="control-group">
    <button type="button" data-target="#tabs4Tab1" class="tab-activator group-item menu-button menu-button-accent-2 transition-long rounded-top-md width-md">Tab 1</button>
    <button type="button" data-target="#tabs4Tab2" class="tab-activator group-item menu-button menu-button-accent-2 transition-long rounded-top-md width-md">Tab 2</button>
    <button type="button" data-target="#tabs4Tab3" class="tab-activator group-item menu-button menu-button-accent-2 transition-long rounded-top-md width-md">Tab 3</button>
  </div>

  <div class="tab-item-group-md border-xs border-accent-2-dark">
    <div class="tab-item pad-xl" id="tabs4Tab1">
      <b>Tab 1 content</b>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
    </div>
    <div class="tab-item pad-xl" id="tabs4Tab2">
      <b>Tab 2 content</b>
      <p>Pellentesque habitant morbi tristique senectus.</p>
    </div>
    <div class="tab-item pad-xl" id="tabs4Tab3">
      <b>Tab 3 content</b>
      <p>Pellentesque habitant morbi tristique senectus.</p>
    </div>
  </div>
</div>
                                                        
      
HTML

webui.ready( () => {

  var tabsControl4 = ui("#tabs4").tabControl({ 
    activeTabId: null, 
    activeTabFocused: false,
    transitionDuration: 300,
    transitionType: "fade"
  });

  ui("#tabsUpdateCommand").click( () => {
    tabsControl4.update({ activeTabId: "#tabs4Tab3", activeTabFocused: true });
  });

  ui("#tabsRestoreCommand").click( () => {
    tabsControl4.update({ activeTabId: null, activeTabFocused: false });
  });

});

JS

Functions

WebUI provides a single function that can be used to update the tabs instance settings at runtime.

Function	Description
update(newSettings)	Updates the tabs instance at runtime using the configuration settings.

Function Arguments

Argument	Description
newSettings	An object literal containing a comma separated list of settings.

Events

Tabs Event Callbacks

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.

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

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

});

JS