Toast

用途

Include 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或批量程序导入？请参见安装页。

Include 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或批量程序导入？请参见安装页。

Add the toaster HTML

在页面正文末尾附近添加一台烤面包机：

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

在烤面包机上设置 data-align="start"、data-align="center" 或 data-align="end" 以更改位置。

Add your toasts

将服务器渲染的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>Success</h2>
        <p>A success toast called from the front-end.</p>
      </section>
      <footer>
        <button type="button" class="btn" data-toast-action>Dismiss</button>
      </footer>
    </div>
  </div>
</div>

<button
  class="btn" data-variant="outline"
  onclick="document.getElementById('toaster').toast({
    category: 'success',
    title: 'Success',
    description: 'A success toast called from the front-end.',
    cancel: {
      label: 'Dismiss'
    }
  })">Toast from front-end</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

#用途

Include CSS

Include JavaScript

Add the toaster HTML

Add your toasts

#HTML 结构

#JavaScript API

#Config 对象

Toast

用途

HTML 结构

JavaScript API

Config 对象