3.0 beta 2

Content

The component content is accessible via html property, which is rendered inside content layer tag.

var obj = new AX.Component({
    html: 'Hello, <b>{{$name}}</b>!',
    padding: 10,
    align: 'center',
    content: 'nowrap'
});

To control content flow and alignment use content, align properties/child objects.

HTML

The html property is defined with AX.template converter. Assigning a string will automatically convert it to html template function.

var obj = new AX.Component({
    link: 'http://example.com',
    text: 'Click here',
    html: '<a href="{{@link}}">{{@text}}</a>'
});

All other properties (except html, innerHTML and outerHTML) will be escaped when included into the parent template.

Lazy loading

Loading remote content into the component is very easy - just assign the deferred/promise object to the html property. The property setter will check the presence of then() method and automatically attach success/failure callbacks.

var fragment = $.get(url);

var obj = new AX.Component({
    html: fragment
});

Composite components

The simplest way to make a composite component is to assign child objects to the parent properties and include them into the html template.

var icon = new AX.Image();

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

Content flow, alignmnent

Alignment

The align property (AX.Align class) controls horizontal and vertical alignment of the component's content.

var obj = new AX.Component({
    align: 'top right'
});
Or
var obj = new AX.Component({
    align: {
        horizontal: 'center',
        vertical: 'middle'
    }
});

Content flow

The flow property of the content layer (AX.Content class) controls the flow direction ('horizontal' or 'vertical') of the component's content elements.

var obj = new AX.Component({
    content: 'vertical'
});
Or
var obj = new AX.Component({
    content: {
        flow: 'vertical'
    }
});

Text wrap

The wrap property of the content layer (AX.Content class) controls whether the content stays on a single line or wraps into the multi line layout (true|false or 'wrap|nowrap').

var obj = new AX.Component({
    content: 'wrap'
});
Or
var obj = new AX.Component({
    content: {
        wrap: true
    }
});