Box
Overview
Creates a generic control that conatins other controls thats stylized. The box control can group elements, set background colors, borders, radius, etc. This control is useful if a group of elements needs a styled wrapper around it. The default style is determined by the OS, setting any property resets all the properties from the default OS style to a custom style (e.g., the border radius resets to 0, background color sets to transparent, border width to 0, border color to transparent).
Constructors
Description
Creates a new Box generic control.
Definition
new Box()Members
Description
Gets or sets the background color of the box. This should be a CSS-style color attribute, such as rgba(0-255,0-255,0-255,0-1) or named color such as "red" or a Color object.
Example
require('Common'); // include common controls and application context.
var win = new Window();
win.visible = true;
var box = new Box();
box.backgroundColor = 'blue';
win.appendChild(box);
box.left=box.right=box.top=box.bottom=50; // 50px margin.
Description
Gets or sets the color of the border, this should be a CSS-style color attribute, such as rgba(0-255,0-255,0-255,0-1) or named color such as "red" or a Color object.
Example
require('Common'); // include common controls and application context.
var win = new Window();
win.visible = true;
var box = new Box();
box.borderWidth = 2;
box.borderColor = 'red'; // Make the border red, this can also be a rgba() color.
box.backgroundColor = 'rgba(0,255,0,1)';
box.borderRadius = 13;
win.appendChild(box);
box.left = box.right = box.top = box.bottom = 50;
Description
Gets or sets the radius of the corners of the border.
Definition
string box.borderRadius (default 0)Example
require('Common'); // include common controls and application context.
var win = new Window();
win.visible = true;
var box = new Box();
box.borderWidth = 1;
box.borderColor = 'blue';
box.borderRadius = 10; // the curve on all corners is set to 10
// pixel radius.
win.appendChild(box);
box.left=box.right=box.top=box.bottom=50; // 50px margin.
Description
Gets or sets the width of the border in logical pixels
Definition
number box.borderWidth (default 0)Example
require('Common'); // include common controls and application context.
var win = new Window();
win.visible = true;
var box = new Box();
box.borderWidth = 5; // 5 Logical pixels wide.
box.borderColor = 'rgba(0,0,0,0.8)'; // 80% opacity, black border color.
win.appendChild(box);
box.left=box.right=box.top=box.bottom=50; // 50px margin.
