This package has been deprecated

Author message:

This package has been moved to @w0s/tab

@saekitominaga/customelements-tab

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