Pivot

Documentation

Input Parameters

Name	Type	Description
className	string	The class name to apply to the main element.
el	HTMLElement	The element to render the pivot to.
isFlipped	boolean	True to render the tabs under the content.
isLarge	boolean	True to render text.
isTabs	boolean	True to render tabs.
tabs	Array<IPivotLink>	The tabs.

Pivot Link Interface

Name	Type	Description
className	string	The class name.
content	string	The tab content.
isSelected	boolean	True for the selected tabs.
name	string	The tab name.
onClick	Function	The click event for the tab.

Fabric Interface

Name	Type/Description
_container	HTMLDivElement

JavaScript

var $REST = require("gd-sprest-js");

// Create the tabs
var el = document.querySelector("#tabs");
$REST.JS.Fabric.Pivot({
    el: el,
    tabs: [
        {
            name: "Tab 1",
            content: [
                '<div>',
                '<p>This is the first tab.</p>',
                '</div>'
            ].join('\n')
        },
        {
            name: "Tab 2",
            content: [
                '<div>',
                '<p>This is the second tab.</p>',
                '</div>'
            ].join('\n')
        },
        {
            name: "Tab 3",
            content: [
                '<div>',
                '<p>This is the third tab.</p>',
                '</div>'
            ].join('\n')
        }
    ]
});

TypeScript

import { Fabric } from "gd-sprest-js";

// Create the tabs
var el = document.querySelector("#tabs");
Fabric.Pivot({
    el,
    tabs: [
        {
            name: "Tab 1",
            content: [
                '<div>',
                '<p>This is the first tab.</p>',
                '</div>'
            ].join('\n')
        },
        {
            name: "Tab 2",
            content: [
                '<div>',
                '<p>This is the second tab.</p>',
                '</div>'
            ].join('\n')
        },
        {
            name: "Tab 3",
            content: [
                '<div>',
                '<p>This is the third tab.</p>',
                '</div>'
            ].join('\n')
        }
    ]
});