The Pivot is a css only control you can use for tab based navigation. It is based on aria attributes so the specific tags are irrelevant to the style. See Accessibility for more information.
For performance, it is usually better to lazy load the contents of the tab using routing or some other mechanism.
The Pivot starts with a container element. this element must have the .sme-pivot
class.
All other pivot elements must be within this container.
The Pivot Header is required and must have the role="tablist"
attribute assigned
inside the header each child must apply the role="tab"
attribute.
There are two ways to set up this control depending on if lazy loading is implemented.
In this approach, each 'tab' element should:
aria-controls
attribute to specify the id of the tab panel that this tab belongs to.aria-selected
attribute (set to true or false) to indicate the selected tab and get the appropriate stylingThis approach is usually better when working with frameworks like angular and rxjs. In this approach, each 'tab' element should:
.sme-active
class to indicate the selected tab and get the appropriate stylingNote: this has some none accessability issues and will be address with an angular control in a future release to use the aria-selected attribute instead of the .sme-active class.
The Pivot Content is optional and defined by elements with the role="tabpanel"
attribute assigned. This content is only applicable to non-lazy load scenarios.
Each 'tabpanel' element should:
id
attribute the corresponds to a 'tab' elements aria-controls
attributearia-hidden
attribute to indicate the selected tab content and get the appropriate visibility
<div class="sme-pivot">
<header role="tablist">
<a role="tab" aria-controls="pivot-target-1" href="#" aria-selected="true" class="sme-active">Tab 1</a>
<a role="tab" aria-controls="pivot-target-2" href="#" aria-selected="false">Tab 2</a>
<a role="tab" aria-controls="pivot-target-3" href="#" aria-selected="false">Tab 3</a>
</header>
<section role="tabpanel" id="pivot-target-1" aria-hidden="false"> Tab 1 </section>
<section role="tabpanel" id="pivot-target-2" aria-hidden="true"> Tab 1 </section>
<section role="tabpanel" id="pivot-target-3" aria-hidden="true"> Tab 1 </section>
</div>
<div class="sme-pivot">
<div role="tablist">
<a role="tab" routerLink="/route1" routerLinkActive="sme-active">Route 1</a>
<a role="tab" routerLink="/route2" routerLinkActive="sme-active">Route 2</a>
<a role="tab" routerLink="/route3" routerLinkActive="sme-active">Route 3</a>
</div>
</div>