Options
All
  • Public
  • Public/Protected
  • All
Menu

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);

Hierarchy

  • Tabs

Index

Constructors

Properties

Methods

Constructors

constructor

  • new Tabs(__namedParameters?: { group: any; navSelector: any; contentSelector: any; initial: any; callback: any }): Tabs

  • Parameters

    • __namedParameters: { group: any; navSelector: any; contentSelector: any; initial: any; callback: any } = {}
      • group: any
      • navSelector: any
      • contentSelector: any
      • initial: any
      • callback: any

    Returns Tabs

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: HTMLElement): void

  • Bind the Tabs controller to an HTML application

    Parameters

    • html: HTMLElement

    Returns void

activate

  • activate(tabName: string, triggerCallback?: boolean): void

  • Activate a new tab by name

    Parameters

    • tabName: string
    • triggerCallback: boolean = {}

    Returns void

Private _onClickNav

  • _onClickNav(event: MouseEvent): void

  • Handle click events on the tab navigation entries

    Parameters

    • event: MouseEvent

      A left click event

    Returns void