Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Statuskomponente

Zuletzt aktualisiert:

Nur CSS-Tailwind CSS-Statuspunktanzeige mit den Farbvarianten Primär, Erfolg, Warnung und Fehler. Größen xs-xl. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Statuskomponenten zeigen den aktuellen Zustand oder die Verfügbarkeit von Benutzern, Systemen oder Prozessen durch visuelle Indikatoren an. Statusabzeichen wurden mit semantischem HTML und farbcodiertem Stil erstellt und vermitteln wichtige Statusinformationen. Das Frutjam-Statussystem unterstützt mehrere Farben und Größen – ideal für Benutzeranwesenheit, Systemzustand und Workflow-Status.

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
statusBaseKleiner Punktindikator für Status oder Anwesenheit
status-xsGrößeExtra klein
status-smGrößeKlein
status-mdGrößeMittel (Standard)
status-lgGrößeGroß
status-xlGrößeExtra groß
status-primaryFarbePrimäre Designfarbe
status-secondaryFarbeSekundäre Themenfarbe
status-accentFarbeAkzentfarbe des Themas
status-neutralFarbeNeutrale Themenfarbe
status-infoFarbeSemantische Infofarbe
status-successFarbeSemantische Erfolgsfarbe
status-warningFarbeSemantische Warnungsfarbe
status-errorFarbeSemantische Fehlerfarbe

Grundlegende Verwendung

<span class="status"></span>

<span className="status"></span>

Statusfarben

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>

Statusgrößen

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>

Status mit Etikett

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>

Status mit Ping-Animation

html 
<div class="status status-error animate-ping"></div>

Status mit Bounce-Animation

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>

Status in der Benutzerliste

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>

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

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

Probieren Sie Cherry MCP