This page is about the sme-pivot
control. For styles and general information about pivots,
please see
Pivot Styles
There are 2 types of tabs that can be used in conjunction with sme-pivot
:
Tabs are defined in the content area of the sme-pivot
using the sme-pivot-tab
tags.
When sme-pivot-tab
has an ng-template
for its content, it is considered a static
tab. Otherwise, if
the [route]
attribute is provided the tab is considered a routed tab
The sme-pivot
component must be used in conjunction with styles that define height. Such as absolute
positioning, fixed
height, or flex box sizing. This is to allow the content of the tabs to take up the remaining space left by the
header.
This should not be seen when disabled
This is an example of a static tab content
<sme-pivot [selection]="ex1Tab1" style="height:200px;">
<sme-pivot-tab #ex1Tab1 label="Lorem Ipsum">
<ng-template>
<sme-lorem-ipsum></sme-lorem-ipsum>
</ng-template>
</sme-pivot-tab>
<sme-pivot-tab label="Tab 2">
<ng-template>
<div class="sme-layout-absolute sme-position-inset-none sme-documentation">
<p>This is an example of a static tab content</p>
</div>
</ng-template>
</sme-pivot-tab>
</sme-pivot>
<sme-pivot style="height:200px;">
<sme-pivot-tab label="Lorem Ipsum 1" route="/dev/controls/pivot/lorem-ipsum1"></sme-pivot-tab>
<sme-pivot-tab label="Lorem Ipsum 2" route="/dev/controls/pivot/lorem-ipsum2"></sme-pivot-tab>
</sme-pivot>