@pnx-mixtape/tabs

tabs component

Usage no npm install needed!

<script type="module">
  import pnxMixtapeTabs from 'https://cdn.skypack.dev/@pnx-mixtape/tabs';
</script>

README

@pnx-mixtape/tabs

Documentation and examples: Tabs

Installation

npm install @pnx-mixtape/tabs --save

How to use

CSS

  • PostCSS workflow: @import '@pnx-mixtape/tabs';
  • Sass/Eyeglass: @import '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 class="tabs js-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>