Class Tabs

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

See

foundry.applications.api.ApplicationV2

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 foundry.applications.ux.Tabs({navSelector: ".tabs", contentSelector: ".content", initial: "tab1"});
tabs.bind(html);

Constructors

constructor

Properties

_content _contentSelector _nav _navSelector active callback group

Methods

activate bind _onClickNav

Constructors

constructor

Properties

Internal_content

_content: null | HTMLElement = null

A reference to the HTML container element of the tab content

Internal_contentSelector

_contentSelector: string

The CSS selector used to target the tab content element

Internal_nav

_nav: null | HTMLElement = null

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

Internal_navSelector

_navSelector: string

The CSS selector used to target the tab navigation element

active

active: string

The value of the active tab

callback

callback: null | Function

A callback function to trigger when the tab is changed

group

group: string

The name of the tabs group

Methods

activate

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

    Activate a new tab by name

    Parameters

    • tabName: string
    • triggerCallback: boolean = {}

    Returns void

bind

  • bind(html: HTMLElement): void

    Bind the Tabs controller to an HTML application

    Parameters

    • html: HTMLElement

    Returns void

Protected_onClickNav

  • _onClickNav(event: PointerEvent): void
    Protected

    Handle click events on the tab navigation entries

    Parameters

    • event: PointerEvent

      A left click event

    Returns void

Settings

Member Visibility

On This Page

Constructors
Properties
Methods