Anchors: Array of PP.Ui.AnchorStyle
The Anchors property sets position of the component placed within container.
The property is relevant only for controls placed within the component that inherit from PP.Ui.Container.
To execute the example the HTML page must contain links to the PP.css, PP.js and jquery.js files. Add the Panel component that contains a pressed button on the page, create a border for the panel:
//Create the Panel Component
var panel = new PP.Ui.Panel({
Width: 200,
Height: 200,
ParentNode: document.body
});
// Add border for the panel
panel.addClass("newBorder");
$("div.newBorder").css("border", "1px solid blue");
// Create a button placed in the panel top right corner
but = new PP.Ui.ToolBarButton({
Content: "Button",
Anchors: ["Top", "Right"],
IsToggleButton: true
});
//Button is shown as pressed
but.setIsPressed(true);
//Add the button on the panel
panel.add(but);
A panel that contains a button in the top right corner is placed in the page:
Resize the panel and change button position:
//Set a JSON object with panel sizes in the Tag property
but.getParent().setTag({
Width: 250,
Height: 250
});
//Set panel sizes
but.getParent().setSettings(but.getParent().getTag());
//return JSON object with button current position
flags = but.getAnchorFlags();
flags.Bottom = true;
flags.Top = false;
//Update button position
but.updatePosition();
After executing the example the panel looks as follows:
See also: