Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Teilerkomponente

Zuletzt aktualisiert:

Nur CSS-Tailwind-CSS-Teiler – horizontal und vertikal mit optionaler zentrierter Beschriftung. Farb- und Größenvarianten. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Trennkomponenten sorgen für eine visuelle Trennung zwischen Inhaltsabschnitten. Die leichten und semantischen Trennzeichen tragen dazu bei, Informationen hierarchisch zu strukturieren und die Lesbarkeit zu verbessern. Das Frutjam-Trennsystem unterstützt horizontale und vertikale Ausrichtungen mit optionalem Textinhalt für beschriftete Trennungen zwischen Abschnitten.

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
dividerBaseHorizontales Lineal mit optionalem zentriertem Beschriftungstext
divider-horizontalModifikatorHorizontale Ausrichtung (Standard)
divider-verticalModifikatorVertikale Ausrichtung
divider-startModifikatorRichtet den Beschriftungstext am Anfang aus
divider-endModifikatorRichtet den Beschriftungstext am Ende aus
divider-solidStilDurchgezogener Linienstil
divider-dashedStilGestrichelter Linienstil
divider-dottedStilGepunkteter Linienstil
divider-primaryFarbePrimäre Designfarbe
divider-secondaryFarbeSekundäre Themenfarbe
divider-accentFarbeAkzentfarbe des Themas
divider-neutralFarbeNeutrale Themenfarbe
divider-infoFarbeSemantische Infofarbe
divider-successFarbeSemantische Erfolgsfarbe
divider-warningFarbeSemantische Warnungsfarbe
divider-errorFarbeSemantische Fehlerfarbe

Grundlegende Verwendung

<div class="divider"></div>

<div className="divider"></div>

Teileranweisungen

Horizontaler Teiler

html 
<div class="divider divider-horizontal"></div>

Vertikaler Teiler

content 1
content 2
html 
1
2
3
4
5
6
7
8
9
<div class="flex gap-4 w-full">
    <div class="card card-outline w-full">
       <div class="card-content">content 1</div>
    </div>
    <div class="divider divider-vertical"></div>
    <div class="card card-outline w-full">
        <div class="card-content">content 2</div>
    </div>
</div>

Teiler mit Text

Horizontal mit Text

OR
html 
<div class="divider divider-horizontal">OR</div>

Vertikal mit Text

content 1
OR
content 2
html 
1
2
3
4
5
6
7
8
9
<div class="flex gap-4 w-full">
    <div class="card card-outline w-full">
       <div class="card-content">content 1</div>
    </div>
    <div class="divider divider-vertical">OR</div>
    <div class="card card-outline w-full">
        <div class="card-content">content 2</div>
    </div>
</div>

Teilerfarben

Default
Neutral
Primary
Secondary
Accent
Success
Warning
Info
Error
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="flex flex-col gap-8 w-full">
  <div class="divider">Default</div>
  <div class="divider divider-neutral">Neutral</div>
  <div class="divider divider-primary">Primary</div>
  <div class="divider divider-secondary">Secondary</div>
  <div class="divider divider-accent">Accent</div>
  <div class="divider divider-success">Success</div>
  <div class="divider divider-warning">Warning</div>
  <div class="divider divider-info">Info</div>
  <div class="divider divider-error">Error</div>
</div>

Trenner-Inhaltspositionen

Sie können den Text innerhalb einer Trennlinie am Anfang, in der Mitte (Standard) oder am Ende der Zeile ausrichten.

Horizontale Positionen

Start
Default
End
html 
1
2
3
4
5
<div class="flex w-full gap-8 flex-col">
  <div class="divider divider-start">Start</div>
  <div class="divider">Default</div>
  <div class="divider divider-end">End</div>
</div>

Vertikale Positionen

Start
Default
End
html 
1
2
3
4
5
<div class="flex justify-center w-full h-64 gap-12">
  <div class="divider divider-vertical divider-start">Start</div>
  <div class="divider divider-vertical">Default</div>
  <div class="divider divider-vertical divider-end">End</div>
</div>

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

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

Probieren Sie Cherry MCP