3.0 beta 2

Size

The components include width, height, margin and padding properties to control component dimensions.

var obj = new AX.Component({
    width: '50%',
    height: 25,
    margin: [5, 20],
    padding: '1em'
});

Width/Height

The width and height are defined with AX.px converter and accept both number and string. The string has to include units (i.e. '10px', '50%' or '1.5em') while the number is treated as pixels.

The properties are linked into the width and height style attributes of the component tag -

<span class="ax-component" style="width:{{@width}};height:{{@height}}">...</span>

Margin

The margin property holds AX.Offset object and can be assigned number, string or array of number and/or strings.

var obj = new AX.Component({
    margin: [5, 10, 5, 20]
});

It is also possible to modify each side individually -

obj.margin().left(50); // set left margin to 50px

The margin property is linked to the margin style attribute of the component tag -

<span class="ax-component" style="margin:{{@margin}}">...</span>

Padding

The padding property is also an AX.Offset object but it is linked to the padding style of the content layer and not the component tag.

<span class="ax-component">
    <span class="ax-content" style="padding:{{@padding}}">{{@html}}</span>
</span>

Box models

ActiveWidgets requires standards-mode doctype, for example '<!doctype html>', which triggers content-box model by default. The library is also compatible with a border-box model applied to all elements.

% size and margin box

When one of the component dimensions (width or height) is set to % of the parent, the size calculations follow the algorithm, which could be described as 'margin-box'. The % size is applied to the outer boundaries of the component, which include component margin.