To execute the example, connect the PP.js components library and the PP.css visual styles table. See below the Javascript code used to create the TabControl component.
//create the TabControl component
var tabcontrol= new PP.Ui.TabControl({
Id: "TabControl1",
ParentNode: document.getElementById("sample"),
//prohibit to drag tabs
DragDropEnabled: false,
//path to the folder with images
ImagePath: "build/img/",
Width: 500,
Height: 40,
//array of tabs
Items: [{
//tab header
Caption: "Edit",
//path to the image which will be shown in the tab header
ImageUrl: "build/img/navigator/ribbon/edit.png",
//tab position
Position: PP.LTRB.Top
}, {
Caption: "Marking",
Position: PP.LTRB.Top
}, {
Caption: "View",
Position: PP.LTRB.Top
}, {
Caption: "Border",
Position: PP.LTRB.Top
}, {
Caption: "Fill",
Position: PP.LTRB.Top
}]
});
//add a tab
tabcontrol.addItem({
Caption: "Protection",
Position: PP.LTRB.Top
});
After executing the example the HTML page will contain the TabControl component that looks as follows:
See also: