Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Tag-Komponente

Zuletzt aktualisiert:

Nur CSS-Tailwind-CSS-Tag (Chip) mit Farbvarianten, Soft-Style und entfernbarer Schaltfläche. Größen xs-lg. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Tag-Komponenten zeigen kleine, beschriftete Informationseinheiten an, die zum Kategorisieren, Filtern oder Beschriften von Inhalten verwendet werden. Mit semantischem HTML und flexiblem Stil erstellte Tags helfen Benutzern dabei, Inhaltstyp, Status oder Kategorie schnell zu identifizieren. Das Frutjam-Tag-System unterstützt mehrere Größen, Farben, Stile und Formen – ideal für Fertigkeitslisten, Artikelkategorien, Statusbezeichnungen und Inhaltsmetadaten.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
tagBaseInline-Label zum Kategorisieren oder Identifizieren von Inhalten
tag-outlineStilTransparente Füllung mit farbigem Rand
tag-softStilGedämpfter getönter Hintergrund
tag-squareStilLeichte Rundung (weniger als die Standardpille)
tag-removeModifikatorSchaltfläche zum Verwerfen/Entfernen im Tag
tag-xsGrößeExtra klein (Schriftart 0,6875rem)
tag-smGrößeKlein (Schriftart 0,75 Rem)
tag-mdGrößeMittel (Schriftart 0.8125rem, Standard)
tag-lgGrößeGroß (Schriftart 0,9375rem)
tag-xlGrößeExtra groß (1rem Schriftart)
tag-primaryFarbePrimäre Designfarbe
tag-secondaryFarbeSekundäre Themenfarbe
tag-accentFarbeAkzentfarbe des Themas
tag-neutralFarbeNeutrale Themenfarbe
tag-infoFarbeSemantische Infofarbe
tag-successFarbeSemantische Erfolgsfarbe
tag-warningFarbeSemantische Warnungsfarbe
tag-errorFarbeSemantische Fehlerfarbe

Grundlegende Verwendung

Tag
Another tag
Third tag
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>

Tag-Größen

Extra Small
Small
Medium
Large
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>

Tag-Farben

Default
Primary
Secondary
Accent
Info
Success
Warning
Error
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>

Tag-Stile

Default
Outline
Soft
Dashed
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>

Markieren Sie Formen

Square
Rounded
Pill
C
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>

Tag mit Symbol

Starred
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>

Verschließbare Tags

JavaScript
React
TypeScript
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>

Tag-Liste

JavaScript
React
CSS
UI Design
Frontend
Production
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>

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Etikett-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP