SlidePanel.Resizing

Syntax

Resizing: function (sender, args);

Parameters

sender. Event source.

args. Event information. Arguments: startPosition - panel width before size changing.

Description

The Resizing event occurs on resizing the Details panel.

Example

To execute the example, the <head> tag of HTML page must contain links to PP.js script file and to PP.css styles file, in the <body> tag of HTML page of the <div> item with the panel identifier and the example must be placed in the <script> tag. In the onload event of the <body> tag it is necessary to specify the call of the createSlidePanel() function. Create the SlidePanel component and add a handler of the Resizing and Resized events:

function createSlidePanel() {
    // Create a panel
    panel = new PP.Ui.SlidePanel({
        // Set parent element
        ParentNode: document.getElementById("panel"),
        // Panel title
        HeaderContent: "Title",
        // Detail panel title
        DetailsTitleContent: "Details panel title",
        // Details panel contents
        DetailsContent: "Details panel",
        // View panel contents
        ViewContent: "View panel",
        // Align control to the left
        Alignment: PP.Alignment.Left,
        // Set title height of details panel
        DetailsTitleHeight: 25,
        // Set whether details panel is resized
        EnableResize: true,
        // Set minimum width of left panel
        MinLeftPanelWidth: 50,
        // Set handlers for details panel resize events
        Resizing: function (sender, args) {
            console.log("Details panel is being resized");
        },        
        Resized: function (sender, args) {
            console.log("Details panel is resized");
        },
    });
}

As a result the SlidePanel component is added on the page directed by the left side:

Get the value of distance between contents of the Details panel and header of the Details panel:

// Get distance value between contents of the Details panel and titles of the Details panel
var width = panel.getConsoleCollapsedWidth();
console.log("Distance between contents of the Details panel and title of the Details panel: " + width);

As a result, the console displays the value of required distance:

Distance between contents of the Details panel and header of the Details panel: 31

Change details panel size. As a result information about details panel size changing is displayed in the console:

Details panel size is changing

Details panel size changed.