3.0 beta 2

Appearance and State

The visual appearance and visual state of the component are defined by the appearance and state properties.


The visual appearance of the component is defined by the appearance property.

var obj = new AX.Component({
    appearance: 'button'

The property is linked to css class and the actual visual attributes of each component type are defined in the stylesheet.

<span class="ax-{{@appearance}} ax-component">...</span>


The state property controls the component visual state - i.e. 'hover', 'pressed', 'disabled', 'selected'. The default implementation is a calculated property based on hover, pressed, disabled, selected values.

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

You may want to overwrite this function in your class to change the way the composite state is calculated.

The state property is then mapped to the ax-{{@state}} class used to attach the css rules related to component state.

<span class="ax-{{@state}}">...</span>