Class Tabs

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

See

Application

Param: config

The Tabs Configuration to use for this tabbed container

Example: Configure tab-control for a set of HTML elements

<!-- 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>

Activate tab control in JavaScript

const tabs = new Tabs({navSelector: ".tabs", contentSelector: ".content", initial: "tab1"});
tabs.bind(html);

Properties

group active callback _navSelector _nav _contentSelector _content

Methods

bind activate _onClickNav

Properties

group

group: string

The name of the tabs group

active

active: string

The value of the active tab

callback

callback: Function

A callback function to trigger when the tab is changed

_navSelector

_navSelector: string

The CSS selector used to target the tab navigation element

_nav

_nav: HTMLElement

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

_contentSelector

_contentSelector: string

The CSS selector used to target the tab content element

_content

_content: HTMLElement

A reference to the HTML container element of the tab content

Methods

bind

  • bind(html): void

  • Bind the Tabs controller to an HTML application

    Parameters

    • html: HTMLElement

    Returns void

activate

  • activate(tabName, triggerCallback?): void

  • Activate a new tab by name

    Parameters

    • tabName: string
    • triggerCallback: boolean = {}

    Returns void

Private _onClickNav

  • _onClickNav(event): void
  • Private

    Handle click events on the tab navigation entries

    Parameters

    • event: MouseEvent

      A left click event

    Returns void

Settings

Member Visibility

Theme

On This Page

groupactivecallback_navSelector_nav_contentSelector_contentbindactivate_onClickNav