State button

Usage

The StateButton button can be used to display a button with a state. The state is displayed when the method setState() is called. The state is hidden when the method removeState() is called.

// create element
const button = document.createElement('monster-state-button');
// set label
button.setOption('labels.button', 'click me!');

Set State

The state can be set via the method setState(). The sate is a string defined in the option. Currently, the following states are defined: activity, successful and failed. More states can be defined in the option.

// create element
const button = document.createElement('monster-state-button');
// set state
button.setState('activity');

The second parameter of the method setState() can be used to define a timeout after which the state is removed. If the timeout is not set, the state is not removed automatically.

// create element
const button = document.createElement('monster-state-button');
// set state
button.setState('activity', 1000);

In this example, the state is removed after 1000 milliseconds.

Remove State

The state can be removed via the method removeState().

// create element
const button = document.createElement('monster-state-button');
// set state
button.setState('activity');
// remove state
button.removeState();

Layout

The state-button control can be customized to your own needs. For this purpose, the control can be designed via CSS.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.