Pivot

1 minute read

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.
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')
        }
    ]
});