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

Toast Component

CSS-only Tailwind CSS toast for notification positioning — top, bottom, start, end, and center placement. No JavaScript for layout. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

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

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

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

Vị trí hàng đầu

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>

Vị trí dưới cùng

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>

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

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>

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

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>