Status Component
CSS-only Tailwind CSS status dot indicator with primary, success, warning, and error color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Các thành phần trạng thái hiển thị trạng thái hiện tại hoặc tính khả dụng của người dùng, hệ thống hoặc quy trình thông qua các chỉ báo trực quan. Được xây dựng bằng HTML ngữ nghĩa và kiểu mã màu, huy hiệu trạng thái truyền đạt thông tin trạng thái quan trọng. Hệ thống trạng thái Frutjam hỗ trợ nhiều màu sắc và kích cỡ—lý tưởng cho sự hiện diện của người dùng, tình trạng hệ thống và trạng thái quy trình làm việ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ả |
|---|---|---|
| status | Căn cứ | Chỉ báo dấu chấm nhỏ cho trạng thái hoặc sự hiện diện |
| status-xs | Kích cỡ | Cực nhỏ |
| status-sm | Kích cỡ | Bé nhỏ |
| status-md | Kích cỡ | Trung bình (mặc định) |
| status-lg | Kích cỡ | Lớn |
| status-xl | Kích cỡ | Cực lớn |
| status-primary | Màu sắc | Màu chủ đề chính |
| status-secondary | Màu sắc | Màu chủ đề phụ |
| status-accent | Màu sắc | Màu chủ đề nhấn mạnh |
| status-neutral | Màu sắc | Màu chủ đề trung tính |
| status-info | Màu sắc | Màu sắc ngữ nghĩa thông tin |
| status-success | Màu sắc | Màu ngữ nghĩa thành công |
| status-warning | Màu sắc | Màu ngữ nghĩa cảnh báo |
| status-error | Màu sắc | Lỗi ngữ nghĩa màu sắc |
Cách sử dụng cơ bản
<span class="status"></span> |
<span className="status"></span> |
Màu trạng thái
1 2 3 4 5 6 7 8 | <span class="status status-primary"></span> <span class="status status-secondary"></span> <span class="status status-accent"></span> <span class="status status-neutral"></span> <span class="status status-info"></span> <span class="status status-success"></span> <span class="status status-warning"></span> <span class="status status-error"></span> |
Kích thước trạng thái
1 2 3 4 | <span class="status status-xs status-success"></span> <span class="status status-sm status-success"></span> <span class="status status-md status-success"></span> <span class="status status-lg status-success"></span> |
Trạng thái có Nhãn
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div class="flex items-center gap-2"> <span class="status status-md status-success"></span> <span>Online</span> </div> <div class="flex items-center gap-2"> <span class="status status-md status-neutral"></span> <span>Offline</span> </div> <div class="flex items-center gap-2"> <span class="status status-md status-error"></span> <span>Busy</span> </div> <div class="flex items-center gap-2"> <span class="status status-md status-warning"></span> <span>Away</span> </div> |
Trạng thái với Ping Animation
<div class="status status-error animate-ping"></div> |
Trạng thái với Hoạt ảnh thoát
1 2 3 4 | <div class="flex items-center gap-2"> <div class="status status-info animate-bounce"></div> <span>Unread emails</span> </div> |
Trạng thái trong Danh sách Người dùng
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="space-y-2"> <div class="flex items-center gap-2"> <div class="avatar avatar-online"> U1 </div> <span>John (Online)</span> </div> <div class="flex items-center gap-2"> <div class="avatar avatar-offline"> U2 </div> <span>Jane (Offline)</span> </div> <div class="flex items-center gap-2"> <div class="avatar avatar-busy"> U3 </div> <span>Bob (Busy)</span> </div> </div> |