Toggle

Klikken op een toggle opent of sluit een togglebox Bijv: mobiele nav of share Het openklikken zet ook het juiste aria attribute op de button

Installatie

npm install willy-toggle --save
yarn add willy-toggle

Implementatie

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

Events

Deze voorbeelden gebruiken https://github.com/dgraham/delegated-events

event bij openen toggle

on('toggle:open', '[data-toggle]', event => {
    console.log('open', event);
});

event bij sluiten toggle

on('toggle:close', '[data-toggle]', event => {
    console.log('open', event);
});

Elementen

• Button: [data-toggle="foo"]
• Box: [data-togglebox="foo"]
• Sluiten: [data-toggleclose="foo"] aparte sluit button (geen toggle voor gebruiken, ivm aria attribute bijv)

Extra attributen

• Groep: [data-togglegroup="foogroup"] op de button. In een togglegroup sluiten de openstaande toggles bij het openen van een toggle
• Sluiten buiten box klikken: [data-toggleoption-close-click-outside="false"] op de button. Default is 'true'
• Gebruiken voor tabs: [data-togglebehaviour="tabs] op de button. Dit zorgt ervoor dat er altijd 1 open is, niet gesloten kan worden door er buiten te klikken of op de actieve tab zelf

Testen

• npm run cy:open om zelf te testen
• npm run test om een gehele test te laten lopen

Todo

• nog geen ondersteuning voor meerdere toggles voor 1 box