spz-toast#

#When to Use

• To provide feedback information such as success, warning, and error.
• Centered on the page and disappearing automatically, it is a non-intrusive, lightweight way of notifying users.

#Code Demonstration

#Basic

The simplest usage, use the showToast method to open a notification.

The notification popup will close when clicking outside the popup area or when the scroll distance exceeds the height of the popup, or the delay exceeds the set time.

<button @tap="toast.showToast(content='Hello，Lessjs!');">Display normal toast</button>
<spz-toast layout="nodisplay" hidden id="toast"></spz-toast>

#Modify Delay

Modify the automatic closing delay time of the popup by changing the duration attribute of the element.

<button @tap="toast1.showToast(content='It will disappear in 3 seconds!');">Customized duration by attribute</button>
<spz-toast layout="nodisplay" hidden id="toast1" duration="3000"></spz-toast>

Modify the automatic closing delay time of the popup by configuring the duration parameter of the showToast method.

<button @tap="toast2.showToast(content='It will disappear in 3 seconds!', duration=3000);">Customized duration by argument</button>
<spz-toast layout="nodisplay" hidden id="toast2"></spz-toast>

#Customize Content Position

Control the position of content in the notification popup by adding a child element with the role="content" attribute inside the element.

<button @tap="toast3.showToast(content='Added successfully');">Customized place</button>
<spz-toast layout="nodisplay" hidden id="toast3" class="flex items-center justify-between w-auto">
  <span role="content"></span>
  <a href="#">View cart</a>
</spz-toast>

#Form Notification

In a form, when the notification element has validation-for and visible-when-invalid attributes and the validation status matches the value of visible-when-invalid, the notification popup will automatically display.

<form action-xhr="/api/customers/sign_in" custom-validation="show-first-on-submit">
  <label>
    Text:
    <input type="text" id="text" name="text" required minlength="6" maxlength="16" pattern="[\s\S]{6,16}">
  </label>
  <spz-toast validation-for="text" visible-when-invalid="valueMissing" layout="nodisplay">
    Text is required.
  </spz-toast>
  <spz-toast validation-for="text" visible-when-invalid="patternMismatch" layout="nodisplay">
    Text must be between 6-16 characters long.
  </spz-toast>
<form>

#Properties

#Methods

#showToast

Open the notification popup.

#AI Summary (LLM Ready)

• Component ID: spz-toast
• One-line purpose: Display operation feedback notifications.
• Detected attribute rows: 0
• Detected method subsections: 1
• Detected event subsections: 0
• Top attribute names: none (needs manual completion)
• Top method names: showToast
• Top event names: none (needs manual completion)
• Reading order: start from usage/examples, then verify attributes, methods, and events.
• Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/