<hx-tabset> v0.2.0+ HelixUI v0.2.0 or later required

The custom <hx-tabset> element provides functionality to navigate between one or more tab panels.

Permitted Parents
any
Permitted Children
one of each:
Events
Any of the following:
  • tabchange when the current tab changes

Managing State

Keeping logical and visual states in sync can be tricky.

Logical state should be considered the source of truth when updating visual state. Logical state is defined by attributes and properties of <hx-tabset>, while visual state is defined by the appearance and configuration of its children.

  • If the logical state is incorrect, updating the current-tab attribute should be enough to fix the inconsistency.
  • In all other cases, calling the update() method on <hx-tabset> should fix visual inconsistencies.

Methods

selectNext()

Selects the next tab in the tabset.

Selects the first tab, if the last tab is currently active.

selectPrevious()

Selects the previous tab in the tabset.

Selects the last tab, if the first tab is currently active.

update()

Synchronize visual appearance with element configuration.

Useful when <hx-tab> and <hx-tabpanel> elements are added/removed dynamically.

Attributes

Attributes enable declarative configuration of an element, via HTML markup.

current-tab {Number}

Zero-based index of the currently active tab.

Automatically updates visual state, when changed.

tabsize {Number}

Number of tabs.

Properties

JavaScript properties enable programmatic access to an element's configuration and state.

currentTab {Integer [0]}

Zero-based index of the currently active tab.

Reflects the current-tab attribute.

tabSize {Integer}

Number of tabs.

Reflects the tabsize attribute.

See Also