Toast JAVASCRIPT UI Component API

Toast Javascript API

Class

Toast

Toast

The toast component is like an alert box that is only shown for a couple of seconds when something happens.

Selector

smart-toast

Properties

AanimationSets or gets the animation mode. Animation is disabled when the property is set to 'none'
AappendToSpecifies the container where new openned toast items will be displayed. The value can be an HTMLElement or element's id. This property is in relation with modal(lower priority than modal) and position(higher priority than position) properties.
AautoCloseSets or gets whether the toast will automatically close after duration equal to the autoCloseDelay property.
AautoCloseDelaySets or gets the duration after which the toast automatically closes (works only if the autoClose property is set to true).
AautoOpenSets whether the toast will open automatically immediately after widget's initialization.
DdisabledThe user will not be able to interact with toast items when disabled is set to true.
IiconClassSets custom icon className which overrides the default one. Multiple class names can be applied by separating them with a space. Useful when loading from a third-party icon library (such as Bootstrap).
IitemClassAdds a custom class to Toast items. Multiple class names can be applied by separating them with a space. Useful when styling by using predefined class names from a third-party CSS library (such as Bootstrap).
IitemTemplateSets custom item template.
LlocaleSets or gets the language. Used in conjunction with the property messages.
LlocalizeFormatFunctionCallback, related to localization module.
MmessagesSets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
MmodalIn modal mode the toast item is positioned in the center of the screen. This property is with higher priority than position and appendTo. If modal is set to true these properties are disregarded.
PpositionSets the part of the browser window where the toast will be positioned. The position property is disregarded if appendTo or modal are set.
RreadonlyIf the element is readonly, users cannot interact with it.
RrightToLeftSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
SshowCloseButtonSets or gets whether to show the toast item's close button.
TthemeDetermines the theme. Theme defines the look of the element
TtypeSets speciffic CSS settings and icon to the toast items.
UunfocusableIf is set to true, the element cannot be focused.
VvalueSets a text value to an toast item.

Events

IitemClickThis event is triggered when the toast item is clicked.
CcloseThis event is triggered when the toast item is closed.
OopenThis event is triggered when the toast item is opened.
SswipebottomThis event is triggered on swipebottom over an toast item.
SswipeleftThis event is triggered on swipeleft over an toast item.
SswiperightThis event is triggered on swiperight over an toast item.
SswipetopThis event is triggered on swipetop over an toast item.

Methods

CcloseAllCloses all opened toast items.
CcloseItemCloses particular toast item.
CcloseLastCloses the last opened toast item.
OopenOpens a new toast item and returns the opened smart-toast-item instance.

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property. 

 <smart-toast animation='none'></smart-toast>

Set the animation property by using the HTML Element's instance. 

 const toast = document.querySelector('smart-toast');
 toast.animation = 'simple';

Get the animation property. 

 const toast = document.querySelector('smart-toast');
 let animation = toast.animation;

appendTostring

Specifies the container where new openned toast items will be displayed. The value can be an HTMLElement or element's id. This property is in relation with modal(lower priority than modal) and position(higher priority than position) properties.

Default value

"null"

Example

Set the appendTo property. 

 <smart-toast append-to='container'></smart-toast>

Set the appendTo property by using the HTML Element's instance. 

 const toast = document.querySelector('smart-toast');
 toast.appendTo = 'newContainer';

Get the appendTo property. 

 const toast = document.querySelector('smart-toast');
 let appendTo = toast.appendTo;

autoCloseboolean

Sets or gets whether the toast will automatically close after duration equal to the autoCloseDelay property.

Default value

false

Example

Set the autoClose property. 

 <smart-toast auto-close></smart-toast>

Set the autoClose property by using the HTML Element's instance. 

 const toast = document.querySelector('smart-toast');
 toast.autoClose = false;

Get the autoClose property. 

 const toast = document.querySelector('smart-toast');
 let autoClose = toast.autoClose;

