Although they are most often seen within the content area of an article, tabs are also used as part of larger patterns throughout our theme collection. The Tabs plugin is responsible for generating the HTML markup for a tabs element, based on an existing list.
The Tab plugin, which can be used independently of this plugin, is responsible for showing and hiding tabs.
Usage
Via data attributes
When editing an existing article, create a list (<ul>
or <ol>
element) and click the Source Code () button on the editor toolbar to view the source code of the page. Add the
data-element="tabs"
attribute to the list and optional titles to each list item using the data-title
attribute:
<ul data-element="tabs">
<li data-title="The first tab">...</li>
<li data-title="The second tab">...</li>
<li data-title="The third tab">...</li>
</ul>
Both the Tab and Tabs plugin JavaScript code is included within the plugins.min.js
file by default. If you have edited this file ensure that both are still present. Because data attributes are used, you will need to ensure that the allow unsafe HTML setting is enabled within Guide.
Via JavaScript
The Tabs plugin can be instantiated against a list using JavaScript:
<ul class="js-tabs">...</ul>
<script type="text/javascript">
ready(function() {
each('.js-tabs', function(el) {
new Tabs(el, {
// Options go here
});
});
});
</script>
Examples
The following example uses the default template, which can replaced using the plugin’s template
setting.
-
-
<ul data-element="tabs"> <li data-title="The first tab"> <p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis.</p> </li> <li data-title="The second tab"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </li> <li data-title="The third tab"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue justo a metus bibendum dapibus. In imperdiet interdum tincidunt. Nam odio dolor, hendrerit vel eros non, viverra pellentesque tellus. Proin ac elit in leo faucibus gravida. Donec ut neque non augue porttitor mollis a quis eros.</p> </li> </ul>
Alternatively you can copy-and-paste your custom tab HTML markup onto any page, eliminating the need to use the Tabs plugin.
An optional fade effect can be added by using .fade
on each tab. The active tab must also have .is-shown
in order to be visible.
Options
Options can be passed via data attributes or JavaScript.
For data attributes, append the option name to data-
. For example, data-template="my-tabs"
instructs the plugin to use the custom my-tabs
template for rendering markup.
Name | Type | Default | Description |
---|---|---|---|
initial | number | 0 | The index of the tab that should be shown on initialization. |
template | string null | null | The name of the template to use. |
templateData | object | {} | Additional data to provide to the template rendering function. |
Events
Name | Description |
---|---|
tabs.render | Fires when the tabs markup has been rendered and inserted into the DOM. |
Because the original list is replaced with the HTML from the template, the event contains a reference to the new element:
document.addEventListener('tabs.render', function(e) {
// The newly rendered tabs element
var tabs = e.detail.relatedTarget;
});