Toast Thông Báo Thành Công

Đây là giao diện người dùng hiển thị ở cạnh màn hình để thông báo cho người dùng rằng hành động của người dùng (lưu, gửi, v.v.) đã hoàn tất thành công.

Xem trước

Trường hợp sử dụng & Tính năng

• Phản hồi hệ thống: Thông báo ngay kết quả thành công cho các hành động của người dùng, chẳng hạn như “Đã lưu” hoặc “Đã gửi xong”.
• Thông báo quy trình không đồng bộ: Lý tưởng cho các trường hợp bạn muốn được thông báo một cách kín đáo mà không ảnh hưởng đến công việc của người dùng, chẳng hạn như khi một quy trình đã hoàn tất trong nền.
• Tự động biến mất: Thường tự động biến mất sau một khoảng thời gian nhất định để giải phóng không gian màn hình.

Những điểm chính của thiết kế và UX (Design & UX)

• Vị trí kín đáo: Đặt ở góc màn hình (ví dụ dưới cùng bên phải hoặc trên cùng bên phải) để không ảnh hưởng đến nội dung hoặc công việc chính.
• Hình ảnh rõ nét: Sử dụng các biểu tượng và đường viền màu xanh lục (emerald hoặc green) để biểu thị sự thành công trong việc truyền đạt các thông báo tích cực một cách trực quan.
• Chức năng đóng thủ công: Cung cấp nút × (đóng) để người dùng có thể tự loại bỏ thông báo, mang lại cho họ cảm giác kiểm soát tốt hơn.

Cách tùy chỉnh (Hướng dẫn tùy chỉnh)

• Màu theo trạng thái: Bằng cách thay thế lớp Tailwind, bạn có thể phản hồi với nhiều điều kiện khác nhau bằng cách thay đổi màu thành đỏ (red) cho thông báo lỗi, vàng (yellow) cho cảnh báo và xanh lam (blue) cho thông tin.
• Thêm hoạt ảnh: Bạn có thể thêm hoạt ảnh trượt từ dưới lên khi hiển thị hoặc hoạt ảnh mờ dần khi nó biến mất bằng CSS hoặc JS.

Mã triển khai (Implementation)

<div class="flex items-center w-full max-w-sm p-4 text-gray-800 bg-white dark:bg-zinc-900 dark:text-gray-200 rounded-lg shadow-lg border border-emerald-100 dark:border-emerald-900/30" role="alert">
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-emerald-500 bg-emerald-100 rounded-lg dark:bg-emerald-800/30 dark:text-emerald-400">
  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
  </svg>
</div>
<div class="ml-3 text-sm font-medium">Successfully saved changes.</div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-zinc-900 dark:hover:bg-zinc-800">
  <span class="sr-only">Close</span>
  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>