Monster.Components.Form. Button

This CustomControl creates a button element with a variety of options.

Dependencies: the system uses functions of the monsterjs library

You can create this control either by specifying the HTML tagdirectly in the HTML or using Javascript via thedocument.createElement('monster-button');` method.

<monster-button></monster-button>

Or you can create this CustomControl directly in Javascript:

import {Button} from '@schukai/component-form/source/button.js';
document.createElement('monster-button');

The data-monster-button-class attribute can be used to change the CSS class of the button.

Constructor

new Button()

A simple button

Since
  • 1.5.0
Example
import {Button} from '@schukai/component-form/source/button.js';

const button = document.createElement('monster-button');
// set label
button.setOption('labels.button', 'Click')
// add action for click
button.setOption('actions.click', function (e) {
    console.log(e);
})
document.body.appendChild(button)

Members

defaults

To set the options via the html tag the attribute data-monster-options must be used.

To set the options via the html tag the attribute data-monster-options must be used.

Properties
NameTypeDefaultDescription
templatesObject

Template definitions

Properties
NameTypeDescription
mainstring

Main template

labelsObject

Labels

Properties
NameTypeDefaultDescription
buttonstring<slot></slot>

Button label

actionsObject

Callbacks

Properties
NameTypeDefaultDescription
clickstring"throw

Error" Callback when clicked

classesObject

CSS classes

Properties
NameTypeDefaultDescription
buttonstring"monster-button-primary"

CSS class for the button

disabledbooleanfalse

Disabled state

effectsObject

Effects

Properties
NameTypeDefaultDescription
ripplebooleantrue

Ripple effect

See

(static) instanceSymbol

This method is called by the instanceof operator.

This method is called by the instanceof operator.

Since
  • 2.1.0

(static) observedAttributes

This method determines which attributes are to be monitored by attributeChangedCallback().

This method determines which attributes are to be monitored by attributeChangedCallback().

Methods

assembleMethodSymbol() → {Monster.Components.Form.Button}

blur()

The Button.blur() method removes focus from the internal button element.

The Button.blur() method removes focus from the internal button element.

click()

The Button.click() method simulates a click on the internal button element.

The Button.click() method simulates a click on the internal button element.

Since
  • 3.27.0

focus(options)

The Button.focus() method sets focus on the internal button element.

The Button.focus() method sets focus on the internal button element.

Parameters:
NameTypeDescription
optionsObject
Since
  • 3.27.0

(static) getCSSStyleSheet() → {Array.<CSSStyleSheet>}

Returns:
Type: 
Array.<CSSStyleSheet>

(static) getTag() → {string}

Returns:
Type: 
string