Method renderHeader

src/js/WinJS/Controls/Pivot/_Pivot.ts:1161–1196

(index: number, aria: boolean)

    }

    renderHeader(index: number, aria: boolean) {
        // Renders a single header
        var that = this;
        var template = _ElementUtilities._syncRenderer(pivotDefaultHeaderTemplate);
        var item = this.pivot.items.getAt(index);

        var headerContainerEl = _Global.document.createElement("BUTTON");
        headerContainerEl.tabIndex = -1;
        headerContainerEl.setAttribute("type", "button");
        headerContainerEl.style.marginLeft = headerContainerEl.style.marginRight = HeaderStateBase.headerHorizontalMargin + "px";
        _ElementUtilities.addClass(headerContainerEl, _Constants._ClassNames.pivotHeader);
        headerContainerEl["_item"] = item;
        headerContainerEl["_pivotItemIndex"] = index;
        template(item, headerContainerEl);

        function ariaSelectedMutated() {
            if (that.pivot._disposed) {
                return;
            }

            if (that.pivot._headersContainerElement.contains(headerContainerEl) &&
                index !== that.pivot.selectedIndex &&
                headerContainerEl.getAttribute('aria-selected') === "true") {
                // Ignore aria selected changes on selected item.
                // By selecting another tab we change to it.
                that.pivot.selectedIndex = index;
            }
        }
        if (aria) {
            headerContainerEl.setAttribute('aria-selected', "" + (index === this.pivot.selectedIndex));
            headerContainerEl.setAttribute('role', 'tab');
            new _ElementUtilities._MutationObserver(ariaSelectedMutated).observe(headerContainerEl, { attributes: true, attributeFilter: ["aria-selected"] });
        }

        return headerContainerEl;
    }

    updateHeader(item: _PivotItem.PivotItem) {
        // Updates the label of a header