Constructor
new Tabs(config)
- See:
Examples
<!-- Example HTML -->
<nav class="tabs" data-group="primary-tabs">
<a class="item" data-tab="tab1" data-group="primary-tabs">Tab 1</li>
<a class="item" data-tab="tab2" data-group="primary-tabs">Tab 2</li>
</nav>
<section class="content">
<div class="tab" data-tab="tab1" data-group="primary-tabs">Content 1</div>
<div class="tab" data-tab="tab2" data-group="primary-tabs">Content 2</div>
</section>// JavaScript
const tabs = new Tabs({navSelector: ".tabs", contentSelector: ".content", initial: "tab1"});
tabs.bind(html);Parameters:
| Name | Type | Description |
|---|---|---|
config |
TabsConfiguration | The Tabs Configuration to use for this tabbed container |
Members
_content :HTMLElement|null
A reference to the HTML container element of the tab content
Type:
- HTMLElement | null
_contentSelector :string
The CSS selector used to target the tab content element
Type:
- string
_nav :HTMLElement|null
A reference to the HTML navigation element the tab controller is bound to
Type:
- HTMLElement | null
_navSelector :string
The CSS selector used to target the tab navigation element
Type:
- string
active :string
The value of the active tab
Type:
- string
callback :function|null
A callback function to trigger when the tab is changed
Type:
- function | null
Methods
activate(tabName, triggerCallback)
Activate a new tab by name
Parameters:
| Name | Type | Description |
|---|---|---|
tabName |
string | |
triggerCallback |
boolean |
bind(html)
Bind the Tabs controller to an HTML application
Parameters:
| Name | Type | Description |
|---|---|---|
html |
HTMLElement |