Passer au contenu principal

Composant d'état

Dernière mise à jour:

Indicateur de points d'état CSS Tailwind uniquement en CSS avec variantes de couleurs primaires, de réussite, d'avertissement et d'erreur. Tailles xs-xl. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

Les composants d'état affichent l'état actuel ou la disponibilité des utilisateurs, des systèmes ou des processus via des indicateurs visuels. Construits avec du HTML sémantique et un style codé par couleur, les badges d'état communiquent des informations d'état importantes. Le système d'état Frutjam prend en charge plusieurs couleurs et tailles, ce qui est idéal pour la présence des utilisateurs, l'état du système et les états du flux de travail.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

Classe Taper Description
statusBaseSmall dot indicator for state or presence
status-xsTailleTrès petit
status-smTaillePetit
status-mdTailleMoyen (par défaut)
status-lgTailleGrand
status-xlTailleTrès grand
status-primaryCouleurCouleur du thème principal
status-secondaryCouleurCouleur du thème secondaire
status-accentCouleurCouleur du thème d'accentuation
status-neutralCouleurCouleur du thème neutre
status-infoCouleurCouleur sémantique de l'information
status-successCouleurCouleur sémantique du succès
status-warningCouleurCouleur sémantique d’avertissement
status-errorCouleurCouleur sémantique des erreurs

Utilisation de base

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

Status Colors

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>

Status Sizes

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 with Label

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 with Ping Animation

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

Status with 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 User List

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>

Vous utilisez Claude Code, Cursor ou un autre éditeur d'IA ?

Cherry MCP donne à votre éditeur d'IA les noms et la structure exacts des classes Statut sur demande. Fini les cours hallucinés.

Essayez Cherry MCP