autoCloseDelaynumber

Sets or gets the duration after which the toast automatically closes (works only if the autoClose property is set to true).

Default value

3000

Example

Set the autoCloseDelay property. 

 <smart-toast auto-close-delay='4000'></smart-toast>

Set the autoCloseDelay property by using the HTML Element's instance. 

 const toast = document.querySelector('smart-toast');
 toast.autoCloseDelay = 5000;

Get the autoCloseDelay property. 

 const toast = document.querySelector('smart-toast');
 let autoCloseDelay = toast.autoCloseDelay;

autoOpenboolean

Sets whether the toast will open automatically immediately after widget's initialization.

Default value

false

Example

Set the autoOpen property. 

 <smart-toast auto-open></smart-toast>

Set the autoOpen property by using the HTML Element's instance. 

 const toast = document.querySelector('smart-toast');
 toast.autoOpen = false;

Get the autoOpen property. 

 const toast = document.querySelector('smart-toast');
 let autoOpen = toast.autoOpen;

disabledboolean

The user will not be able to interact with toast items when disabled is set to true.

Default value

false

Example

Set the disabled property. 

 <smart-toast disabled></smart-toast>

Set the disabled property by using the HTML Element's instance. 

 const toast = document.querySelector('smart-toast');
 toast.disabled = false;

Get the disabled property. 

 const toast = document.querySelector('smart-toast');
 let disabled = toast.disabled;

iconClassstring

Sets custom icon className which overrides the default one. Multiple class names can be applied by separating them with a space. Useful when loading from a third-party icon library (such as Bootstrap).

Default value

"null"

Example

Set the iconClass property. 

 <smart-toast icon-class='material-icons'></smart-toast>

Set the iconClass property by using the HTML Element's instance. 

 const toast = document.querySelector('smart-toast');
 toast.iconClass = 'glyphicon glyphicon-cloud';

Get the iconClass property. 

 const toast = document.querySelector('smart-toast');
 let iconClass = toast.iconClass;

itemClassstring

Adds a custom class to Toast items. Multiple class names can be applied by separating them with a space. Useful when styling by using predefined class names from a third-party CSS library (such as Bootstrap).

Default value

"null"

Example

Set the itemClass property. 

 <smart-toast item-class='mat-elevation-z6'></smart-toast>

Set the itemClass property by using the HTML Element's instance. 

 const toast = document.querySelector('smart-toast');
 toast.itemClass = 'custom-toast red';

Get the itemClass property. 

 const toast = document.querySelector('smart-toast');
 let itemClass = toast.itemClass;

itemTemplatestring

Sets custom item template.

Default value

"null"

Example

Set the itemTemplate property. 

 <smart-toast item-template='templateId1'></smart-toast>

Set the itemTemplate property by using the HTML Element's instance. 

 const toast = document.querySelector('smart-toast');
 toast.itemTemplate = 'templateId2';

Get the itemTemplate property. 

 const toast = document.querySelector('smart-toast');
 let itemTemplate = toast.itemTemplate;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property. 

 <smart-toast locale='de'></smart-toast>

Set the locale property by using the HTML Element's instance. 

 const toast = document.querySelector('smart-toast');
 toast.locale = 'fr';

Get the locale property. 

 const toast = document.querySelector('smart-toast');
 let locale = toast.locale;

localizeFormatFunctionfunction | null

Callback, related to localization module.

Example

Set the localizeFormatFunction property. 

 <smart-toast localize-format-function='function(){return '...'}'></smart-toast>

Set the localizeFormatFunction property by using the HTML Element's instance. 

 const toast = document.querySelector('smart-toast');
 toast.localizeFormatFunction = function(){return '...'};

Get the localizeFormatFunction property. 

 const toast = document.querySelector('smart-toast');
 let localizeFormatFunction = toast.localizeFormatFunction;

messagesobject

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."

}

