Tabs

Default tabs

Pane-1
Pane-2
Pane-3
<ul class="mui-tabs__bar"> <li class="mui--is-active"><a data-mui-toggle="tab" data-mui-controls="pane-default-1">Tab-1</a></li> <li><a data-mui-toggle="tab" data-mui-controls="pane-default-2">Tab-2</a></li> <li><a data-mui-toggle="tab" data-mui-controls="pane-default-3">Tab-3</a></li> </ul> <div class="mui-tabs__pane mui--is-active" id="pane-default-1">Pane-1</div> <div class="mui-tabs__pane" id="pane-default-2">Pane-2</div> <div class="mui-tabs__pane" id="pane-default-3">Pane-3</div>
View in new tab »

Justified tabs

Pane-1
Pane-2
Pane-3
<ul class="mui-tabs__bar mui-tabs__bar--justified"> <li class="mui--is-active"><a data-mui-toggle="tab" data-mui-controls="pane-justified-1">Tab-1</a></li> <li><a data-mui-toggle="tab" data-mui-controls="pane-justified-2">Tab-2</a></li> <li><a data-mui-toggle="tab" data-mui-controls="pane-justified-3">Tab-3</a></li> </ul> <div class="mui-tabs__pane mui--is-active" id="pane-justified-1">Pane-1</div> <div class="mui-tabs__pane" id="pane-justified-2">Pane-2</div> <div class="mui-tabs__pane" id="pane-justified-3">Pane-3</div>
View in new tab »

JavaScript Events

The following events get dispatched on toggle elements:

  • mui.tabs.showstart - Fires when tab is activated but before pane is visible
  • mui.tabs.showend - Fires when pane is visible
  • mui.tabs.hidestart - Fires when tab is inactivated but before pane is hidden
  • mui.tabs.hideend - Fires when pane is hidden

Each event object contains the following custom attributes:

  • paneId - The pane ID being shown/hidden
  • relatedPaneId - The pane ID being hidden/shown
Pane-1
Pane-2
Pane-3
<ul class="mui-tabs__bar"> <li class="mui--is-active"><a data-mui-toggle="tab" data-mui-controls="pane-events-1">Tab-1</a></li> <li><a data-mui-toggle="tab" data-mui-controls="pane-events-2">Tab-2</a></li> <li><a data-mui-toggle="tab" data-mui-controls="pane-events-3">Tab-3</a></li> </ul> <div class="mui-tabs__pane mui--is-active" id="pane-events-1">Pane-1</div> <div class="mui-tabs__pane" id="pane-events-2">Pane-2</div> <div class="mui-tabs__pane" id="pane-events-3">Pane-3</div> <script>  // get toggle elements  var toggleEls = document.querySelectorAll('[data-mui-controls^="pane-events-"]');  function logFn(ev) {  var s = '[' + ev.type + ']';  s += ' paneId: ' + ev.paneId;  s += ' relatedPaneId: ' + ev.relatedPaneId;  console.log(s);  }  // attach event handlers  for (var i=0; i < toggleEls.length; i++) {  toggleEls[i].addEventListener('mui.tabs.showstart', logFn);  toggleEls[i].addEventListener('mui.tabs.showend', logFn);  toggleEls[i].addEventListener('mui.tabs.hidestart', logFn);  toggleEls[i].addEventListener('mui.tabs.hideend', logFn);  } </script>
View in new tab »

Tabs API

To activate tabs programmatically use the mui.tabs.activate(paneId) method:

Pane-1
Pane-2
Pane-3
<ul class="mui-tabs__bar"> <li class="mui--is-active"><a data-mui-toggle="tab" data-mui-controls="pane-api-1">Tab-1</a></li> <li><a data-mui-toggle="tab" data-mui-controls="pane-api-2">Tab-2</a></li> <li><a data-mui-toggle="tab" data-mui-controls="pane-api-3">Tab-3</a></li> </ul> <div class="mui-tabs__pane mui--is-active" id="pane-api-1">Pane-1</div> <div class="mui-tabs__pane" id="pane-api-2">Pane-2</div> <div class="mui-tabs__pane" id="pane-api-3">Pane-3</div> <script>  var paneIds = ['pane-api-1', 'pane-api-2', 'pane-api-3'],  currPos = 0;  function activateNext() {  // increment id  currPos = (currPos + 1) % paneIds.length;  // activate tab  mui.tabs.activate(paneIds[currPos]);  } </script> <button class="mui-btn mui-btn--primary" onclick="activateNext();">Next</button>
View in new tab »
« Previous Next »