fafaz-tab

fafaz-Tab is a lightweight tab plugin with no dependencies (3KB minified / 1.3KB gzipped)

Usage no npm install needed!

<script type="module">
  import fafazTab from 'https://cdn.skypack.dev/fafaz-tab';
</script>

README

fafaz-Tab

fafaz-Tab is a lightweight tab plugin with no dependencies (3KB minified / 1.3KB gzipped)



Instructions

common

<body>
    <div class="tab" hidden>
        <div class="tab-header">
            <div class="tab-header__item">title 1</div>
            <div class="tab-header__item">title 2</div>
            <div class="tab-header__item">title 3</div>
        </div>
        <div class="tab-body">
            <div class="tab-body__item">content 1</div>
            <div class="tab-body__item">content 2</div>
            <div class="tab-body__item">content 3</div>
        </div>
    </div>
</body>

basic usage

<body>
  .
  .
  .

    <script src="path/Tab.min.js"></script>
    <script>
        var myTab = new fafaz.Tab.default('.tab');
    </script>
</body>

package manager + babel compiler

npm install --save fafaz-tab or yarn add fafaz-tab

import Tab from 'fafaz-tab';

const myTab = new Tab('.tab');



Events

var myTab = new fafaz.Tab('.tab');

myTab.on('change', ({ idx, container }) => {
    console.log(idx, container);
})



Compatibility

IE10+ (this library uses css flexbox)



License

MIT