Status Component
CSS-only Tailwind CSS status dot indicator with primary, success, warning, and error color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Durum bileşenleri, görsel göstergeler aracılığıyla kullanıcıların, sistemlerin veya süreçlerin mevcut durumunu veya kullanılabilirliğini görüntüler. Anlamsal HTML ve renk kodlu stil ile oluşturulan durum rozetleri, önemli durum bilgilerini iletir. Frutjam durum sistemi birden fazla renk ve boyutu destekler; kullanıcı varlığı, sistem durumu ve iş akışı durumları için idealdir.
Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.
| Sınıf | Tip | Tanım |
|---|---|---|
| status | Temel | Durum veya mevcudiyet için küçük nokta göstergesi |
| status-xs | Boyut | Ekstra küçük |
| status-sm | Boyut | Küçük |
| status-md | Boyut | Orta (varsayılan) |
| status-lg | Boyut | Büyük |
| status-xl | Boyut | Ekstra büyük |
| status-primary | Renk | Birincil tema rengi |
| status-secondary | Renk | İkincil tema rengi |
| status-accent | Renk | Vurgu teması rengi |
| status-neutral | Renk | Nötr tema rengi |
| status-info | Renk | Bilgi anlamsal rengi |
| status-success | Renk | Başarı anlamsal rengi |
| status-warning | Renk | Uyarı anlamsal rengi |
| status-error | Renk | Hata anlamsal rengi |
Temel Kullanım
<span class="status"></span> |
<span className="status"></span> |
Durum Renkleri
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> |
Durum Boyutları
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> |
Etiketli Durum
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 Animasyonlu Durum
html
<div class="status status-error animate-ping"></div> |
Sıçrama Animasyonlu Durum
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> |
Kullanıcı Listesindeki Durum
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> |