Tab

Represents a single tab button. To be fully functional these components must be used with h-tabs and h-tab-panel.

Note: h- stands for headless. This is naming convention used for every webcomponent as they must have a two-part name.

Attributes

Attribute name	Type	Description
disabled	boolean	indicates if a tab is disabled
selected	boolean	indicates if a tab is selected
panel-name	string	name of the panel that this tab shows

DOM events

This webcomponent dispatched the following DOM events:

• selected

Examples

Default

sourceoutput

<h-tab
    class="tabs__tab"
    panel-name="price-net">
       bez VAT
</h-tab>

<h-tab
    class="tabs__tab"
    panel-name="price-net">
       bez VAT
</h-tab>

Selected

sourceoutput

<h-tab
    selected
    class="tabs__tab"
    panel-name="price-net">
       bez VAT
</h-tab>

<h-tab
    selected
    class="tabs__tab"
    panel-name="price-net">
       bez VAT
</h-tab>

Disabled

sourceoutput

<h-tab
    disabled
    class="tabs__tab"
    panel-name="price-net">
       bez VAT
</h-tab>

<h-tab
    disabled
    class="tabs__tab"
    panel-name="price-net">
       bez VAT
</h-tab>

Webcomponents reference

• h-tab-panel
• h-tabs