Tabs
‹ BackThese tabs piggyback off of toggle.js
by taking some shorthand attributes and automatically converting them when rendering.
<div class="tabs"> <nav aria-label="Example Tabs" class="tabs--links"> <ul> <li><button class="tabs--link active" data-tab="tab1_1" data-tab-group="tab1">Tab #1</button></li> <li><button class="tabs--link" data-tab="tab1_2" data-tab-group="tab1">Tab #2</button></li> <li><button class="tabs--link" data-tab="tab1_3" data-tab-group="tab1">Tab #3</button></li> </ul> </nav> <div class="tabs--panes"> <div class="tabs--pane" data-tab-for="tab1_1"> Tab #1 </div> <div class="tabs--pane" data-tab-for="tab1_2"> Tab #2 </div> <div class="tabs--pane" data-tab-for="tab1_3"> Tab #3 </div> </div> </div>
Mapping to toggle attributes
Anchor
Add: data-tab="tabId" data-tab-group="groupId"
Will get translated to data-toggle-anchor="tabId" data-toggle-group="groupId" data-toggle-one-way data-toggle-timing="1"
Pane
Add: data-tab-for="tabId"
Translates to: data-toggle="tabId" data-tab-immediate
The first anchor in the group will get data-toggle-anchor-default
and matching pane will get data-toggle-default
.
Knowing this, you can roll your own custom tab implementations just using the toggle attributes if the defaults are too opinionated.
<div class="tabs"> <nav aria-label="Example One-Way Tabs" class="tabs--links"> <ul> <li><button class="tabs--link active" data-toggle-anchor="tab-toggle_1" data-toggle-group="tab-toggle" data-toggle-one-way data-toggle-timing="1" data-toggle-anchor-default>Tab #1</button></li> <li><button class="tabs--link" data-toggle-anchor="tab-toggle_2" data-toggle-group="tab-toggle" data-toggle-one-way data-toggle-timing="1">Tab #2</button></li> <li><button class="tabs--link" data-toggle-anchor="tab-toggle_3" data-toggle-group="tab-toggle" data-toggle-one-way data-toggle-timing="1">Tab #3</button></li> </ul> </nav> <div class="tabs--panes"> <div class="tabs--pane" data-toggle="tab-toggle_1" data-toggle-default> Tab #1 </div> <div class="tabs--pane" data-toggle="tab-toggle_2"> Tab #2 </div> <div class="tabs--pane" data-toggle="tab-toggle_3"> Tab #3 </div> </div> </div>