Tabs UI component by custom elements
Demo
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 thearia-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 forsessionStorage
. (Setting this attribute is optional, but it is recommended to set it from the viewpoint of usability.)