跳转到主内容
Frutjam logo Frutjam
v2.2.2
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>

带标签的状态

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>

带有弹跳动画的状态

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>

用户列表中的状态

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>