http://mynameislau.github.io/clic-clac
import clic-clac
in your main js file (or simply embed it via a <script>
tag)
Initiate the behaviors using the init
method.
import * as clicClac from 'clic-clac';
clicClac.init();
or you can init only expand or tablist :
import { expand } from 'clic-clac';
expand.init('any-dom-selector'); // default is [data-expand]
If you import it via a script tag, the name of the library in the window object is clicClac
.
data-controls="idOfTheControlledElement"
tells the lib which element this button is controllingdata-expand-default-state
sets the default aria state of the elementdata-click-outside
attribute with the deselect
value to the controlled element.The init function parameter is a DOM selector targeting the tablist main element.
The id of the element will be the name of the tablist (used to fill the aria-owns attribute later).
You can specify if the tablist is multiselectable with the data-multiselectable attribute.
On each tab button, set a data-tab-for
attribute which value is the id. If your tab button is a link (<a>
), you can juste specify the id with an anchor link (href="#xy"
).
of the controlled tab panel.
Set a data-owner
attribute
to specify the tablist that owns the tab.
Set a data-expand-default-state
attribtue to true or false if you want
to specify a default state for this tab
If you don't want at least one tab selected at all times, add a data-at-least-one
attribute to the tablist element with the value false
.
If you want your content to collapse when you click outside of the area, add a data-click-outside
attribute with the deselect
value.
Every time an attribute is modified, a custom clic-clac-state-update
event is dispatched on the element whose attribute changed.
You can use this event as a hook to add custom js behaviours.
The detail
property holds infos about the element :
attribute
: which attribute changedprevState
: previous value of the attributenewState
: new value of the attributeGenerated using TypeDoc