Butane Tabs

Accessible tab interface JS library.

Install

Install butane-tabs, and add it to your package.json dev dependencies.

$ npm install butane-tabs --save-dev

Then import it into the file where you'll use it.

import ButaneTabs from 'butane-tabs'

Instantiate

ButaneTabs.init()

Expected DOM structure

Below is the minimum required elements and attributes needed. An additional styling layer is also required to show/hide tab panels via the aria-hidden attribute. There are some basic example styles within docs/styles.css for reference.

<div data-butane-tabs>
  <ul aria-label="Code documentation example" data-butane-tablist>
    <li data-butane-tab="tab-html">HTML</li>
    <li data-butane-tab="tab-css">CSS</li>
    <li data-butane-tab="tab-js">JS</li>
  </ul>
 
  <section data-butane-tabpanel="tab-html">HTML Content</section>
  <section data-butane-tabpanel="tab-css">CSS Content</section>
  <section data-butane-tabpanel="tab-js">JS Content</section>
</div>

License

MIT. © 2017 Alex Carpenter