To execute the example, connect the PP.js components library and the PP.css visual styles table. See below 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: