Pivot Demo | <uif-pivot>

In order for this demo to work you must first build the library in debug mode.

 

Pivot renders set of links/buttons which can be selected. After being clicked, element is in selected state. If specified, it can be bound to scope via uif-selected attribute, allowing to programatically control which link/tab should be selected.
Due to small bug in Office UI Fabric, elements inside ellipsis might not display correctly. Until its fixed within Fabric UI, you can temporary fix it by overriding a CSS style like this: .ms-Pivot { overflow-x: initial; }

 

uif-size can be used to control size of the pivot:

Regular Large
uif-type can be used to control type of the pivot - tabs or regular:

Regular Tabs
uif-selected can be used to capture and control which element is/should be selected:

My files Recent Shared with me
Ellipsis element can't be selected, but it can contain additional markup, like contextual menu. Visibility of the markup inside ellipsis can be controlled via standard ng-click directive.

This markup:

    <uif-pivot uif-type="{{vm.selectedType}}" uif-size="{{vm.selectedSize}}" uif-pivots="vm.pivots" uif-selected="vm.selectedPivot" id="msPivot">
      <uif-pivot-ellipsis ng-click="openMenu()">
        <uif-contextual-menu uif-is-open="vm.menuOpened" uif-close-on-click="true">
          <uif-contextual-menu-item uif-text="'New'"></uif-contextual-menu-item>
          <uif-contextual-menu-item uif-text="'Edit'"></uif-contextual-menu-item>
          <uif-contextual-menu-item uif-text="'Delete'"></uif-contextual-menu-item>
          <uif-contextual-menu-item uif-type="divider"></uif-contextual-menu-item>
          <uif-contextual-menu-item uif-text="'Settings'"></uif-contextual-menu-item>
        </uif-contextual-menu>
      </uif-pivot-ellipsis>
    </uif-pivot>

Gives following output:

 

Selected pivot: {{vm.selectedPivot | json}}