Pivot

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.

Static Example

This should not be seen when disabled

This is an example of a static tab content

Code

<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>

Routed Example

Code

<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>