メインコンテンツへスキップ
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 コード、Cursor、または別の AI エディターを使用していますか?

Cherry MCP は、AI エディタに正確な 状態 クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。

Cherry MCP を試してみる