Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Komponent tagu

Ostatnia aktualizacja:

Tag CSS Tailwind (chip) zawierający wyłącznie CSS z wariantami kolorystycznymi, miękkim stylem i wymiennym przyciskiem. Rozmiary xs-lg. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Składniki tagów wyświetlają małe, oznaczone fragmentami informacji, używane do kategoryzowania, filtrowania lub oznaczania treści. Zbudowane w oparciu o semantyczny kod HTML i elastyczną stylizację, tagi pomagają użytkownikom szybko identyfikować typ, stan lub kategorię treści. System tagów Frutjam obsługuje wiele rozmiarów, kolorów, stylów i kształtów — idealnie nadaje się do list umiejętności, kategorii artykułów, etykiet stanu i metadanych treści.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Klasa Typ Opis
tagOpieraćWbudowana etykieta do kategoryzowania lub identyfikowania treści
tag-outlineStylPrzezroczyste wypełnienie z kolorową obwódką
tag-softStylStonowane przyciemnione tło
tag-squareStylLekkie zaokrąglenie (mniej niż domyślna pigułka)
tag-removeModyfikatorPrzycisk Odrzuć/Usuń wewnątrz tagu
tag-xsRozmiarBardzo mała (czcionka 0,6875 rem)
tag-smRozmiarMały (czcionka 0,75 rem)
tag-mdRozmiarŚredni (czcionka 0,8125 rem, domyślna)
tag-lgRozmiarDuży (czcionka 0,9375 rem)
tag-xlRozmiarBardzo duży (czcionka 1rem)
tag-primaryKolorPodstawowy kolor motywu
tag-secondaryKolorKolor motywu drugorzędnego
tag-accentKolorKolor motywu akcentującego
tag-neutralKolorNeutralny kolor motywu
tag-infoKolorKolor semantyczny informacji
tag-successKolorSukces semantyczny kolor
tag-warningKolorOstrzeżenie kolor semantyczny
tag-errorKolorBłąd koloru semantycznego

Podstawowe użycie

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>

Rozmiary tagów

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>

Kolory tagów

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>

Style tagów

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>

Kształty tagów

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>

Oznacz z ikoną

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>

Zamykane znaczniki

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>

Lista tagów

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>

Używasz kodu Claude'a, kursora lub innego edytora AI?

Cherry MCP na żądanie udostępnia edytorowi AI dokładne nazwy i strukturę klas Etykietka. Żadnych więcej zajęć z halucynacjami.

Try Cherry MCP