跳至主要內容
Frutjam logo Frutjam
v2.2.2
Theme

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.

狀態組件透過視覺指示器顯示使用者、系統或行程的目前狀態或可用性。狀態徽章採用語意 HTML 和顏色編碼樣式構建，可傳達重要的狀態訊息。 Frutjam 狀態系統支援多種顏色和尺寸，非常適合使用者狀態、系統運作狀況和工作流程狀態。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

班級 類型 描述
status根據用於狀態或存在的小點指示器
status-xs尺寸特小號
status-sm尺寸小的
status-md尺寸中（預設）
status-lg尺寸大的
status-xl尺寸特大號
status-primary顏色主要主題顏色
status-secondary顏色次要主題色
status-accent顏色強調主題顏色
status-neutral顏色中性主題色
status-info顏色訊息語意顏色
status-success顏色成功語意色
status-warning顏色警告語意顏色
status-error顏色錯誤語意顏色

基本用法

<span class="status"></span>

<span className="status"></span>

狀態顏色

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>

狀態尺寸

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>

帶標籤的狀態

Online
Offline
Busy
Away
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>

帶有 Ping 動畫的狀態

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

帶有彈跳動畫的狀態

Unread emails
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>

使用者清單中的狀態

U1
John (Online)
U2
Jane (Offline)
U3
Bob (Busy)
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>