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

Etiket Bileşeni

Son güncelleme:

Renk çeşitleri, yumuşak stil ve çıkarılabilir düğmeyle yalnızca CSS'ye özgü Tailwind CSS etiketi (çip). Boyutlar xs-lg. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.

Etiket bileşenleri, içeriği kategorize etmek, filtrelemek veya etiketlemek için kullanılan küçük, etiketli bilgi parçalarını görüntüler. Anlamsal HTML ve esnek stil ile oluşturulan etiketler, kullanıcıların içerik türünü, durumunu veya kategorisini hızlı bir şekilde tanımlamasına yardımcı olur. Frutjam etiket sistemi birden fazla boyutu, rengi, stili ve şekli destekler; beceri listeleri, makale kategorileri, durum etiketleri ve içerik meta verileri 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
tagTemelİçeriği kategorilere ayırmak veya tanımlamak için satır içi etiket
tag-outlineStilRenkli kenarlıklı şeffaf dolgu
tag-softStilSessiz renkli arka plan
tag-squareStilHafif yuvarlama (varsayılan haptan daha az)
tag-removeDeğiştiriciEtiketin içindeki reddet/kaldır düğmesi
tag-xsBoyutEkstra küçük (0,6875rem yazı tipi)
tag-smBoyutKüçük (0,75rem yazı tipi)
tag-mdBoyutOrta (0,8125rem yazı tipi, varsayılan)
tag-lgBoyutBüyük (0,9375rem yazı tipi)
tag-xlBoyutEkstra büyük (1rem yazı tipi)
tag-primaryRenkBirincil tema rengi
tag-secondaryRenkİkincil tema rengi
tag-accentRenkVurgu teması rengi
tag-neutralRenkNötr tema rengi
tag-infoRenkBilgi anlamsal rengi
tag-successRenkBaşarı anlamsal rengi
tag-warningRenkUyarı anlamsal rengi
tag-errorRenkHata anlamsal rengi

Temel Kullanım

1
2
3
<div class="tag">Tag</div>
<div class="tag">Another tag</div>
<div class="tag">Third tag</div>

1
2
3
<div className="tag">Tag</div>
<div className="tag">Another tag</div>
<div className="tag">Third tag</div>

Etiket Boyutları

html 
1
2
3
4
<div class="tag tag-xs">Extra Small</div>
<div class="tag tag-sm">Small</div>
<div class="tag tag-md">Medium</div>
<div class="tag tag-lg">Large</div>

Etiket Renkleri

html 
1
2
3
4
5
6
7
8
<div class="tag">Default</div>
<div class="tag tag-primary">Primary</div>
<div class="tag tag-secondary">Secondary</div>
<div class="tag tag-accent">Accent</div>
<div class="tag tag-info">Info</div>
<div class="tag tag-success">Success</div>
<div class="tag tag-warning">Warning</div>
<div class="tag tag-error">Error</div>

Etiket Stilleri

html 
1
2
3
4
<div class="tag tag-primary">Default</div>
<div class="tag tag-primary tag-outline">Outline</div>
<div class="tag tag-secondary tag-soft">Soft</div>
<div class="tag tag-accent tag-dashed">Dashed</div>

Etiket Şekilleri

html 
1
2
3
4
<div class="tag">Square</div>
<div class="tag tag-rounded">Rounded</div>
<div class="tag tag-pill">Pill</div>
<div class="tag tag-circle">C</div>

Simgeli Etiket

html 
1
2
3
4
<div class="tag tag-primary">
  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M5.5 13a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.3A4.5 4.5 0 1113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13H5.5z"/></svg>
  Starred
</div>

Kapatılabilir Etiketler

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div class="tag tag-primary">
  JavaScript
  <button class="tag-remove" aria-label="Close">×</button>
</div>

<div class="tag tag-secondary">
  React
  <button class="tag-remove" aria-label="Close">×</button>
</div>

<div class="tag tag-accent">
  TypeScript
  <button class="tag-remove" aria-label="Close">×</button>
</div>

Etiket Listesi

html 
1
2
3
4
5
6
7
8
<div class="flex flex-wrap gap-2">
  <div class="tag">JavaScript</div>
  <div class="tag tag-primary">React</div>
  <div class="tag tag-secondary">CSS</div>
  <div class="tag tag-accent">UI Design</div>
  <div class="tag tag-info">Frontend</div>
  <div class="tag tag-success">Production</div>
</div>