Alloy UI

aui-button-item  1.0.1

 
Filters

Class ButtonItem - extends Component - uses WidgetChild

A base class for ButtonItem, providing:
  • Widget Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)
  • An optional icon or label
  • Managed user interaction states (default, active, hover)
  • Keyboard accessible
Quick Example:
var instance = new A.ButtonItem({
icon: 'gear',
label: 'Configuration'
}).render();
Check the list of Configuration Attributes available for ButtonItem.

Constructor

ButtonItem ( config )
Parameters:
config <Object> Object literal specifying widget configuration properties.

Properties

ButtonItem.ATTRS - static Object

Static property used to define the default attribute configuration for the ButtonItem.

ButtonItem.HTML_PARSER - static Object

Object hash, defining how attribute values are to be parsed from markup contained in the widget's content box.

ButtonItem.NAME - static String

Static property provides a string to identify the class.

Properties inherited from Attribute:

Properties inherited from Base:

Properties inherited from Component:

Configuration Attributes

activeState - Boolean

Whether to track the active state of the button.
Default Value: false

classNames - Object

An object map of the CSS class names to use for the different interaction states.

defaultState - Boolean

Whether to apply the default interaction state to the button
Default Value: true

handler - Function | Object

An event callback to handle when a user interacts with the button. This can either be a function that will be attached on click, or an object map that accepts the following keys: {fn: // The function to execute context: // The context to execute the function in type: // The type of event to listen for (defaults to "click") }
Default Value: false

hoverState - Boolean

Whether to track the hover interaction state of the button.
Default Value: true

icon - String

The icon to use inside of the button. Possible values are:

iconNode - String

DOM Node to display the icon of the ButtonItem. If not specified try to query using HTML_PARSER an element inside boundingBox which matches aui-button-icon.
Default Value: Generated div element.

label - String

Text to use inside of the button.

labelNode - String

DOM Node to display the text of the ButtonItem. If not specified try to query using HTML_PARSER an element inside boundingBox which matches aui-button-label.
Default Value: Generated div element.

title - String

Text to use as the title attribute of the button.

Configuration attributes inherited from Widget:

Configuration attributes inherited from Base:

Configuration attributes inherited from Component:

Methods

_getState

protected Object _getState ( key , parent )
Retrieves the state value from either the current instance, or if defined, the parent widget.
Parameters:
key <String> The state name to retrieve
parent <Object> The parent widget to attempt to retrieve the state from

_renderIconNode

protected Node _renderIconNode ( )
Renders the underlying markup for the icon.

_renderLabelNode

protected Node _renderLabelNode ( )
Renders the underlying markup for the label.

_renderStates

protected void _renderStates ( event )
Attaches state interaction management to the widget.
Parameters:
event <EventFacade>

_setTitle

protected void _setTitle ( )
Setter for the title attribute

_syncChildrenStates

protected void _syncChildrenStates ( )
Syncs the boundingBox class names to reflect whether the children only have icons or labels or both.

_uiSetIcon

protected void _uiSetIcon ( val )
Updates the UI for the icon in response to the iconChange event.
Parameters:
val <String> Icon name

_uiSetLabel

protected void _uiSetLabel ( val )
Updates the UI for the label in response to the labelChange event.
Parameters:
val <String> The new value

_uiSetTitle

protected void _uiSetTitle ( val )
Updates the UI for the title in response to the titleChange event.
Parameters:
val <String> The new value

renderUI

protected void renderUI ( )
Create the DOM structure for the ButtonItem. Lifecycle.

syncUI

protected void syncUI ( )
Sync the ButtonItem UI. Lifecycle.

Methods inherited from Plugin.Host:

Events

activeStateChange

activeStateChange ( event )
Fires when the value for the configuration attribute 'activeState' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

classNamesChange

classNamesChange ( event )
Fires when the value for the configuration attribute 'classNames' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

defaultStateChange

defaultStateChange ( event )
Fires when the value for the configuration attribute 'defaultState' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

handlerChange

handlerChange ( event )
Fires when the value for the configuration attribute 'handler' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

hoverStateChange

hoverStateChange ( event )
Fires when the value for the configuration attribute 'hoverState' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

iconChange

iconChange ( event )
Fires when the value for the configuration attribute 'icon' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

iconNodeChange

iconNodeChange ( event )
Fires when the value for the configuration attribute 'iconNode' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

labelChange

labelChange ( event )
Fires when the value for the configuration attribute 'label' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

labelNodeChange

labelNodeChange ( event )
Fires when the value for the configuration attribute 'labelNode' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

titleChange

titleChange ( event )
Fires when the value for the configuration attribute 'title' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set