Working with General Visual Components > Components > ArrowDropPanel > Example of Creating the ArrowDropPanel Component

Example of Creating the ArrowDropPanel Component

To execute the example, the HTML page must contain links to the PP.js script file and the PP.css styles file. In the onload event of the <body> tag it is necessary to add the call of the createArrowDropPanel() function. Create and show drop-down panel with arrow and random contents:

function createArrowDropPanel() {
    arrowDropPanel = new PP.Ui.ArrowDropPanel({
        // Set panel sizes
        Width: 200,
        Height: 200,
        MaxDropDownHeight: 500,
        MaxDropDownWidth: 500,
        MinDropDownHeight: 100,
        MinDropDownWidth: 100,
        // Set panel contents
        Content: "Panel with arrow",
        // Set arrow position towards the panel
        ArrowPosition: PP.Ui.DropPanelArrowPosition.TopBottom
    });
    // Show panel towards the point
    arrowDropPanel.showNextControl(new PP.Point(220, 105));
    // Delete information about arrow position on the panel.
    arrowDropPanel.correctPosition();
}

As a result, drop-down panel with arrow and contents will be displayed in the document: