跳转到主内容
Frutjam logo Frutjam
v2.2.5
Theme

吐司组件

最后更新:

仅 CSS Tailwind CSS toast 用于通知定位 - 顶部、底部、开始、结束和中心放置。没有用于布局的 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。

Toast 组件在屏幕边缘显示简短的、非侵入性的通知。 Toast 采用固定定位和警报组件构建，可传达系统反馈，例如成功确认、错误消息或状态更新。 Frutjam toast 系统支持六个放置位置 - 非常适合表单提交、异步操作和实时通知。

仅 CSS，无需 JavaScript。 WCAG AA 可访问且与框架无关 - 可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。

班级 类型 描述
toast根据固定位置通知容器
toast-top修饰符锚定到视口顶部
toast-bottom修饰符锚定到视口底部（默认）
toast-start修饰符锚点向左
toast-center修饰符水平居中
toast-end修饰符锚点位于右侧（默认）
toast-middle修饰符垂直居中

基本用法

New message arrived. 
1
2
3
4
5
<div class="toast">
  <div class="alert alert-info">
    <span>New message arrived.</span>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { useToast } from 'frutjam/react'

export default function ToastDemo() {
  const toast = useToast()
  return (
    <>
      <button className="btn" onClick={() => toast.info('New message arrived.')}>Show Toast</button>
      <div className="toast">
        {toast.toasts.map(t => (
          <div key={t.id} className={`alert${t.type ? ` alert-${t.type}` : ''}`}>
            <span>{t.message}</span>
          </div>
        ))}
      </div>
    </>
  )
}

敬酒姿势

最高职位

Top Start
Top Center
Top End
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="toast toast-top toast-start">
  <div class="alert alert-info"><span>Top Start</span></div>
</div>

<div class="toast toast-top toast-center">
  <div class="alert alert-info"><span>Top Center</span></div>
</div>

<div class="toast toast-top toast-end">
  <div class="alert alert-info"><span>Top End</span></div>
</div>

底部位置

Bottom Start
Bottom Center
Bottom End
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="toast toast-bottom toast-start">
  <div class="alert alert-info"><span>Bottom Start</span></div>
</div>

<div class="toast toast-bottom toast-center">
  <div class="alert alert-info"><span>Bottom Center</span></div>
</div>

<div class="toast toast-bottom toast-end">
  <div class="alert alert-info"><span>Bottom End</span></div>
</div>

吐司颜色

File saved successfully.
Storage is almost full.
Connection failed.
Update available.
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div class="toast toast-top toast-end">
  <div class="alert alert-success">
    <span>File saved successfully.</span>
  </div>
  <div class="alert alert-warning">
    <span>Storage is almost full.</span>
  </div>
  <div class="alert alert-error">
    <span>Connection failed.</span>
  </div>
  <div class="alert alert-info">
    <span>Update available.</span>
  </div>
</div>

多次吐司

Profile updated.
2 new notifications.
html 
1
2
3
4
5
6
7
8
<div class="toast toast-top toast-end">
  <div class="alert alert-success">
    <span>Profile updated.</span>
  </div>
  <div class="alert alert-info">
    <span>2 new notifications.</span>
  </div>
</div>

使用 Claude Code、Cursor 或其他 AI 编辑器？

Cherry MCP 为您的 AI 编辑器按需提供准确的 吐司 类名称和结构。不再有幻觉课程。

尝试Cherry MCP