Tabs UI component by Custom Elements

Implement tabs UI component by Custom Elements.

Demo

• Demo page

Examples

<x-tab
  tablist-label="Tab label"
  storage-key="tab1"
>
  <a href="#tabpanel1" slot="tab">Tab 1</a>
  <a href="#tabpanel2" slot="tab">Tab 2</a>
  <div slot="tabpanel" id="tabpanel1">Tab panel 1</div>
  <div slot="tabpanel" id="tabpanel2">Tab panel 2</div>
</x-tab>

Attributes

tablist-label [optional]

Label string to set in [role=tablist]. (set as the `aria-label` attribute value)

storage-key [optional]

When a tab is selected, its value is saved as the `sessionStorage`. The selected tab is maintained when you navigate or reload the page. This value should be unique within your site because it is used as the key for `sessionStorage`. (Setting this attribute is optional, but it is recommended to set it from the viewpoint of usability.)