Class: Button

componyx .UI.Button(id, properties) → {Object}

new Button(id, properties) → {Object}

Button class.

Parameters:

Name	Type	Description
`id`	String	The id of the component.
`properties`	Object \| HTMLElement	The properties used to initialize the component or the container element.

Mixes In:

componyx.UI.base.methods

Returns:

An instance of the component.

Type: Object

Extends

componyx.UI.base.Component

Classes

ButtonEvents

Members

autoPostBack :Boolean

Gets or sets a value indicating whether the PostBack event is automatically fired.

Type:

Boolean

boxId :String|null

Gets or sets which box to expand when the expand button is clicked.

Type:

String | null

collapseCommand :function|String|null

Gets or sets an collapse command action.

Type:

function | String | null

command :function|String|null

Gets or sets the command action of the button.

Type:

function | String | null

contentAlign :componyx.UI.Button.AlignOption

Gets or sets the content alignment option.

Type:

componyx.UI.Button.AlignOption

cssClassCommand :String

Gets or sets the css class of the command button in a split button.

Type:

String

cssClassContentAlign :String

Gets or sets the content align class. This class is followed by a hyphen (-) with the current align option and is appended to the button class. Default: content-left

Type:

String

cssClassContentHolder :String

Gets or sets the css class of the content holder within the button.

Type:

String

cssClassExpand :String

Gets or sets the css class of the expand button in a split button.

Type:

String

cssClassExpandIcon :String

Gets or sets the css class of the expand icon in a split button.

Type:

String

cssClassIcon :String

Gets or sets the css class of the button icon.

Type:

String

cssClassIconAlign :String

Gets or sets the icon align class. This class is followed by a hyphen (-) with the current align option and is appended to the button class. Default: icon-left

Type:

String

cssClassSplit :String

Gets or sets the css class for a split button.

Type:

String

decoration :componyx.UI.Button.DecorationOption

Gets or sets the decoration type used when the button is hovered/selected.

Type:

componyx.UI.Button.DecorationOption

disabled :Boolean

Gets or sets a value indicating whether the button is disabled.

Type:

Boolean

events :componyx.UI.Button.ButtonEvents

Button events

Type:

componyx.UI.Button.ButtonEvents

expandCommand :function|String|null

Gets or sets an expand command action.

Type:

function | String | null

expandDirection :componyx.UI.Button.ExpandDirectionOption

Gets or sets the expand direction of the button.

Type:

componyx.UI.Button.ExpandDirectionOption

expanded :Boolean

Gets or sets a value indicating whether the button is in expanded state.

Type:

Boolean

hasIcon :Boolean

Gets or sets if the icon span tag should be rendered.

Type:

Boolean

href :String|null

Gets or sets the href (hypertext reference) of the button. Applies to non-split buttons only.

Type:

String | null

iconAlign :componyx.UI.Button.AlignOption

Gets or sets the icon alignment option.

Type:

componyx.UI.Button.AlignOption

iconUrl :String|null

Gets or sets the URL of the icon.

Type:

String | null

keyboardExpand :Boolean

Gets or sets a value indicating if the button keyboard navigation for expanding/collapsing is enabled when it has an expandable feature (menuId, boxId or expandCommand).

Type:

Boolean

menuId :String|null

Gets or sets which menu to expand when the expand button is clicked.

Type:

String | null

menuItemId :String|null

Gets or sets a menu root item to expand on the corresponding menu when the expand button is clicked.

Type:

String | null

primary :Boolean

Gets or sets a value indicating if the button is a primary button. When disabled the button's default style will be less prominent (basic) unless styled otherwise.

Type:

Boolean

radioGroupId :String|null

Gets or sets the radio group id.

Type:

String | null

renderId :Boolean

Gets or sets a value indicating if the identifier of the component is rendered in the HTML output of the root element.

Type:

Boolean

rippleAnimation :Boolean

Gets or sets a value indicating if the ripple animation is activated on a command/expand click event.

Type:

Boolean

selected :Boolean

Gets or sets a value indicating whether the button is selected.

Type:

Boolean

shortcutKey :String|null

