Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

Durum Bileşeni

Son güncelleme:

Birincil, başarı, uyarı ve hata renk çeşitleriyle yalnızca CSS Tailwind CSS durum nokta göstergesi. Boyutlar xs-xl. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.

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
statusTemelDurum veya mevcudiyet için küçük nokta göstergesi
status-xsBoyutEkstra küçük
status-smBoyutKüçük
status-mdBoyutOrta (varsayılan)
status-lgBoyutBüyük
status-xlBoyutEkstra büyük
status-primaryRenkBirincil tema rengi
status-secondaryRenkİkincil tema rengi
status-accentRenkVurgu teması rengi
status-neutralRenkNötr tema rengi
status-infoRenkBilgi anlamsal rengi
status-successRenkBaşarı anlamsal rengi
status-warningRenkUyarı anlamsal rengi
status-errorRenkHata 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

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

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

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>

Claude Code, Cursor veya başka bir AI düzenleyiciyi mi kullanıyorsunuz?

Cherry MCP, AI editörünüze talep üzerine tam Durum sınıf adlarını ve yapısını verir. Artık halüsinasyonlu dersler yok.

Cherry MCP'yi deneyin