tabs
An accessible tabs component to help structure large amounts of content on a page.
The tabs component is based on and extended from work done by the folks over at Simply Accessible. It is a stripped down, but still accessible version of UI tabs. They are keyboard accessible and user friendly and are meant to be a starting point for you to use on a project.
Examples
Usage
<div class="tabs">
<div class="tab-control">
<ul class="tab-list" role="tablist">
<li class="tab-item">
<a href="#js-tab1" role="tab" aria-controls="js-tab1">Lorem Ipsum</a>
<!-- This can be a link or button: <button role="tab" aria-controls="js-tab1">View Tab 1</button> -->
</li>
<li class="tab-item">
<a href="#js-tab2" role="tab" aria-controls="js-tab2">Dolor sit</a>
</li>
<li class="tab-item">
<a href="#js-tab3" role="tab" aria-controls="js-tab3">Consectetur</a>
</li>
</ul>
</div><!-- /.tab-control -->
<div class="tab-group">
<div class="tab-content" id="js-tab1" role="tabpanel">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div><!-- /.tab-content -->
<div class="tab-content" id="js-tab2" role="tabpanel">
<h2>Dolor sit amet</h2>
<p>In tincidunt tempor risus gravida tincidunt.</p>
</div><!-- /.tab-content -->
<div class="tab-content" id="js-tab3" role="tabpanel">
<h2>Consectetur adipiscing</h2>
<p>Suspendisse eget commodo erat. Donec a metus fringilla, pharetra ipsum nec, aliquet felis. </p>
</div><!-- /.tab-content -->
</div><!-- /.tab-group -->
</div><!-- /.tabs -->
@import '@10up/component-tabs';
import Tabs from '@10up/component-tabs';
new Tabs( '.tabs', {
orientation: 'horizontal', // default is 'horizontal', can be 'vertical'
onCreate: function() {
console.log( 'onCreate callback' );
},
onTabChange: function() {
console.log( 'onTabChange callback' );
}
} );
let tabsInstance = new TenUp.tabs( '.tabs', {
onCreate: function() {
console.log( 'onCreate callback' );
},
onTabChange: function() {
console.log( 'onTabChange callback' );
}
} );
* Standalone JS is used on projects that are not set up to handle ES6. To use this version you will need to download the UMD bundle from the NPM and pull it into your project. The same process should be followed with the CSS if it cannot process through the NPM package.
Documentation
Installation
This component accepts two arguments, the selector for the accordion container and an object containing optional callbacks.
npm install @10up/component-tabs --save
Options
orientation | Whether the tabs are horizontal or vertical, defaults to horizontal |
---|---|
onCreate | Called after the tab is initialized on page load |
onTabChange | Called when a tab item is changed |
Methods
destroy() | Destroys the component, removing event listeners and any extra markup and attributes. |
---|
Classes
.tabs | Wrapping class for the tabs component. |
---|---|
.tab-control | Wrapping class for the tab buttons. |
.tab-list | Class for the list containing the tab buttons |
.tab-item | An individual tab item. |
.tab-group | A group of tab content panels. |
.tab-content | An individual tab panel. |
Browser Compatibility
Chrome | Latest |
---|---|
Firefox | Latest |
Edge | Latest |
Safari | Latest |
IE | 11 (Standalone only) |