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

狀態組件

最後更新:

僅 CSS Tailwind CSS 狀態點指示器，具有主要、成功、警告和錯誤顏色變體。尺寸為 xs-xl。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

狀態組件透過視覺指示器顯示使用者、系統或行程的目前狀態或可用性。狀態徽章採用語意 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>

使用 Claude Code、Cursor 或其他 AI 編輯器？

Cherry MCP 為您的 AI 編輯器按需提供準確的 地位 類別名稱和結構。不再有幻覺課程。

嘗試Cherry MCP