Tabs¶

Group of components that organize and allow navigation between related contents. The root component <h-tabs> is used to wrap <h-tab> components. It contains a whole logic for switching views based on a currently selected tab. All components that belongs to tabs:

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

DOM events¶

This webcomponent listens to the following DOM events:

selected

This webcomponent also dispatches the following DOM events:

changed

Example¶

sourceoutput

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

    <h-tab
        class="tabs__tab"
        panel-name="price-gross">
            z VAT
    </h-tab>
</h-tabs>

<h-tab-panel name="price-net">
    200 zł
</<h-tab-panel>

<h-tab-panel name="price-gross">
    246 zł
</h-tab-panel>

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

    <h-tab
        class="tabs__tab"
        panel-name="price-gross">
            z VAT
    </h-tab>
</h-tabs>

<h-tab-panel name="price-net">
    200 zł
</<h-tab-panel>

<h-tab-panel name="price-gross">
    246 zł
</h-tab-panel>