Tabs
Simple tabs management
Tabs replaces class attributes according to the triggers my-tab="..."
that are clicked. Class names replaced are set into default options that can be overridden for each panel group instance.
Element | Attribute | Definition |
---|---|---|
pane | my-tab-name="ID" |
An HTML element that contains the target content of the tab. ID Must be unique. |
panel group | - | Any HTML element containing multiple panes that are direct child of it |
tab/trigger | my-tab="ID" |
An HTML element that triggers the opening of the tab. Multiple tabs for same pane is supported |
Installation
Tabs requires the following files:
- Download my-tabs-options.js for settings
- Download my-tabs-native.js
<body>
<!-- Just before </body> -->
<script src="/path/to/my-tabs-options.js"></script>
<script src="/path/to/my-tabs-native.js"></script>
</body>
Overview
Just set the initial state classes on triggers and panes according to their settings.
<nav>
<a href="#" my-tab="foo" class="c-btn m-skin-tab-active">Foo</a>
<a href="#" my-tab="bar" class="c-btn m-skin-tab">Bar</a>
<a href="#" my-tab="foobar" class="c-btn m-skin-tab">Foobar</a>
</nav>
<div>
<div my-tab-name="foo">
<h2>Foo tab content</h2>
</div>
<div my-tab-name="bar" class="u-d-none">
<h2>Bar tab content</h2>
</div>
<div my-tab-name="foobar" class="u-d-none">
<h2>Foobar tab content</h2>
<nav>
<a href="#" my-tab="sub-foo" class="c-btn m-skin-tab-active">Sub-tab 1</a>
<a href="#" my-tab="sub-bar" class="c-btn m-skin-tab">Sub-tab 2</a>
<a href="#" my-tab="sub-foobar" class="c-btn m-skin-tab">Sub-tab 3</a>
</nav>
<div>
<div my-tab-name="sub-foo">Sub-tab 1 content</div>
<div my-tab-name="sub-bar" class="u-d-none">Sub-tab 2 content</div>
<div my-tab-name="sub-foobar" class="u-d-none">Sub-tab 3 content</div>
</div>
</div>
</div>
<!-- DEMO ONLY -->
<style>
body { padding: 3em }
[my-tab-name] {
padding: 2em;
border: 1px dotted black;
}
</style>
Settings
Add your own settings into the dedicated file my-tabs-options.js
. Call your own parameters through the custom HTML attribute my-tabs-options="NAME_OF_YOUR_OPTIONS"
The following example is the same as the overview but with custom options set called name1
.
<nav>
<a href="#" my-tab="foo" class="c-txt m-ellipsis c-dim m-fw-content c-btn m-skin-tab-active u-pl-0 u-pr-0">Foo</a>
<a href="#" my-tab="bar" class="c-txt m-ellipsis c-dim m-fw-content c-btn m-skin-tab u-pl-0 u-pr-0">Bar</a>
<a href="#" my-tab="foobar" class="c-txt m-ellipsis c-dim m-fw-content c-btn m-skin-tab u-pl-0 u-pr-0">Foobar</a>
</nav>
<div my-tabs-options="faq">
<div my-tab-name="foo">Foo tab with custom settings called "faq"</div>
<div my-tab-name="bar" class="u-d-none">Bar tab with custom settings called "faq"</div>
<div my-tab-name="foobar" class="u-d-none">Foobar tab with custom settings called "faq"</div>
</div>
<!-- DEMO ONLY -->
<style>
body { padding: 3em }
nav {
display: flex;
gap: 32px;
}
[my-tabs-options="faq"] {
padding-top: 2em;
}
</style>
Parameter | Description |
---|---|
paneDefaultClass |
Inactive pane class attribute |
paneActiveClass |
Active pane class attribute |
tabDefaultClass |
Inactive tabs/triggers class attribute |
tabActiveClass |
Active tabs/triggers class attribute |
Example of custom settings called name1:
let myTabsOptions = {
name1: {
paneDefaultClass: 'u-d-none',
paneActiveClass: '',
tabDefaultClass: '',
tabActiveClass: ''
}
//... Just add your own sets
}
Methods
Tabs comes with methods that can be called through myTabs
object :
Method name | Arguments | Description |
---|---|---|
myTabs.update() |
no | Build/refresh instances of all tabs, invoked at start |
myTabs.open() |
string | Opens the specified tab id, for example myTabs.open('foo') |