Button Documentation

Overview

The Button class in MonsterJS extends the CustomControl class, providing a customizable button element. It supports various configurations, such as labels, actions, and visual effects like ripples, making it a versatile component for any web application.

Key Features

Customizable Appearance: Configure the button’s appearance using CSS classes and templates.
Action Handling: Define custom click actions to handle user interactions.
Accessibility: Inherits accessibility features from CustomControl, ensuring the button is accessible and usable in various contexts.
Form Association: Can be used within forms, with support for value handling and form-associated behaviors.
Visual Effects: Supports visual effects like ripple on click, enhancing the user experience.

Methods and Properties

Constructor

Initializes the button with default or provided options, setting up internal references and event handlers.

Lifecycle Methods

[assembleMethodSymbol](): Sets up the button’s internals and event handlers during initialization.

Interaction Methods

click(): Programmatically simulates a click on the button.
focus(options): Sets focus on the button, with optional parameters to control focus behavior.
blur(): Removes focus from the button.

Attribute Observers

Overrides observedAttributes to include additional attributes specific to the button, like data-monster-button-class.

Form Association

value: Gets or sets the button’s value, useful in form-associated contexts.
formAssociated: Indicates that the button is form-associated.

Defaults

Provides default settings for templates, labels, classes, disabled state, actions, and effects.

Static Methods

getTag(): Returns the tag name used for the button (monster-button).
getCSSStyleSheet(): Provides the CSS stylesheets associated with the button, including styles for the button and ripple effect.

Examples

The Button class can be used to create custom buttons with various configurations.

<monster-button data-monster-button-class="my-custom-button">Click Me</monster-button>

Alternatively, you can create a button programmatically and set its options using JavaScript.

const button = document.createElement('monster-button');
button.setOption('actions.click', () => alert('Button clicked!'));
document.body.appendChild(button);

The button control encapsulates a button and serves as a basis for derived controls.

// create element
const button = document.createElement('monster-button');

// insert element into the DOM
document.getElementById('body').appendChild(button);

<monster-button></monster-button>

Slotted Button

The text of the button can be defined either by the option labels.button.

// create element
const button = document.createElement('monster-button');

// insert element into the DOM
document.getElementById('body').appendChild(button);

// Label
button.setOption('labels.button','My Button');

Or by a slot.

<monster-button>My Button</monster-button>

Action

Standard HTML buttons can listen to different events. Since the standard button sits in a shadowRoot the click event is accessible via an option. The component button uses a callback to listen for click events.

To do this, you must pass a callback to the actions.click option.

const button = document.querySelector('monster-button');
button.setOption('actions.click',(event)=>{
  console.log('clicked!');
});

State-Button

The status button is a special form of the button and has an icon to display the status.

You can also define your own statuses. these must be specified in the options.

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

// insert element into the DOM
document.getElementById('body').appendChild(button);

// Label
button.setOption('labels.button','My Button');

// set state: successful, activity or failed
button.setState('successful');

Or by a slot.

<monster-state-button>My Button</monster-state-button>

Layout

The 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.

monster-button::part(button) {
    background-color: white;
}

The color scheme of the button can be set using CSS class via the options. You should always use a light color scheme for the status button, so that the icon is the icon is clearly visible. When using the standard design, you should always use the Outline variant should always be used.

const button = document.querySelector('monster-button');
button.setOption('classes.button','monster-button-outline-secondary');

if you want to use the standard classes, you have to include the properties, this can be done for example with postcss.

import  "@schukai/monster/source/components/style/style/color.pcss";
import  "@schukai/monster/source/components/style/style/theme.pcss";
import  "@schukai/monster/source/components/style/style/property.pcss";

The individual parts and slots are shown in the following picture.

This documentation outlines the capabilities and configuration options of the Button class, enabling developers to integrate and customize button elements effectively in their web applications.

Monster Manual