furo-ui5-toast #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-toast.js';
exports FuroUi5Toast js
extends src/furo-ui5-toast.js

Summary: Toast element

Description #

The furo-ui5-toast is a extended ui5-toast which can attach itself to a parent dom element.

This is helpful, when you have used z-indexes in one of the parents, which put the original ui5-toast behind the backdrop.

Use this component like a regular ui5-toast and do not forget to place the furo-ui5-toast-display in one of the parent elements.

It supports all features from the SAP ui5 Toast element.

important: Place a furo-ui5-toast-display in any dom parent of the component where you use furo-ui5-toast. Your app-shell or body is a good place to do that.

1
2
3

<furo-ui5-toast  fn-show="--openToastClicked" placement="MiddleCenter">Content</furo-ui5-toast>

<button at-click="--openToastClicked">Open toast</button>

Sample #

1
2
3

<furo-ui5-toast fn-show="--openToastClicked" placement="MiddleCenter">Content</furo-ui5-toast>

<button @-click="--openToastClicked">open toast</button>

Note: furo-ui5-toast-display is placed in body

Attributes and Properties #

Methods #

show #

show() ⟹ void

* → fn-show

shows the toast