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

Example of Creating the LineLabel Component

To execute the example, the HTML page must contain links to PP.js script file and to PP.css styles file, in the <body> tag of the HTML page of the <div> item with the lineLabel identifier. In the onload event of the <body> tag it is necessary to add the call of the createLineLabel() function. Add label with line on the page:

function createLineLabel() {
    lineLabel = new PP.Ui.LineLabel({
        // Set parent item
        ParentNode: document.getElementById("lineLabel"),
        // Set label contents
        Content: "Label",
        // Set line height
        LineHeight: 5,
        // Set line blur
        IsLineBlur: true,
        // Set width of line blur
        LineBlurWidth: 10,
        // Set line color
        LineColor: PP.Color.Colors.darkviolet
    });
}

As a result label with line is added on the page: