Tabbed Views

PacemTabsElement (alongside with its children PacemTabElements), allow to switch among multiple contents in the same area.

Tabs can be arranged declaratively:

<pacem-tabs orientation="horizontal|vertical" class="tabs-flat|tabs-rise">
    <pacem-tab label="first">
        <!-- tab content -->
    </pacem-tab>
    <pacem-tab label="second">
        <!-- tab content -->
    </pacem-tab>
    <pacem-tab label="third">
        <!-- tab content -->
    </pacem-tab>
    <pacem-tab label="fourth">
        <!-- tab content -->
    </pacem-tab>
</pacem-tabs>

Slotted Labels

PacemTabElements provide a slot for customizable complex labels:

<pacem-tab>
    <!-- named slot "label" -->
    <pacem-icon icon="warning" slot="label"></pacem-icon>
    <pacem-text text="{{ 'warning' }}" slot="label"></pacem-text>
</pacem-tab>

Referenced Labels

PacemTabElement con refer to a DOM element as a label:

<span id="tabLabel">Label Here</span>

<pacem-tab label="#tabLabel">
    Content Here
</pacem-tab>

The referenced DOM element gets moved into the label's placeholder from its original place.