Example of Creating the TabControl Component

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:

TabControl