Example

Set the messages property. 

 <smart-toast messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}'></smart-toast>

Set the messages property by using the HTML Element's instance. 

 const toast = document.querySelector('smart-toast');
 toast.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."}};

Get the messages property. 

 const toast = document.querySelector('smart-toast');
 let messages = toast.messages;

modalboolean

In modal mode the toast item is positioned in the center of the screen. This property is with higher priority than position and appendTo. If modal is set to true these properties are disregarded.

Default value

false

Example

Set the modal property. 

 <smart-toast modal></smart-toast>

Set the modal property by using the HTML Element's instance. 

 const toast = document.querySelector('smart-toast');
 toast.modal = false;

Get the modal property. 

 const toast = document.querySelector('smart-toast');
 let modal = toast.modal;

position"top-left" | "top-right" | "bottom-left" | "bottom-right"

Sets the part of the browser window where the toast will be positioned. The position property is disregarded if appendTo or modal are set.

Default value

"top-right"

Example

Set the position property. 

 <smart-toast position='bottom-left'></smart-toast>

Set the position property by using the HTML Element's instance. 

 const toast = document.querySelector('smart-toast');
 toast.position = 'bottom-right';

Get the position property. 

 const toast = document.querySelector('smart-toast');
 let position = toast.position;

readonlyboolean

If the element is readonly, users cannot interact with it.

Default value

false

Example

Set the readonly property. 

 <smart-toast readonly></smart-toast>

Set the readonly property by using the HTML Element's instance. 

 const toast = document.querySelector('smart-toast');
 toast.readonly = true;

Get the readonly property. 

 const toast = document.querySelector('smart-toast');
 let readonly = toast.readonly;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false
Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property. 

 <smart-toast right-to-left></smart-toast>

Set the rightToLeft property by using the HTML Element's instance. 

 const toast = document.querySelector('smart-toast');
 toast.rightToLeft = true;

Get the rightToLeft property. 

 const toast = document.querySelector('smart-toast');
 let rightToLeft = toast.rightToLeft;

showCloseButtonboolean

Sets or gets whether to show the toast item's close button.

Default value

false

Example

Set the showCloseButton property. 

 <smart-toast show-close-button></smart-toast>

Set the showCloseButton property by using the HTML Element's instance. 

 const toast = document.querySelector('smart-toast');
 toast.showCloseButton = false;

Get the showCloseButton property. 

 const toast = document.querySelector('smart-toast');
 let showCloseButton = toast.showCloseButton;

themestring

Determines the theme. Theme defines the look of the element

Default value

""

Example

Set the theme property. 

 <smart-toast theme='blue'></smart-toast>

Set the theme property by using the HTML Element's instance. 

 const toast = document.querySelector('smart-toast');
 toast.theme = 'red';

Get the theme property. 

 const toast = document.querySelector('smart-toast');
 let theme = toast.theme;

type"info" | "warning" | "success" | "error" | "mail" | "time" | null

Sets speciffic CSS settings and icon to the toast items.

Default value

"info"

Example

Set the type property. 

 <smart-toast type='warning'></smart-toast>

Set the type property by using the HTML Element's instance. 

 const toast = document.querySelector('smart-toast');
 toast.type = 'success';

Get the type property. 

 const toast = document.querySelector('smart-toast');
 let type = toast.type;

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property. 

 <smart-toast unfocusable></smart-toast>

Set the unfocusable property by using the HTML Element's instance. 

 const toast = document.querySelector('smart-toast');
 toast.unfocusable = false;

Get the unfocusable property. 

 const toast = document.querySelector('smart-toast');
 let unfocusable = toast.unfocusable;

valueany

Sets a text value to an toast item.

Default value

""

Example

Set the value property. 

 <smart-toast value='Toast !'></smart-toast>

Set the value property by using the HTML Element's instance. 

 const toast = document.querySelector('smart-toast');
 toast.value = Toast !!!;

