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.
<divclass="tabs"><divclass="tab-control"><ulclass="tab-list"role="tablist"><liclass="tab-item"><ahref="#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><liclass="tab-item"><ahref="#js-tab2"role="tab"aria-controls="js-tab2">Dolor sit</a></li><liclass="tab-item"><ahref="#js-tab3"role="tab"aria-controls="js-tab3">Consectetur</a></li></ul></div><!-- /.tab-control --><divclass="tab-group"><divclass="tab-content"id="js-tab1"role="tabpanel"><h2>Lorem Ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><!-- /.tab-content --><divclass="tab-content"id="js-tab2"role="tabpanel"><h2>Dolor sit amet</h2><p>In tincidunt tempor risus gravida tincidunt.</p></div><!-- /.tab-content --><divclass="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';
importtabsfrom'@10up/component-tabs';newtabs('.tabs',{orientation:'horizontal',// default is 'horizontal', can be 'vertical'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 compiled
JavaScript from the component's dist directory 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
List of Options for this component
orientation
Whether the tabs are horizontal or vertical, defaults to horizontal