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

Gösterge Bileşeni

Son güncelleme:

Rozetlerin veya noktaların herhangi bir öğe köşesine yerleştirilmesi için yalnızca CSS'ye özgü Tailwind CSS göstergesi. Renk çeşitleri ve konumlandırma. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.

Gösterge bileşenleri, diğer öğelerin üzerinde konumlanan durumu, rozetleri veya bildirimleri görüntüler. Mutlak konumlandırma ve esnek stil ile oluşturulan göstergeler, kartlar, avatarlar ve düğmeler üzerindeki önemli bilgileri üst üste getirir. Frutjam gösterge sistemi birden fazla yerleşimi, boyutu ve rengi destekler; bildirim rozetleri, durum işaretleri ve görsel ipuçları 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
indicatorTemelGösterge öğesi için göreceli konumlandırılmış sarmalayıcı
indicator-itemDeğiştiriciKesinlikle konumlandırılmış rozet veya nokta öğesi
indicator-topDeğiştiriciÖğeyi üst kenarda konumlandırır
indicator-middleDeğiştiriciÖğeyi dikey olarak ortaya konumlandırır
indicator-bottomDeğiştiriciÖğeyi alt kenarda konumlandırır
indicator-startDeğiştiriciÖğeyi sol kenarda konumlandırır
indicator-centerDeğiştiriciÖğeyi yatay merkeze konumlandırır
indicator-endDeğiştiriciÖğeyi sağ kenarda konumlandırır

Temel Kullanım

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>

Gösterge Yerleşimleri

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>

Sekmelerdeki Gösterge

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>

Giriş Göstergesi

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>

Resimdeki Gösterge

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>

Kartlardaki Gösterge

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>

Avatardaki Gösterge

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>

Duyarlı Davranış

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>

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

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

Cherry MCP'yi deneyin