Skip to main content
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.

Gabungkan komponen, kelompokkan item yang berdekatan dengan menghilangkan spasi dan menggabungkan batas antar elemen. Sistem gabungan Frutjam menciptakan grup tombol yang kohesif, kontrol tersegmentasi, dan kombinasi input. Mendukung berbagai arah dan bekerja secara lancar dengan tombol, input, dan elemen pilihan untuk tata letak formulir profesional dan grup kontrol.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Kelas Jenis Keterangan
joinBasisMengelompokkan elemen turunan dengan menggabungkan batasnya
join-itemPengubahElemen anak yang berpartisipasi dalam grup gabung
join-horizontalPengubahTata letak horizontal (default)
join-verticalPengubahTata letak bertumpuk vertikal

Penggunaan Dasar

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>

Bergabunglah dengan Arah

Kontrol orientasi tata letak item yang dikelompokkan menggunakan kelas utilitas terarah.

Gabung Horisontal

Tata letak default untuk kontrol berdampingan dan grup tombol.

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>

Gabung Vertikal

Tumpukan menggabungkan item secara vertikal, ideal untuk sidebar atau navigasi khusus seluler.

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>

Gabung Responsif

Beralih secara otomatis dari tumpukan vertikal di perangkat seluler ke baris horizontal di desktop menggunakan .join-vertical dan .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>

Masukan yang Dikelompokkan

Gabungkan input teks dengan tombol atau ikon secara mulus untuk membuat bilah pencarian profesional dan formulir berlangganan.

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>

Grup Tombol Radio

Ubah input radio standar menjadi kontrol tersegmentasi atau beralih grup dengan menggabungkannya dalam wadah Gabung dengan kelas tombol.

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>

Kartu yang Dikelompokkan

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>