spz-toast 提示

• 需要提供成功、警告和错误等反馈信息。
• 页面居中并自动消失，是一种不打断用户操作的轻量级提示方式。

最简单的用法，使用 showToast 方法来打开提示信息。

提示弹窗在点击屏幕非提示弹窗部分或提示打开后滚动距离大于提示弹窗的高度或者延时超过设置的时间会关闭。

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

通过修改元素的 duration 属性来修改弹窗自动关闭的延时时间。

<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>

通过配置 showToast 方法的 duration 参数来修改弹窗自动关闭的延时时间。

<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>

通过在元素内添加带有 role="content" 属性的子元素来控制内容在弹窗提示的位置。

<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>

在表单中，当提示元素带有 validation-for 和 visible-when-invalid 属性且当校验状态符合 visible-when-invalid 的值，提示弹窗会自动展示。

<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>

打开提示弹窗。