Gets or sets the shortcut key to trigger this button e.g. 'z', 'ctrl+z', 'alt+s'. If no modifier is provided, ctrl is assumed by default.

Type:

String | null

shortcutScope :HTMLElement|String|function|null

Gets or sets the DOM element (or its identifier, or a function returning it) within which this shortcut is active. If null, the shortcut is globally active (i.e., it works anywhere).

Type:

HTMLElement | String | function | null

size :componyx.UI.Button.SizeOption

Gets or sets the size option.

Type:

componyx.UI.Button.SizeOption

split :Boolean

Gets or sets a value indicating if the button has two actions.

Type:

Boolean

target :String|null

Gets or sets the href target of the button. Applies to non-split buttons only.

Type:

String | null

text :String|null

Gets or sets the text of the button.

Type:

String | null

tooltipId :String|null

Gets or sets the id of the tooltip to show.

Type:

String | null

tooltipManagerId :String|null

Gets or sets the tooltip manager used to display tooltips.

Type:

String | null

transparent :Boolean

Gets or sets a value indicating if the button's default background color is transparent.

Type:

Boolean

transparentBorder :Boolean

Gets or sets a value indicating if the button's default border color is transparent.

Type:

Boolean

type :componyx.UI.Button.TypeOption

Gets or sets the type of the button.

Type:

componyx.UI.Button.TypeOption

(static, readonly) AlignOption :number

AlignOption

Type:

number

Properties:

Name	Type	Description
`LEFT`	number
`CENTER`	number
`RIGHT`	number
`getName`	number

(static, readonly) DecorationOption :number

DecorationOption

Type:

number

Properties:

Name	Type	Description
`BACKGROUND`	number
`UNDERLINE`	number
`OVERLINE`	number
`FRONTLINE`	number
`BACKLINE`	number
`getName`	number

(static, readonly) ExpandDirectionOption :number

ExpandDirectionOption

Type:

number

Properties:

Name	Type	Description
`DOWN`	number
`RIGHT`	number
`UP`	number
`LEFT`	number
`getName`	number

(static, readonly) RadioGroups :object.<string, string>

RadioGroups

Type:

object.<string, string>

(static, readonly) SizeOption :string

SizeOption

Type:

string

Properties:

Name	Type	Description
`SMALL`	string
`MEDIUM`	string
`LARGE`	string
`XLARGE`	string

(static, readonly) TypeOption :number

TypeOption

Type:

number

Properties:

Name	Type	Description
`COMMANDBUTTON`	number
`CHECKBUTTON`	number
`RADIOBUTTON`	number

Methods

blur()

Removes focus from the button.

(protected) clone(source, cloneTemplatesopt, cloneEventsopt)

Clones the source component. This method should not be invoked by client code directly but only from inside component code.

Parameters:

Name	Type	Attributes	Default	Description
`source`	componyx.UI.base.Component			The source component.
`cloneTemplates`	Boolean	<optional>	true	A value indicating if templates are cloned.
`cloneEvents`	Boolean	<optional>	true	A value indicating if events are cloned.

See:

componyx.UI.base.methods#clone

commandClick()

Executes the command click event.

deselect()

Deselects the button

destroy()

Destroys the component.

See:

componyx.UI.base.methods#destroy

disable(keepSelectedopt)

Disables the button

Parameters:

Name	Type	Attributes	Default	Description
`keepSelected`	Boolean	<optional>	false	A value indicating if the button must remain selected.

enable()

Enables the button

expandClick()

Executes the command click event.

focus()

Sets focus on the button.

getCommandButton()

Gets the command button element.

getExpandButton()

Gets the expand button element.

getSelected()

Gets the selected button for the specified radio group.

isKeyboardNavigation() → {boolean}

A value indicating if the last action was triggered via keyboard navigation.

Returns:

Type: boolean

postRender()

Handles the post render procedure.

render()

Renders the component

select()

Selects the button

setContentTemplate(content)

Sets the content template.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The content template.

suppressNextChangeEvent(action)

Suppresses any change events fired by the underlying input element during the execution of the provided action. Use this when programmatically setting a component value to prevent the change event from propagating as a user interaction. The suppression is automatically lifted after the action completes, even if it throws.