spz-tabs

• The element must have a child element with a role="tabs" attribute.
• The child elements of the element with a role="tabs" must use a role="tab" to mark a child tab.
• A child tab must have a data-panel attribute to map content that has a data-id attribute. The data-panel and data-id values are the same.
• A content block must have a role="tabpanel" as a mark.

When we click a child tab, it will be added an active attribute and remove the others. With this, all content blocks also toggle an active accordingly.

<spz-tabs layout="container">
  <ul role="tabs">
    <li role="tab" data-panel="tab-1" active>Tab1</li>
    <li role="tab" data-panel="tab-2">Tab2</li>
  </ul>

  <!-- content block -->
  <div role="tabpanel" data-id="tab-1" active>
    Tab 1 content
  </div>
  <div role="tabpanel" data-id="tab-2">
    Tab 2 content
  </div>
</spz-tabs>

If this attribute is present, the element toggles tab with mouse hover.

tabChange(index=<Number>)

To change a child tab to active status. It has the following parameters:

• index: an integer number with begin zero. Changes the second child tab to active status when the index value is 1.

<button type="button" @tap="tabs.tabChange(index=1);">
  Activate the second tab
</button>