PacemTabsElement
(alongside with its children PacemTabElement
s), 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>
PacemTabElement
s 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>
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.
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.