Toast

Toast 在任务继续进行时提供短暂、非阻塞的结果反馈，并为重要后续操作保留可访问路径。

操作成功

更改已保存，可以继续当前任务。

安装Terminal

npm install @a3s-lab/ui@0.4.0

<div id="toaster" class="toaster">
  <div class="toast" role="status" aria-atomic="true" aria-hidden="false" data-category="success">
    <div class="toast-content"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" /></svg>
      <section>
        <h2>操作成功</h2>
        <p>更改已保存，可以继续当前任务。</p>
      </section>
      <footer>
        <button type="button" class="btn" data-toast-action>关闭</button>
      </footer>
    </div>
  </div>
</div>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

用法

引入 CSS

导入 Tailwind 和一个完整的 A3S UI 样式包。

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

或者只导入基本CSS、Toast组件CSS和一个样式包。

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/toast.css";
@import "@a3s-lab/ui/styles/a3s.css";

使用CDN或批量程序导入？请参见安装页。

引入 JavaScript

复制或提供完整的 A3S UI JavaScript 包。

<script src="/assets/js/all.min.js" defer></script>

或者复制或提供A3S UI运行时和Toast脚本。

<script src="/assets/js/runtime.min.js" defer></script>
<script src="/assets/js/toast.min.js" defer></script>

使用CDN或批量程序导入？请参见安装页。

添加 Toast 容器

在页面正文末尾附近添加 Toast 容器：

<div id="toaster" class="toaster"></div>

在容器上设置 data-align="start"、data-align="center" 或 data-align="end" 以更改位置。

添加 Toast

将服务器渲染的 Toast 标记放入容器，或使用 toaster.toast(config) 从 JavaScript 创建标记。

<div id="toaster" class="toaster">
  <div class="toast" role="status" aria-atomic="true" aria-hidden="false" data-category="success">
    <div class="toast-content"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" /></svg>
      <section>
        <h2>操作成功</h2>
        <p>更改已保存，可以继续当前任务。</p>
      </section>
      <footer>
        <button type="button" class="btn" data-toast-action>关闭</button>
      </footer>
    </div>
  </div>
</div>

<button
  class="btn" data-variant="outline"
  onclick="document.getElementById('toaster').toast({
    category: 'success',
    title: '操作成功',
    description: '更改已保存，可以继续当前任务。',
    cancel: {
      label: '关闭'
    }
  })">显示成功提示</button>

HTML 结构

<div id="toaster" class="toaster">

Toast container. Optional data-align values are start, center, and end.

<div class="toast">

Toast item. Use data-category="success|info|warning|error" for category styling and data-duration to override the timeout in milliseconds. Use data-duration="-1" to keep it open.

<div class="toast-content">

Content wrapper.

<svg aria-hidden="true"> Optional

Icon.

<section>

Message region.

<h2>: Title.
<p> Optional: Description.

<footer> Optional

Action buttons or links. Clicking a footer button or link closes the toast.

JavaScript API

应用程序编程接口	类型	描述
`toaster.toast(config)`	Method	Creates a toast from a config object and returns the inserted `.toast` element. See "Config object" below.
`toaster.closeAll()`	方法	关闭烤面包机内的每个Toast。
`toast.close()`	方法	关闭一个已初始化的 toast 元素。

Config 对象

duration Optional: Timeout in milliseconds. Defaults to 3000, or 5000 for error toasts. Use -1 to keep it open.
category Optional: Category of the toast, either success, info, warning, or error.
title: Toast 标题。内容以纯文本渲染，不会解析为 HTML。
description Optional: Toast 描述。内容以纯文本渲染，不会解析为 HTML。
action Optional: 主要操作。支持 label、可选的 href，以及可选的 onClick(event) 回调。
cancel Optional: 次要操作。支持 label 和可选的 onClick(event) 回调。

#Toast

#用法

引入 CSS

引入 JavaScript

添加 Toast 容器

添加 Toast

#HTML 结构

#JavaScript API

#Config 对象

Toast

用法

HTML 结构

JavaScript API

Config 对象