SplitButton Constructor

Syntax

PP.Ui.SplitButton (settings)

Parameters

settings. JSON object that contains values of component properties.

Description

The SplitButton constructor creates an instance of the SplitButton class.

Example

To execute the example, add links to the library PP.js and visual styles PP.css. In the BODY tag add the DIV item with the splitBut identifier. The PP_img folder must contain an icon named paste.png. In the SCRIPT tag add a code to arrange the component:

    var splitButton = new PP.Ui.SplitButton({
        ImageUrl: "../PP_img/paste.png",
        Content: "Split Button",
        UseWrapping: true,
        IsPressed: true,
        IsToggleButton: true,
        ParentNode: document.getElementById("splitBut"),
        Menu: {
            Items: [
            {
                MenuItem: { Content: "File", ResourceKey: "mainMenuBtn0" }
            },
            {
                MenuItem: { Content: "Help", ResourceKey: "mainMenuBtn4" }
            }
        ]
        }
    });

After executing the example the SplitButton component is placed in the page and looks as follows:

Both parts of the buttons are shown as pressed, as the IsToggleButton and IsPressed properties are set toTrue. If the IsToggleButton property is not set to True, only the lower part of the button is shown as pressed.

As the SplitButton.UseWrapping property is set to True, the button text is wrapped.

Clicking the lower part of the button opens a menu:

See also:

SplitButton