Pivot.customRightHeader property

Article
01/26/2017

Gets or sets the right custom header content in the Pivot control.

Syntax

<div data-win-control="WinJS.UI.Pivot" data-win-options="{ customRightHeader : value}" />

var customRightHeader = pivot.customRightHeader;
pivot.customRightHeader = customRightHeader;

Property value

Type: ****

The property value identifies the content to be displayed in the right content area of the Pivot control. PivotItems appear to the left of this content area.

Remarks

Pivot custom header content areas

The Pivot tab control can be configured with two special content areas where developers can add any HTML they would like. One area is on the left side and the other is on the right side as shown below.

When resizing the Pivot control, these content areas will not resize automatically. They will remain a fixed size, unless manipulated by the developer. The only part of the top row that will resize is the header items area (with the same resizing logic as before). Implementing these content areas uses the same method as if you were applying a header or footer to a ListView:

<div id="left">Left content area</div>
<div id="right">Right content area</div>
<div id="pivot" data-win-control="WinJS.UI.Pivot" data-win-options="{
        customLeftHeader: select('#left'),
        customRightHeader: select('#right')
      }">
</div>

Set the customLeftHeader property with the HTMLElement that contains the content to be displayed in the left content area. And set the customRightHeader property with the HTMLElement that contains the content to be displayed in the right content area.

Requirements

Minimum WinJS version	WinJS 4.0
Namespace	WinJS.UI

Share via