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

Join Component

CSS-only Tailwind CSS join for grouping buttons, inputs, or selects into a connected unit. Horizontal and vertical. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Połącz komponenty, grupując sąsiadujące ze sobą elementy, usuwając odstępy i łącząc krawędzie pomiędzy elementami. System łączenia Frutjam tworzy spójne grupy przycisków, podzielone na segmenty elementy sterujące i kombinacje wejść. Obsługuje wiele kierunków i płynnie współpracuje z przyciskami, wejściami i elementami wyboru w celu uzyskania profesjonalnych układów formularzy i grup kontrolnych.

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
joinOpieraćGrupuje elementy podrzędne, łącząc ich obramowania
join-itemModyfikatorElement podrzędny uczestniczący w grupie dołączania
join-horizontalModyfikatorUkład poziomy (domyślny)
join-verticalModyfikatorPionowy układ skumulowany

Podstawowe użycie

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>

Dołącz do wskazówek

Kontroluj orientację układu zgrupowanych elementów za pomocą kierunkowych klas użyteczności.

Połączenie poziome

Domyślny układ obok siebie kontrolek i grup przycisków.

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>

Połączenie pionowe

Układa łączone elementy w pionie, co idealnie sprawdza się w przypadku pasków bocznych lub nawigacji na urządzeniach mobilnych.

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>

Responsywne dołączenie

Automatycznie przełączaj się z pionowego stosu na urządzeniu mobilnym do poziomego rzędu na komputerze za pomocą .join-vertical i .lg:join-horizontal.

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>

Zgrupowane wejścia

Bezproblemowo łącz wprowadzany tekst z przyciskami lub ikonami, aby tworzyć profesjonalne paski wyszukiwania i formularze subskrypcji.

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>

Grupy przycisków opcji

Zamień standardowe wejścia radiowe w segmentowaną kontrolkę lub grupę przełączającą, zawijając je w kontenerze Join z klasami przycisków.

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>

Zgrupowane karty

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>