LabeledTabs is a specialized Tabs instance that presents simple tab buttons with text labels. This can be used in the common case where the tab buttons present a simple text label, such as in a Settings UI.

Demo: Tab buttons can positioned and aligned

The text labels are drawn from the aria-label attribute of the corresponding tab panels. Typical example:

  <div aria-label="General">General settings</div>
  <div aria-label="Accounts">Account settings</div>
  <div aria-label="Junk mail">Junk mail settings</div>
  <div aria-label="Signatures">Signature settings</div>

LabeledTabs is simply a subclass of Tabs that fills the default content of tabButtons slot with a collection of LabeledTabButton instances. It creates one LabeledTabButton for each panel, and sets the textContent of the button to the aria-label attribute of the corresponding panel.

Like the Tabs component it derives from, LabeledTabs is designed to comply as closely as possible with the accessibility recommendations for WAI-ARIA Authoring Practices for Tabs. LabeledTabs assigns a default ARIA role of tab to the tab buttons.

If you'd like to customize the appearance of the tab buttons, use the Tabs component directly.

The LabeledTabs class is registered as element <elix-labeled-tabs>.

© 2016-2018 Component Kitchen Inc. and contributors to the Elix project. ELIX and the Elix project logo are registered or unregistered trademarks of Component Kitchen Inc. in the United States and/or other countries. Other trademarks are the property of their respective owners. Any use of such trademarks without written permission sought and obtained from Component Kitchen is prohibited.

The Elix project is administered, as a courtesy, by Component Kitchen for the benefit of the project’s contributors and the developer community as a whole.