Example of Creating the LayoutBox Component

To execute the example HTML page must contain links to PP.js script file and to PP.css style file, in the <body> tag of the HTML document of the <div> item with the layoutBox identifier. In the onload event of the <body> tag it is necessary to specify the call of the createLayoutBox() function. Add the table on the page and fill it with items:

var layoutBox;
function createLayoutBox() {
    // Create timeline
    layoutBox = new PP.Ui.LayoutBox({
        // Set parent item
        ParentNode: document.getElementById("layoutBox"),
        // Set sizes
        Width: 250,
        // Set horizontal orientation of the table
        Orientation: "Horizontal",
    });
    // Add several buttons in the table
    layoutBox.insert(new PP.Ui.Button({ Content: "Button 1", Height: 21 }), 0);
    layoutBox.add(new PP.Ui.Button({ Content: "Button 2", Height: 21 }));
    layoutBox.add(new PP.Ui.Button({ Content: "Button 3", Height: 21 }));
}

As a result of executing the example, get the table with three buttons placed horizontally:

Place table items vertically and remove the third button:

// Set vertical orientation
layoutBox.setOrientation("Vertical");
// Remove the third button
layoutBox.removeByIndex(2);

As a result, get the table with two buttons placed vertically: