tab Demo

* The styling set within the custom element is minimal. Please set the border, color, and other adjustments by yourself. In this demo page, styling is done with the <style> element inside the <head> element.

no attribute

<x-tab>
  <a href="#tabpanel1-1" slot="tab">Tab 1-1</a>
  <a href="#tabpanel1-2" slot="tab">Tab 1-2</a>
  <a href="#tabpanel1-3" slot="tab">Tab 1-3</a>
  <div slot="tabpanel" id="tabpanel1-1">
    Contents of tabpanel 1-1 <button type="button">Focusable element</button>
  </div>
  <div slot="tabpanel" id="tabpanel1-2">
    Contents of tabpanel 1-2 <button type="button">Focusable element</button>
  </div>
  <div slot="tabpanel" id="tabpanel1-3">
    Contents of tabpanel 1-3 <button type="button">Focusable element</button>
  </div>
</x-tab>
Tab 1-1 Tab 1-2 Tab 1-3
Contents of tabpanel 1-1
Contents of tabpanel 1-2
Contents of tabpanel 1-3

tablist-label attribute

<x-tab tablist-label="Tab label">
  <a href="#tabpanel2-1" slot="tab">Tab 2-1</a>
  <a href="#tabpanel2-2" slot="tab">Tab 2-2</a>
  <a href="#tabpanel2-3" slot="tab">Tab 2-3</a>
  <div slot="tabpanel" id="tabpanel2-1">
    Contents of tabpanel 2-1
  </div>
  <div slot="tabpanel" id="tabpanel2-2">
    Contents of tabpanel 2-2
  </div>
  <div slot="tabpanel" id="tabpanel2-3">
    Contents of tabpanel 2-3
  </div>
</x-tab>
Tab 2-1 Tab 2-2 Tab 2-3
Contents of tabpanel 2-1
Contents of tabpanel 2-2
Contents of tabpanel 2-3

storage-key attribute

<x-tab storage-key="tab3">
  <a href="#tabpanel3-1" slot="tab">Tab 3-1</a>
  <a href="#tabpanel3-2" slot="tab">Tab 3-2</a>
  <a href="#tabpanel3-3" slot="tab">Tab 3-3</a>
  <div slot="tabpanel" id="tabpanel3-1">
    Contents of tabpanel 3-1
  </div>
  <div slot="tabpanel" id="tabpanel3-2">
    Contents of tabpanel 3-2
  </div>
  <div slot="tabpanel" id="tabpanel3-3">
    Contents of tabpanel 3-3
  </div>
</x-tab>
Tab 3-1 Tab 3-2 Tab 3-3
Contents of tabpanel 3-1
Contents of tabpanel 3-2
Contents of tabpanel 3-3