Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Indikatorkomponente

Zuletzt aktualisiert:

Nur CSS-Tailwind-CSS-Indikator zum Überlagern von Abzeichen oder Punkten an jeder Elementecke. Farbvarianten und Positionierung. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Indikatorkomponenten zeigen Status, Abzeichen oder Benachrichtigungen an, die auf anderen Elementen positioniert sind. Die Indikatoren sind mit absoluter Positionierung und flexiblem Design ausgestattet und überlagern wichtige Informationen auf Karten, Avataren und Schaltflächen. Das Frutjam-Indikatorsystem unterstützt mehrere Platzierungen, Größen und Farben – ideal für Benachrichtigungsausweise, Statusmarkierungen und visuelle Hinweise.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
indicatorBaseRelativ positionierter Wrapper für das Indikatorelement
indicator-itemModifikatorAbsolut positioniertes Abzeichen oder Punktelement
indicator-topModifikatorPositioniert das Element am oberen Rand
indicator-middleModifikatorPositioniert das Element in der vertikalen Mitte
indicator-bottomModifikatorPositioniert das Element am unteren Rand
indicator-startModifikatorPositioniert das Element am linken Rand
indicator-centerModifikatorPositioniert das Element in der horizontalen Mitte
indicator-endModifikatorPositioniert das Element am rechten Rand

Grundlegende Verwendung

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>

Indikatorplatzierungen

↖︎ ↑ ↗︎ ← ● → ↙︎ ↓ ↘︎
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>

Indikator in Tabs

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>

Anzeige am Eingang

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>

Indikator auf dem Bild

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>

Indikator auf Karten

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>

Anzeige auf Avatar

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>

Reaktionsverhalten

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>

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Indikator-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP