Show:

A base class for ButtonItem, providing: <ul> <li>Widget Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)</li> <li>An optional icon or label</li> <li>Managed user interaction states (default, active, hover)</li> <li>Keyboard accessible</li> </ul>

Quick Example:<br/>

<pre><code>var instance = new A.ButtonItem({ icon: 'gear', label: 'Configuration' }).render(); </code></pre>

Check the list of <a href="ButtonItem.html#configattributes">Configuration Attributes</a> available for ButtonItem.

Constructor

ButtonItem

(
  • config
)

Parameters:

  • config Object

    Object literal specifying widget configuration properties.

Methods

_getState

(
  • key
  • parent
)
Object protected

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

Returns:

Object:

_renderIconNode

() Node protected

Renders the underlying markup for the <a href="ButtonItem.html#config_icon">icon</a>.

Returns:

Node:

_renderLabelNode

() Node protected

Renders the underlying markup for the <a href="ButtonItem.html#config_label">label</a>.

Returns:

Node:

_renderStates

(
  • event
)
protected

Attaches state interaction management to the widget.

Parameters:

_setTitle

() protected

Setter for the title attribute

_syncChildrenStates

() protected

Syncs the boundingBox class names to reflect whether the children only have icons or labels or both.

_uiSetHandler

(
  • val
)
protected

Updates the UI for the icon in response to the <a href="ButtonItem.html#event_HandlerChange">Handler</a> event.

Parameters:

  • val String

    Handler name

_uiSetIcon

(
  • val
)
protected

Updates the UI for the icon in response to the <a href="ButtonItem.html#event_iconChange">iconChange</a> event.

Parameters:

  • val String

    Icon name

_uiSetLabel

(
  • val
)
protected

Updates the UI for the label in response to the <a href="ButtonItem.html#event_labelChange">labelChange</a> event.

Parameters:

  • val String

    The new value

_uiSetTitle

(
  • val
)
protected

Updates the UI for the title in response to the <a href="ButtonItem.html#event_titleChange">titleChange</a> event.

Parameters:

  • val String

    The new value

_uiSetType

(
  • val
)
protected

Updates the UI for the type in response to the <a href="ButtonItem.html#event_typeChange">typeChange</a> event.

Parameters:

  • val String

    The new value

renderUI

() protected

Create the DOM structure for the ButtonItem. Lifecycle.

syncUI

() protected

Sync the ButtonItem UI. Lifecycle.

Properties

ButtonItem.ATTRS

Object static

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

ButtonItem.AUGMENTS

Array static

Static property provides an array to specify which classes augment this one.

ButtonItem.HTML_PARSER

Object static

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

ButtonItem.NAME

String static

Static property provides a string to identify the class.

ROOT_TYPE

Object

Constructor reference used to determine the root of a Widget-based object tree. <p> Currently used to control the behavior of the <code>root</code> attribute so that recursing up the object heirarchy can be constrained to a specific type of Widget. Widget authors should set this property to the constructor function for a given Widget implementation. </p>

Attributes

activeState

Boolean

Whether to track the active state of the button.

Default: 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: true

depth

Number readonly

Number representing the depth of this Widget relative to the root Widget in the object heirarchy.

Default: -1

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: <code>{fn: // The function to execute context: // The context to execute the function in type: // The type of event to listen for (defaults to "click") }</code>

Default: false

hoverState

Boolean

Whether to track the hover interaction state of the button.

Default: true

hoverState

Boolean

An id that can be used to identify a button.

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 <code>aui-button-icon</code>.

Default: Generated div element.

index

Number readonly

Number representing the Widget's ordinal position in its parent Widget.

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 <code>aui-button-label</code>.

Default: Generated div element.

parent

Widget readonly

Retrieves the parent of the Widget in the object hierarchy.

root

Widget readonly

Returns the root Widget in the object hierarchy. If the ROOT_TYPE property is set, the search for the root Widget will be constrained to parent Widgets of the specified type.

selected

Number

Number indicating if the Widget is selected. Possible values are: <dl> <dt>0</dt> <dd>(Default) Not selected</dd> <dt>1</dt> <dd>Fully selected</dd> <dt>2</dt> <dd>Partially selected</dd> </dl>

Default: 0

title

String

Text to use as the title attribute of the button.

type

String

Button type.

Default: button