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