Get the value property. 

 const toast = document.querySelector('smart-toast');
 let value = toast.value;

Events

itemClickCustomEvent

This event is triggered when the toast item is clicked.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onItemClick

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of itemClick event. 

const toast = document.querySelector('smart-toast');
toast.addEventListener('itemClick', function (event) {
	// event handling code goes here.
})

closeCustomEvent

This event is triggered when the toast item is closed.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onClose

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of close event. 

const toast = document.querySelector('smart-toast');
toast.addEventListener('close', function (event) {
	// event handling code goes here.
})

openCustomEvent

This event is triggered when the toast item is opened.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onOpen

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of open event. 

const toast = document.querySelector('smart-toast');
toast.addEventListener('open', function (event) {
	// event handling code goes here.
})

swipebottomCustomEvent

This event is triggered on swipebottom over an toast item.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSwipebottom

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of swipebottom event. 

const toast = document.querySelector('smart-toast');
toast.addEventListener('swipebottom', function (event) {
	// event handling code goes here.
})

swipeleftCustomEvent

This event is triggered on swipeleft over an toast item.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSwipeleft

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of swipeleft event. 

const toast = document.querySelector('smart-toast');
toast.addEventListener('swipeleft', function (event) {
	// event handling code goes here.
})

swiperightCustomEvent

This event is triggered on swiperight over an toast item.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSwiperight

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of swiperight event. 

const toast = document.querySelector('smart-toast');
toast.addEventListener('swiperight', function (event) {
	// event handling code goes here.
})

swipetopCustomEvent

This event is triggered on swipetop over an toast item.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSwipetop

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of swipetop event. 

const toast = document.querySelector('smart-toast');
toast.addEventListener('swipetop', function (event) {
	// event handling code goes here.
})

Methods

closeAll(): void

Closes all opened toast items.


Invoke the closeAll method.

const toast = document.querySelector('smart-toast');
toast.closeAll();

closeItem( item: HTMLElement | string): void

Closes particular toast item.

Arguments

itemHTMLElement | string

The toast item (or its id) to remove.


Invoke the closeItem method.

const toast = document.querySelector('smart-toast');
toast.closeItem("item5");

closeLast(): void

Closes the last opened toast item.


Invoke the closeLast method.

const toast = document.querySelector('smart-toast');
toast.closeLast();

open( value?: HTMLElement | string, iconType?: string): HTMLElement

Opens a new toast item and returns the opened smart-toast-item instance.

Arguments

value?HTMLElement | string

The value for the toast item. If not set, the value property will be used.

iconType?string

The icon name for the toast item. If not set, the type property determines the icon type that will be used.

ReturnsHTMLElement

Invoke the open method.

const toast = document.querySelector('smart-toast');
const result = toast.open();

CSS Variables

--smart-toast-item-iconvar()

Default value

"''"

Code of toast item icon

--smart-toast-container-default-widthvar()

Default value

"var(--smart-bar-width)"

Default width of the smartToast's containers, positioned top-left, top-right, bottom-left, bottom-right

--smart-toast-header-heightvar()

Default value

"20px"

smartToast header height

--smart-toast-info-backgroundvar()

Default value

"#5bc0de"

Background color for type info

--smart-toast-info-colorvar()

Default value

"#fff"

Text color for type info

--smart-toast-warning-backgroundvar()

Default value

"#f0ad4e"

Background color for type warning

--smart-toast-warning-colorvar()

Default value

"#fff"

Text color for type warning

--smart-toast-error-backgroundvar()

Default value

"var(--smart-error)"

Background color for type error

--smart-toast-error-colorvar()

Default value

"var(--smart-error-color)"

Text color for type error

--smart-toast-success-backgroundvar()

Default value

"var(--smart-success)"

Background color for type success

--smart-toast-success-colorvar()

Default value

"var(--smart-success-color)"

Text color for type success