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

Thành phần trạng thái

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

Chỉ báo dấu chấm trạng thái CSS Tailwind chỉ dành cho CSS với các biến thể màu chính, thành công, cảnh báo và lỗi. Kích thước xs-xl. 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 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ả
statusCăn cứChỉ báo dấu chấm nhỏ cho trạng thái hoặc sự hiện diện
status-xsKích cỡCực nhỏ
status-smKích cỡBé nhỏ
status-mdKích cỡTrung bình (mặc định)
status-lgKích cỡLớn
status-xlKích cỡCực lớn
status-primaryMàu sắcMàu chủ đề chính
status-secondaryMàu sắcMàu chủ đề phụ
status-accentMàu sắcMàu chủ đề nhấn mạnh
status-neutralMàu sắcMàu chủ đề trung tính
status-infoMàu sắcMàu sắc ngữ nghĩa thông tin
status-successMàu sắcMàu ngữ nghĩa thành công
status-warningMàu sắcMàu ngữ nghĩa cảnh báo
status-errorMàu sắcLỗ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

html 
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

html 
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

html 
 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

html 
<div class="status status-error animate-ping"></div>

Trạng thái với Hoạt ảnh thoát

html 
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

html 
 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>

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 Trạng thái 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