Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Thành phần bánh mì nướng

Cập nhật lần cuối:

Bản tóm tắt CSS Tailwind chỉ dành cho CSS để định vị thông báo — vị trí trên cùng, dưới cùng, bắt đầu, kết thúc và ở giữa. Không có JavaScript cho bố cục. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Các thành phần bánh mì nướng hiển thị các thông báo ngắn gọn, không xâm phạm được đặt ở các cạnh của màn hình. Được xây dựng với các thành phần cảnh báo và định vị cố định, thông báo chúc mừng truyền đạt phản hồi của hệ thống như xác nhận thành công, thông báo lỗi hoặc cập nhật trạng thái. Hệ thống bánh mì nướng Frutjam hỗ trợ sáu vị trí vị trí—lý tưởng cho việc gửi biểu mẫu, hoạt động không đồng bộ và thông báo theo thời gian thực.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Lớp học Kiểu Sự miêu tả
toastCăn cứThùng thông báo vị trí cố định
toast-topCông cụ sửa đổiNeo vào đầu khung nhìn
toast-bottomCông cụ sửa đổiNeo vào cuối khung nhìn (mặc định)
toast-startCông cụ sửa đổiNeo ở bên trái
toast-centerCông cụ sửa đổiCăn giữa theo chiều ngang
toast-endCông cụ sửa đổiNeo ở bên phải (mặc định)
toast-middleCông cụ sửa đổiCăn giữa theo chiều dọc

Cách sử dụng cơ bản

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>
    </>
  )
}

vị trí bánh mì nướng

Vị trí hàng đầu

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>

Vị trí dưới cùng

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>

Màu bánh mì nướng

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>

Nâng ly chúc mừng nhiều lần

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>

Using Claude Code, Cursor, or another AI editor?

Cherry MCP cung cấp cho trình soạn thảo AI của bạn tên và cấu trúc lớp Nướng chính xác theo yêu cầu. Không còn những lớp học ảo giác nữa.

Try Cherry MCP