new Button()
Wraps a native
<button>
or <input[type="button"]>
HTML element. The element's standard attributes are exposed as bindable properties.
- Source:
Fires:
- event:action
- event:hold
Examples
JavaScript example
var b1 = new Button();
b1.element = document.querySelector("btnElement");
b1.addEventListener("action", function(event) {
console.log("Got event 'action' event");
});
Serialized example
{
"aButton": {
"prototype": "montage/ui/native/button.reel",
"values": {
"element": {"#": "btnElement"}
},
"listeners": [
{
"type": "action",
"listener": {"@": "appListener"}
}
]
},
"listener": {
"prototype": "appListener"
}
}
<button data-montage-id="btnElement"></button>
Extends
Members
accesskey :string
Specifies the shortcut key(s) that gives focuses to or activates the element.
Type:
- string
- Inherited From:
- Default Value:
- null
- Source:
- See:
actionCompletionPromise
A promise that indicates an action event triggered an asynchronous task.
The control will stop listening to user input until actionCompletionPromise
is resoved or rejected, and uses CSS classes to represent the Promise resolution
Properties:
Name | Type | Description |
---|---|---|
value |
Promise |
- Inherited From:
- Default Value:
- undefined
- Source:
active :boolean
This property is meant to be used as a way to flag when a component is being interacted with, either through mouse or touch event. false by default,
specialized components like controls would set it to true when being interacted with.
Type:
- boolean
- Inherited From:
- Default Value:
- false
- Source:
autofocus :boolean
Specifies if the control should receive focus when the document loads. Because Montage components are loaded asynchronously after the document has loaded, setting this property has no effect on the element's focus state.
Type:
- boolean
- Inherited From:
- Default Value:
- false
- Source:
contenteditable :string
Specifies if the content is editable or not. Valid values are "true", "false", and "inherit".
Type:
- string
- Inherited From:
- Default Value:
- null
- Source:
- See:
contextmenu :string
Specifies the ID of a
menu
element in the DOM to use as the element's context menu.
Type:
- string
- Inherited From:
- Default Value:
- null
- Source:
- See:
converter :Converter
A reference to a Converter object whose
revert()
function is invoked when a new value is assigned to the TextInput object's value
property. The revert() function attempts to transform the newly assigned value into a "typed" data property. For instance, a DateInput component could assign a DateConverter object to this property to convert a user-supplied date string into a standard date format.
Type:
- Inherited From:
- Default Value:
- null
- Source:
- See:
-
- module:montage/core/converter.Converter
detail
The data property of the action event.
Example to toggle the complete class: `"detail.get('selectedItem')" : {
"<-" : "@repetition:iteration.object"}`
- Inherited From:
- Source:
dir :string
Specifies the elements element's text directionality. Valid values are "ltr", "rtl", and "auto".
Type:
- string
- Inherited From:
- Default Value:
- null
- Source:
- See:
disabled :boolean
Specifies if the control is disabled.
Type:
- boolean
- Inherited From:
- Default Value:
- false
- Source:
draggable :string
Specifies if the element is draggable. Valid values are "true", "false", and "auto".
Type:
- string
- Inherited From:
- Default Value:
- null
- Source:
- See:
dropzone :string
Specifies the behavior that's taken when an item is dropped on the element. Valid values are "copy", "move", and "link".
Type:
- string
- Inherited From:
- Source:
- See:
elementValue :String
This property is meant to return the value of a control's element. specialized controls can override this to access different DOM properties if needed
Type:
- String
- Inherited From:
- Source:
error :boolean
If an error is thrown by the converter object during a new value assignment, this property is set to
true
, and schedules a new draw cycle so the the UI can be updated to indicate the error state. the montage--invalidText
CSS class is assigned to the component's DOM element during the next draw cycle.
Type:
- boolean
- Inherited From:
- Default Value:
- false
- Source:
errorMessage :string
The message to display when the component is in an error state.
Type:
- string
- Inherited From:
- Default Value:
- null
- Source:
form :string
The value of the id attribute of the form with which to associate the element.
Type:
- string
- Inherited From:
- Default Value:
- null
- Source:
formaction :string
The URL to which the form data will be sumbitted.
Type:
- string
- Default Value:
- null
- Source:
formenctype :string
The content type used to submit the form to the server.
Type:
- string
- Default Value:
- null
- Source:
formmethod :string
The HTTP method used to submit the form.
Type:
- string
- Default Value:
- null
- Source:
formnovalidate :boolean
Indicates if the form should be validated upon submission.
Type:
- boolean
- Default Value:
- null
- Source:
formtarget :string
The target frame or window in which the form output should be rendered.
Type:
- string
- Default Value:
- null
- Source:
handlePress
Called when the user has interacted with the button.
- Source:
handlePressStart
Called when the user starts interacting with the component.
- Source:
hidden :boolean
When specified on an element, it indicates that the element should not be displayed.
Type:
- boolean
- Inherited From:
- Default Value:
- false
- Source:
holdThreshold :number
The amount of time in milliseconds the user must press and hold the button a
hold
event is dispatched. The default is 1 second.
Type:
- number
- Default Value:
- 1000
- Source:
isContinuous :Object
Returns a Boolean value indicating whether the control dispatched its action event continuously when value changes.
Type:
- Object
- Inherited From:
- Default Value:
- false
- Source:
- See:
-
- module:montage/core/converter.Converter
label :string
The displayed text on the button. In an <input> element this is taken from the element's
value
attribute. On any other element (including <button>) this is the first child node which is a text node. If one isn't found then it will be created.
If the button has a non-null converter
property, the converter object's convert()
method is called on the value before being assigned to the button instance.
Type:
- string
- Default Value:
- undefined
- Source:
lang :string
Specifies the primary language for the element's contents and for any of the element's attributes that contain text.
Type:
- string
- Inherited From:
- Default Value:
- null
- Source:
- See:
name :string
The name associated with the component's DOM element.
Type:
- string
- Overrides:
- Default Value:
- null
- Source:
readonly :boolean
Specifies if this control is readonly.
Type:
- boolean
- Inherited From:
- Default Value:
- false
- Source:
spellcheck :string
Specifies if element should have its spelling and grammar checked by the browser. Valid values are "true", "false".
Type:
- string
- Inherited From:
- Default Value:
- null
- Source:
- See:
tabindex :number
Specifies the relative order of the element for the purposes of sequential focus navigation.
Type:
- number
- Inherited From:
- Default Value:
- null
- Source:
- See:
title :string
Specifies advisory information about the element, used as a tooltip when hovering over the element, and other purposes.
Type:
- string
- Inherited From:
- Default Value:
- null
- Source:
- See:
type :string
A string indicating the input type of the component's element.
Type:
- string
- Default Value:
- "button"
- Source:
value :string
Use
label
to set the displayed text on the button
The value associated with the element. This sets the value attribute of
the button that gets sent when the form is submitted.
Type:
- string
- Default Value:
- null
- Source:
- See:
-
- label
Methods
createActionEvent() → {AbstractControl#action}
Overrides Component#createActionEvent
by adding AbstractControl#detail custom data
- Inherited From:
- Source:
Returns:
- Type
- AbstractControl#action
dispatchActionEvent()
- Inherited From:
- Source:
Fires:
Events
action
Dispatched when the button is activated through a mouse click, finger tap,
or when focused and the spacebar is pressed.
Parameters:
Name | Type | Description |
---|---|---|
event |
Event |
- Source:
hold
Dispatched when the button is pressed for a period of time, set by
holdThreshold.
Parameters:
Name | Type | Description |
---|---|---|
event |
Event |
- Source: