メインコンテンツへスキップ
Frutjam logo Frutjam
v2.2.5
Theme

インジケーターコンポーネント

最終更新日:

要素の隅にバッジまたはドットをオーバーレイするための CSS 専用 Tailwind CSS インジケーター。カラーバリエーションと配置。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

インジケーター コンポーネントは、他の要素上に配置されたステータス、バッジ、または通知を表示します。絶対配置と柔軟なスタイルを使用して構築されたインジケーターは、カード、アバター、ボタン上の重要な情報をオーバーレイします。 Frutjam インジケーター システムは、複数の配置、サイズ、色をサポートしており、通知バッジ、ステータス マーカー、視覚的な合図に最適です。

CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

クラス タイプ 説明
indicatorベースインジケーター項目の相対位置ラッパー
indicator-item修飾子絶対に配置されたバッジまたはドット要素
indicator-top修飾子項目を上端に配置します
indicator-middle修飾子項目を垂直方向の中央に配置します
indicator-bottom修飾子項目を下端に配置します
indicator-start修飾子項目を左端に配置します
indicator-center修飾子アイテムを水平方向の中央に配置します
indicator-end修飾子項目を右端に配置します

基本的な使い方

99+ 
1
2
3
4
<div class="indicator">
  <span class="indicator-item badge badge-primary">99+</span>
  <button class="btn">Messages</button>
</div>

1
2
3
4
<div className="indicator">
  <span className="indicator-item badge badge-primary">99+</span>
  <button className="btn">Messages</button>
</div>

1
2
3
4
<div class="indicator">
  <span class="indicator-item badge badge-primary">99+</span>
  <button class="btn">Messages</button>
</div>

インジケーターの配置

↖︎ ↑ ↗︎ ← ● → ↙︎ ↓ ↘︎
Box
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<div class="indicator">
  <span class="indicator-item indicator-top indicator-start badge badge-primary">↖︎</span>
  <span class="indicator-item indicator-top indicator-center badge badge-secondary">↑</span>
  <span class="indicator-item indicator-top indicator-end badge badge-accent">↗︎</span>
  <span class="indicator-item indicator-middle indicator-start badge badge-info">←</span>
  <span class="indicator-item indicator-middle indicator-center badge badge-neutral">●</span>
  <span class="indicator-item indicator-middle indicator-end badge badge-success">→</span>
  <span class="indicator-item indicator-bottom indicator-start badge badge-warning">↙︎</span>
  <span class="indicator-item indicator-bottom indicator-center badge badge-primary">↓</span>
  <span class="indicator-item indicator-bottom indicator-end badge badge-error">↘︎</span>
  <div class="bg-base-200 grid h-32 w-60 place-items-center rounded-box">Box</div>
</div>

タブ内のインジケーター

Messages Notifications 7 Requests
html 
1
2
3
4
5
6
7
8
<div class="tabs tabs-lifted">
  <a class="tab">Messages</a>
  <a class="indicator tab tab-active">
    Notifications
    <span class="indicator-item badge">7</span>
  </a>
  <a class="tab">Requests</a>
</div>

入力時のインジケーター

Required
html 
1
2
3
4
<div class="indicator">
  <span class="indicator-item badge badge-neutral badge-sm">Required</span>
  <input type="text" placeholder="Your email address" class="input" />
</div>

画像上のインジケーター

Only available for Pro users Tailwind CSS examples
html 
1
2
3
4
5
6
7
8
9
<div class="indicator">
  <span class="indicator-item indicator-middle indicator-center badge">
    Only available for Pro users
  </span>
  <img
    alt="Tailwind CSS examples"
    src=""
  />
</div>

カード上のインジケーター

New

Product Name

Product description and details go here.

html 
1
2
3
4
5
6
7
8
9
<div class="indicator">
  <span class="indicator-item badge badge-success">New</span>
  <div class="card card-outline">
    <div class="card-content">
      <h2 class="card-title">Product Name</h2>
      <p>Product description and details go here.</p>
    </div>
  </div>
</div>

アバターのインジケーター

JS
html 
1
2
3
4
<div class="indicator">
  <span class="indicator-item indicator-top indicator-end badge badge-circle badge-success"></span>
  <div class="avatar">JS</div>
</div>

応答的な動作

New
html 
1
2
3
4
<div class="indicator">
  <span class="indicator-item indicator-bottom indicator-start sm:indicator-top sm:indicator-end badge badge-primary">New</span>
  <button class="btn">Responsive</button>
</div>

Claude コード、Cursor、または別の AI エディターを使用していますか?

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

Cherry MCP を試してみる