Example of Creating the Splitter Component

To execute the example, connect the PP.js components library and the PP.css visual styles table. Seebelow a code that places a Splitter component to the HTML page to manage panels' size:

<style>
    .panel {
        border: 3px solid;
    }
</style>
<body onload="createSplitter()">
    <div id="splitter"></div>
    <script type="text/javascript">
        var splitter;
        function createSplitter() {
        // Create area with two panels and separator
        splitter = new PP.Ui.Splitter({
            // Set parent item
            ParentNode: document.getElementById("splitter"),
            // Enable panels size change
            EnableResize: true,
            //Set minimum panel width to 20 pixels
            MinPanelSize: 20,
            //Set the attribute of HTMLS items sizes change
            ResizeHTMLContent: true,
            //Set horizontal separator
            Orientation: PP.Orientation.Horizontal,
            // Set size
            Width: 200,
            Height: 200,
            //Set HTML contents of the first panel
            Content1: PP.htmlToDOM("<div style='background-color: #A9D8B5;' class='panel'></div>"),
            //Set HTML contents of the second panel
            Content2: PP.htmlToDOM("<div style='background-color: #60A1FA;' class='panel'></div>"),
            //Set position where separator is
            SplitterPosition: 150,
            // Set index of the panel which size will not change on component sizes change
            FixPanel: 1,
            // Handler of the separator value change event
            ValueChanged: function (sender, args) {
                console.log("Separator value is changed")
            }
        });
</script>
</body>

After executing the example the HTML page contains the Splitter component that looks as follows:

The console displays the message about separator value change:

Separator value is changed


Change component orientation to vertical and get area size that resizes panels:

// Set vertical orientation to component
splitter.setIsVertical(true);
// Get size of the area which helps to change panels size
console.log("Size of the panel which helps to change panels size: " + splitter.getResizerSize());

As a result the Splitter component is displayed vertically:

The console displays the size of the area which helps to change panels size:

Size of the area which helps to change panels size: 3

See also:

Splitter