spz-toast

Displays a toast pop-up. It will be closed when the user clicks the screen or the value of the duration decreases to zero.

布局

Usage

In the following example, we use the show action to show the element with a given text.

<spz-toast id="toast" layout="nodisplay" animate-in="fly-in-top" duration="5000"></spz-toast>

<button type="button" @tap="toast.show(text='This is a toast pop-up.')">
  Open toast
</button>

Attributes

animate-in

Using a few animations to show the toast. It has the following values:

fade-in: Be shown in fade-in and fade-out animation. default
fly-in-bottom: Be shown in fly-from-bottom animation.
fly-in-top: Be shown in fly-from-top animation.

duration

A milliseconds number, defaults to 6000. The tip pop-up will be automatically closed when the countdown to the duration value ends.

Actions

show

show(text=<String>[, duration=<Number>])

Show the toast with a given text. It has the following parameters:

text: required. Specify the text content to display.
duration: Same as the duration attribute.