Monster.Components.Form. PopperButton

The PopperButton is a button that opens a popper element.

Dependencies: the system uses functions of the monsterjs library as well as pooperjs.

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

<monster-popper-button></monster-popper-button>

Or you can create this CustomControl directly in Javascript:

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

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

Constructor

new PopperButton()

A popper button

Since
  • 1.5.0

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
NameTypeDescription
templatesObject

The templates for the control.

Properties
NameTypeDescription
mainstring

The main template.

labelsobject

The labels for the control.

Properties
NameTypeDescription
buttonstring

The label for the button.

contentstring

The content of the popper.

popperobject

The popper options.

See

value

Set selection

e = document.querySelector('monster-select');
e.value=1
.

Set selection

e = document.querySelector('monster-select');
e.value=1
Properties
NameTypeDescription
valuestring | array
Since
  • 1.2.0

value

The current selection of the Select

e = document.querySelector('monster-select');
console.log(e.value)
// ↦ 1
// ↦ ['1','2']
.

The current selection of the Select

e = document.querySelector('monster-select');
console.log(e.value)
// ↦ 1
// ↦ ['1','2']
Properties
TypeDescription
string | array

(static) formAssociated

(static) instanceSymbol

This method is called by the instanceof operator.

This method is called by the instanceof operator.

Since
  • 2.1.0

Methods

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

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

connectedCallback() → {void}

Returns:
Type: 
void

disconnectedCallback() → {void}

Returns:
Type: 
void

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