Tabs

Initialiseert tabs met click handlers en aria-attributen

Installatie

npm install willy-tabs --save
yarn add willy-tabs

Implementatie

import tabs from 'willy-tabs';
tabs();

/**
 * Luisteren naar tab open event
 */
on('tab:open', '[data-tab]', function(event) {
    console.log('Tab open: ', event.detail.name);
});

document.addEventListener('tab:open', function(event) {
    if (event.target.matches('[data-tab]')) {
        console.log('Tab open: ', event.detail.name);
    }
});

Html

De html dient er minimaal zo uit te zien. Dit betekent de attributen die nodig zijn.

LET OP: gebruik geen id's Er wordt een id gezet op de tabs en de panels door het script

<ul data-tab-list>
    <li>
        <button data-tab="tabHandle1" data-tab-open>Tabnaam 1</button>
    </li>
    <li>
        <button data-tab="tabHandle2">Tabnaam 2</button>
    </li>
</ul>

<div data-tab-detail="tabHandle1">
    Tab content 1
</div>

<div data-tab-detail="tabHandle2">
    Tab content 2
</div>

Dit is een standaard code icm BEM. .tabblock voor het geheel en .tabs voor de tabs zelf.

<div class="tabblock">
    <div class="tabblock__tabs">
        <div class="tabs">
            <ul
                class="tabs__list"
                data-tab-list
            >
                <li>
                    <button
                        class="tabs__item"
                        data-tab="tabHandle1"
                        data-tab-open
                    >Tabnaam 1</button>
                </li>
                <li>
                    <button
                        class="tabs__item"
                        data-tab="tabHandle2"
                    >Tabnaam 2</button>
                </li>
            </ul>
        </div>
    </div>

    <div
        class="tabblock__content"
        data-tab-detail="tabHandle1"
    >
        Tab content 1
    </div>

    <div
        class="tabblock__content"
        data-tab-detail="tabHandle2"
    >
        Tab content 2
    </div>