3.0 beta 2

AX.Component

The base class for all ActiveWidgets components.

Use html property to modify the component's HTML content or assign a template.

var obj = new AX.Component({
    html: 'Hello, <b>{{$firstName}}!</b>'
});

The align and content properties control the content flow and alignment.

var obj = new AX.Component({
    align: 'right middle',
    content: 'wrap'
});

The border, background, frame, shadow properties control visibility and style of component layers.

var obj = new AX.Component({
    border: true,
    background: true
});

The width, height, margin and padding control the component dimentions.

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

Properties

background

Shows/hides component background layer.

obj.background(true); // shows background

Provides access to background properties (see Background).

obj.background().style('opacity', 0.5); // modifies background style

border

Shows/hides component border.

obj.border(true); // shows border

Provides access to border layer properties (see Border).

obj.border().classes('my-border'); // adds class to the border layer

content

Shows/hides content.

obj.content(false); // hides content

Sets content flow direction, white space mode (see Content).

obj.content('wrap'); // enables text wrap

disabled

Disabled state (true/false). See also state property.

frame

Shows/hides frame layer (see Frame).

obj.frame(true); // shows frame

height

Component height. String (i.e. '2em') or number (converted to string + 'px').

obj.height(100); // converted to '100px'

hover

Hover state (true/false). Modified by mouseover/mouseout event handlers. Aggregated by state property.

html

Sets component inner HTML content/template (converter: AX.template).

obj.html('<b>Hello, {{$firstName}}!</b>');

Allows to compose the component content with child objects and/or other properties.

var obj = new AX.Component({
    icon: new AX.Image(),
    text: '',
    html: '{{@icon}} {{@text}}'
});

Accepts deferred html content or template.

// load html content via jQuery AJAX
var deferred = $.get('page.html');

var obj = new AX.Panel({
    html: deferred  // assign the asynchronous result directly to the 'html' property
});

layers

Layers collection (AX.HTML.Collection class).

// create a custom layer object
var overlay = new AX.HTML({
    styles: 'position:absolute',
    innerHTML: '...'
});

// assign the layer object to the new 'overlay' property
obj.set('overlay', overlay); 

// add reference to the layers collection
obj.layers().add('@overlay');

Allows to disable layers collection and reduce the component structure to a simple html tag.

obj.layers(false); // disables layers

margin

Component margin. String/Number/Array.

obj.margin([5, 20, 5, 40]);

padding

Component padding. String/Number/Array. Applied to the content layer.

obj.padding(10);

pressed

Pressed state (true/false). Modified by mousedown/mouseup event handlers. Aggregated by state property.

selected

Selected state (true/false).

shadow

Shows/hides component shadow (see Shadow).

obj.shadow(true); // shows shadow

state

Component state (string). Aggregates the values of the hover, pressed, disabled and selected properties. Exposed by the component classes.

obj.state(function(){
    if (this.selected()){return 'selected';}
    if (this.disabled()){return 'disabled';}
    if (this.pressed()){return 'pressed';}
    if (this.hover()){return 'hover';}
    return '';
});

width

Component width. String (i.e. '50%') or number (converted to string + 'px'). Empty string will go back to default value (set in stylesheet).

obj.width(200); // converted to '200px'