Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Komponente beitreten

Zuletzt aktualisiert:

Nur CSS-Tailwind-CSS-Join zum Gruppieren von Schaltflächen, Eingaben oder Auswahlmöglichkeiten in einer verbundenen Einheit. Horizontal und vertikal. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Durch Zusammenfügen von Komponenten werden benachbarte Elemente gruppiert, indem Abstände entfernt und Ränder zwischen Elementen zusammengeführt werden. Das Frutjam-Join-System erstellt zusammenhängende Tastengruppen, segmentierte Steuerelemente und Eingabekombinationen. Unterstützt mehrere Richtungen und arbeitet nahtlos mit Schaltflächen, Eingaben und ausgewählten Elementen für professionelle Formularlayouts und Kontrollgruppen.

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
joinBaseGruppiert untergeordnete Elemente durch Zusammenführen ihrer Ränder
join-itemModifikatorUntergeordnetes Element, das an der Join-Gruppe teilnimmt
join-horizontalModifikatorHorizontales Layout (Standard)
join-verticalModifikatorVertikal gestapeltes Layout

Grundlegende Verwendung

1
2
3
4
5
<div class="join">
    <button class="join-item btn btn-outline">Button</button>
    <button class="join-item btn btn-outline">Button</button>
    <button class="join-item btn btn-outline">Button</button>
</div>

1
2
3
4
5
<div className="join">
    <button className="join-item btn btn-outline">Button</button>
    <button className="join-item btn btn-outline">Button</button>
    <button className="join-item btn btn-outline">Button</button>
</div>

Anfahrtsbeschreibung beitreten

Steuern Sie die Layoutausrichtung gruppierter Elemente mithilfe von Richtungsdienstprogrammklassen.

Horizontale Verbindung

Das Standardlayout für nebeneinander liegende Steuerelemente und Schaltflächengruppen.

html 
1
2
3
4
5
<div class="join join-horizontal">
    <button class="join-item btn btn-outline">Button</button>
    <button class="join-item btn btn-outline">Button</button>
    <button class="join-item btn btn-outline">Button</button>
</div>

Vertikale Verbindung

Stapelt Elemente verbindet vertikal, ideal für Seitenleisten oder eine mobilspezifische Navigation.

html 
1
2
3
4
5
<div class="join join-vertical">
    <button class="join-item btn btn-outline">Button</button>
    <button class="join-item btn btn-outline">Button</button>
    <button class="join-item btn btn-outline">Button</button>
</div>

Responsive Join

Wechseln Sie mit .join-vertical und .lg:join-horizontal automatisch von einem vertikalen Stapel auf Mobilgeräten zu einer horizontalen Reihe auf dem Desktop.

html 
1
2
3
4
5
<div class="join join-vertical lg:join-horizontal">
    <button class="join-item btn btn-outline">Button</button>
    <button class="join-item btn btn-outline">Button</button>
    <button class="join-item btn btn-outline">Button</button>
</div>

Gruppierte Eingaben

Kombinieren Sie Texteingaben nahtlos mit Schaltflächen oder Symbolen, um professionelle Suchleisten und Abonnementformulare zu erstellen.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="join">
    <input class="input input-xs join-item" placeholder="Email" />
    <button class="btn btn-xs join-item">Subscribe</button>
</div>
<div class="join">
    <button class="btn btn-xs join-item">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
    </button>
    <input type="search" class="input input-xs join-item" placeholder="Search...">
</div>

Optionsfeldgruppen

Verwandeln Sie Standard-Funkeingaben in ein segmentiertes Steuerelement oder eine Umschaltgruppe, indem Sie sie in einen Join-Container mit Schaltflächenklassen einbinden.

html 
1
2
3
4
5
<div class="join">
  <input class="join-item btn btn-outline" type="radio" name="options" aria-label="Radio 1" />
  <input class="join-item btn btn-outline" type="radio" name="options" checked aria-label="Radio 2" />
  <input class="join-item btn btn-outline" type="radio" name="options" aria-label="Radio 3" />
</div>

Gruppierte Karten

Card Title

The Card component is a versatile container for combining related information, such as images, titles, and actions, into a single, visually appealing unit.

Card Title

The Card component is a versatile container for combining related information, such as images, titles, and actions, into a single, visually appealing unit.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="join">
<div class="join-item card shadow w-88">
  <div class="card-content">
    <h2 class="card-title">Card Title</h2>
    <p>
      The Card component is a versatile container for combining related information, such as images, titles, and actions, into a single, visually appealing unit.
    </p>
    <div class="flex justify-end">
      <button type="button" class="btn btn-primary btn-sm">Buy Now</button>
    </div>
  </div>
</div>
<div class="join-item card shadow w-88">
  <div class="card-content">
    <h2 class="card-title">Card Title</h2>
    <p>
      The Card component is a versatile container for combining related information, such as images, titles, and actions, into a single, visually appealing unit.
    </p>
    <div class="flex justify-end">
      <button type="button" class="btn btn-primary btn-sm">Buy Now</button>
    </div>
  </div>
</div>
</div>

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

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

Probieren Sie Cherry MCP