Documentation for tabs and tab components.
Files
app/styles/modules/_tabs.scssapp/scripts/modules/tabs.jsTabs
Tabs consist of two main parts tabs .tabs and panels .tabs-panels. Tabs contains multiple tab elements with one in active state. Same applies to panels.
Javascript dependency
Tabs functionality is binded to .js-tabs class. Tabs element needs to specify targeted panels element with [data-tabs-panel=selector] attribute. Each tab element needs to specify [data-tab=selector] to select concrete tab to show. Example of this functionality is shown on example below.
Tab 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tab 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tab 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<ul class="tabs js-tabs" data-tabs-panel="#tabs-1">
<li class="tabs_tab">
<a class="tabs_tab_content active" data-tab="#tab-1">Tab 1</a>
</li>
<li class="tabs_tab">
<a class="tabs_tab_content" data-tab="#tab-2">Tab 2</a>
</li>
...
<li class="tabs_tab">
<a class="tabs_tab_content disabled" data-tab="#tab-4">Tab 4</a>
</li>
</ul>
<div class="tabs-panels" id="tabs-1">
<div class="tabs-panels_panel active" id="tab-1">
...
</div>
<div class="tabs-panels_panel" id="tab-2">
...
</div>
...
</div>Tabs bookmarks
Tabs bookmarks are another variation of tabs, wich differs visualy. You can create them by following HTML structure shon in example below. Just add additional class .tabs-bookmarks_content on .tabs_tab_content element and additional class .tabs-panels-bookmarks_panel on .tabs-bookmarks_content.
Tab 1
Lorem ipsum Irure eu commodo ullamco est qui eiusmod ut sed esse nulla elit dolore sit non elit sunt culpa in magna occaecat Excepteur in Excepteur dolor dolore exercitation mollit ad laborum sed incididunt fugiat ad culpa adipisicing deserunt labore ut fugiat reprehenderit minim eiusmod sed id anim do ullamco do incididunt do dolor aute dolore esse ad sit aute ad cupidatat culpa consectetur anim fugiat laborum pariatur magna ut exercitation ullamco tempor amet.
Tab 2
Lorem ipsum Irure eu commodo ullamco est qui eiusmod ut sed esse nulla elit dolore sit non elit sunt culpa in magna occaecat Excepteur in Excepteur dolor dolore exercitation mollit ad laborum sed incididunt fugiat ad culpa adipisicing deserunt labore ut fugiat reprehenderit minim eiusmod sed id anim do ullamco do incididunt do dolor aute dolore esse ad sit aute ad cupidatat culpa consectetur anim fugiat laborum pariatur magna ut exercitation ullamco tempor amet.
Tab 3
Lorem ipsum Irure eu commodo ullamco est qui eiusmod ut sed esse nulla elit dolore sit non elit sunt culpa in magna occaecat Excepteur in Excepteur dolor dolore exercitation mollit ad laborum sed incididunt fugiat ad culpa adipisicing deserunt labore ut fugiat reprehenderit minim eiusmod sed id anim do ullamco do incididunt do dolor aute dolore esse ad sit aute ad cupidatat culpa consectetur anim fugiat laborum pariatur magna ut exercitation ullamco tempor amet.
Tab 4
Lorem ipsum Irure eu commodo ullamco est qui eiusmod ut sed esse nulla elit dolore sit non elit sunt culpa in magna occaecat Excepteur in Excepteur dolor dolore exercitation mollit ad laborum sed incididunt fugiat ad culpa adipisicing deserunt labore ut fugiat reprehenderit minim eiusmod sed id anim do ullamco do incididunt do dolor aute dolore esse ad sit aute ad cupidatat culpa consectetur anim fugiat laborum pariatur magna ut exercitation ullamco tempor amet.
<ul class="tabs js-tabs" data-tabs-panel="#tabs-2">
<li class="tabs_tab">
<a class="tabs_tab_content tabs-bookmarks_content" data-tab="#tab-2-1">Tab 1</a>
</li>
<li class="tabs_tab">
<a class="tabs_tab_content tabs-bookmarks_content active" data-tab="#tab-2-2">Tab 2</a>
</li>
...
<li class="tabs_tab">
<a class="tabs_tab_content tabs-bookmarks_content disabled" data-tab="#tab-2-4">Tab 4</a>
</li>
</ul>
<div class="tabs-panels" id="tabs-2">
<div class="tabs-panels_panel abs-panels-bookmarks_panel" id="tab-2-1">
...
</div>
<div class="tabs-panels_panel abs-panels-bookmarks_panel active" id="tab-2-2">
...
</div>
...
</div>Secondary
There is also secondary version of bookmark tabs, shown in exaple below. Just add additional class .tabs-bookmarks_content on .tabs_tab_content element and additional class .tabs-panels-bookmarks_panel on .tabs-bookmarks_content.
Tab 1
Lorem ipsum Irure eu commodo ullamco est qui eiusmod ut sed esse nulla elit dolore sit non elit sunt culpa in magna occaecat Excepteur in Excepteur dolor dolore exercitation mollit ad laborum sed incididunt fugiat ad culpa adipisicing deserunt labore ut fugiat reprehenderit minim eiusmod sed id anim do ullamco do incididunt do dolor aute dolore esse ad sit aute ad cupidatat culpa consectetur anim fugiat laborum pariatur magna ut exercitation ullamco tempor amet.
Tab 2
Lorem ipsum Irure eu commodo ullamco est qui eiusmod ut sed esse nulla elit dolore sit non elit sunt culpa in magna occaecat Excepteur in Excepteur dolor dolore exercitation mollit ad laborum sed incididunt fugiat ad culpa adipisicing deserunt labore ut fugiat reprehenderit minim eiusmod sed id anim do ullamco do incididunt do dolor aute dolore esse ad sit aute ad cupidatat culpa consectetur anim fugiat laborum pariatur magna ut exercitation ullamco tempor amet.
Tab 3
Lorem ipsum Irure eu commodo ullamco est qui eiusmod ut sed esse nulla elit dolore sit non elit sunt culpa in magna occaecat Excepteur in Excepteur dolor dolore exercitation mollit ad laborum sed incididunt fugiat ad culpa adipisicing deserunt labore ut fugiat reprehenderit minim eiusmod sed id anim do ullamco do incididunt do dolor aute dolore esse ad sit aute ad cupidatat culpa consectetur anim fugiat laborum pariatur magna ut exercitation ullamco tempor amet.
Tab 4
Lorem ipsum Irure eu commodo ullamco est qui eiusmod ut sed esse nulla elit dolore sit non elit sunt culpa in magna occaecat Excepteur in Excepteur dolor dolore exercitation mollit ad laborum sed incididunt fugiat ad culpa adipisicing deserunt labore ut fugiat reprehenderit minim eiusmod sed id anim do ullamco do incididunt do dolor aute dolore esse ad sit aute ad cupidatat culpa consectetur anim fugiat laborum pariatur magna ut exercitation ullamco tempor amet.
<ul class="tabs js-tabs" data-tabs-panel="#tabs-2">
<li class="tabs_tab">
<a class="tabs_tab_content tabs-bookmarks-2_content" data-tab="#tab-2-1">Tab 1</a>
</li>
<li class="tabs_tab">
<a class="tabs_tab_content tabs-bookmarks-2_content active" data-tab="#tab-2-2">Tab 2</a>
</li>
...
<li class="tabs_tab">
<a class="tabs_tab_content tabs-bookmarks-2_content disabled" data-tab="#tab-2-4">Tab 4</a>
</li>
</ul>
<div class="tabs-panels" id="tabs-2">
<div class="tabs-panels_panel abs-panels-bookmarks-2_panel" id="tab-2-1">
...
</div>
<div class="tabs-panels_panel abs-panels-bookmarks-2_panel active" id="tab-2-2">
...
</div>
...
</div>