Ana içeriğe atla
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.

Bileşenleri birleştirin, aralıkları kaldırarak ve öğeler arasındaki sınırları birleştirerek bitişik öğeleri bir arada gruplayın. Frutjam birleştirme sistemi, uyumlu düğme grupları, bölümlere ayrılmış kontroller ve giriş kombinasyonları oluşturur. Birden çok yönü destekler ve profesyonel form düzenleri ve kontrol grupları için düğmeler, girişler ve seçme öğeleriyle sorunsuz bir şekilde çalışır.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

Sınıf Tip Tanım
joinTemelAlt öğeleri kenarlıklarını birleştirerek gruplandırır
join-itemDeğiştiriciBirleştirme grubuna katılan alt öğe
join-horizontalDeğiştiriciYatay düzen (varsayılan)
join-verticalDeğiştiriciDikey yığılmış düzen

Temel Kullanım

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>

Yol Tariflerine Katılın

Yönsel yardımcı program sınıflarını kullanarak gruplandırılmış öğelerin düzen yönünü kontrol edin.

Yatay Birleştirme

Yan yana kontroller ve düğme grupları için varsayılan düzen.

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>

Dikey Birleştirme

Öğeleri dikey olarak birleştirir; kenar çubukları veya mobil cihazlara özel gezinme için idealdir.

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>

Duyarlı Katılma

.join-vertical ve .lg:join-horizontal'ı kullanarak mobil cihazda dikey yığından masaüstünde yatay satıra otomatik olarak geçiş yapın.

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>

Gruplandırılmış Girişler

Profesyonel arama çubukları ve abonelik formları oluşturmak için metin girişlerini düğmeler veya simgelerle sorunsuz bir şekilde birleştirin.

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>

Radyo Düğmesi Grupları

Standart radyo girişlerini bölümlere ayrılmış bir kontrole veya geçiş grubuna dönüştürün ve bunları düğme sınıfları içeren bir Birleştirme kapsayıcısına sarın.

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>

Gruplanmış Kartlar

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>