@pnx-mixtape/tabs

Documentation and examples: Tabs

Installation

npm install @pnx-mixtape/tabs --save

How to use

CSS

• PostCSS workflow: @import '@pnx-mixtape/tabs';
• Native CSS: @import url('dist/tabs.css');
• Link tag: <link href="dist/tabs.css" rel="stylesheet" type="text/css">

Vanilla JS

• ES6 import: import Tabs from '@pnx-mixtape/tabs';
• Script tag: <script src="dist/tabs.js" type="text/javascript"></script>

HTML

<div data-tabs class="tabs">
  <ul class="tab__list">
    <li class="tab_item"><a href="#">Link</a></li>
    <li class="tab_item"><a href="#">Link</a></li>
  </ul>
  <div class="tab__panel">
    <p>Body content.</p>
  </div>
  <div class="tab__panel">
    <p>Body content.</p>
  </div>
</div>