Tabs

Tabs

A controller class for managing tabbed navigation within an Application instance.

Constructor

new Tabs(navSelector, contentSelector, initial, callback)

Source:
See:
Examples
<!-- Example HTML -->
<nav class="tabs" data-group="primary-tabs">
  <a class="item" data-tab="tab1">Tab 1</li>
  <a class="item" data-tab="tab2">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
navSelector string

The CSS selector used to target the navigation element for these tabs

contentSelector string

The CSS selector used to target the content container for these tabs

initial string

The tab name of the initially active tab

callback function | null

An optional callback function that executes when the active tab is changed

Members

_content :HTMLElement|null

Source:

A reference to the HTML container element of the tab content

Type:
  • HTMLElement | null

_contentSelector :string

Source:

The CSS selector used to target the tab content element

Type:
  • string

_nav :HTMLElement|null

Source:

A reference to the HTML navigation element the tab controller is bound to

Type:
  • HTMLElement | null

_navSelector :string

Source:

The CSS selector used to target the tab navigation element

Type:
  • string

active :string

Source:

The value of the active tab

Type:
  • string

callback :function|null

Source:

A callback function to trigger when the tab is changed

Type:
  • function | null

Methods

activate(tabName, triggerCallback)

Source:

Activate a new tab by name

Parameters:
Name Type Description
tabName string
triggerCallback boolean

bind(html)

Source:

Bind the Tabs controller to an HTML application

Parameters:
Name Type Description
html HTMLElement