Monster.Components.Notify. Message

This CustomControl creates a notification 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 tag <monster-notify-message /> directly in the HTML

<monster-notify-message></monster-notify-message>

or using Javascript via the document.createElement('monster-notify'); method.

import '@schukai/monster/source/components/notify/message.js';
document.createElement('monster-notify-message');

Constructor

new Message()

A highly configurable select control

Since
  • 1.0.0
Fires:
  • Monster.Components.Notify.event:monster-xxxx
Example
import {Notify} from '@schukai/component-notify/source/message.js';

const notify = document.createElement('monster-notify');
document.body.appendChild(notify);

Members

defaults

The defaults can be set either directly in the object or via an attribute in the HTML tag.

The defaults can be set either directly in the object or via an attribute in the HTML tag. The value of the attribute data-monster-options in the HTML tag must be a JSON string.

<monster-message data-monster-options="{}"></monster-message>

Since 1.18.0 the JSON can be specified as a DataURI.

new Monster.Types.DataUrl(btoa(JSON.stringify({
       timeout: 3000,
       features: {
         clear: true,
         disappear: true
       }
   })),'application/json',true).toString()
Properties
NameTypeDescription
templatesstring

Template definitions

templatesObject

Template definitions

timeoutinteger

time in milliseconds until the message should be removed. The timeout can be disabled via the feature disappear.

featuresObject
Properties
NameTypeDescription
clearboolean

show clear button

disappearboolean

automatically remove the message after the timeout

templates.mainstring

Main template

Methods

assembleMethodSymbol() → {Monster.Components.Notify.Message}

connectedCallback() → {void}

Returns:
Type: 
void

disconnectedCallback() → {void}

Returns:
Type: 
void

initMethodSymbol()

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

Returns:
Type: 
Array.<CSSStyleSheet>

(static) getTag() → {string}

Returns:
Type: 
string