メインコンテンツへスキップ
Frutjam logo Frutjam
v2.2.5
Theme

結合コンポーネント

最終更新日:

CSS のみの Tailwind CSS 結合により、ボタン、入力、または選択を接続されたユニットにグループ化します。水平方向と垂直方向。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

結合コンポーネントは、要素間のスペースを削除したり境界線を結合したりすることで、隣接するアイテムをグループ化します。 Frutjam 結合システムは、まとまったボタン グループ、セグメント化されたコントロール、および入力の組み合わせを作成します。複数の方向をサポートし、ボタン、入力、選択要素をシームレスに操作して、プロフェッショナルなフォーム レイアウトとコントロール グループを実現します。

CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

クラス タイプ 説明
joinベース子要素の境界線を結合してグループ化します。
join-item修飾子結合グループに参加する子要素
join-horizontal修飾子横型レイアウト (デフォルト)
join-vertical修飾子縦積みレイアウト

基本的な使い方

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>

参加ルート

方向ユーティリティ クラスを使用して、グループ化された項目のレイアウトの方向を制御します。

水平結合

コントロールとボタン グループを並べて配置するためのデフォルトのレイアウト。

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>

垂直結合

アイテムを結合して垂直方向に積み重ねることができ、サイドバーやモバイル固有のナビゲーションに最適です。

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>

レスポンシブ結合

.join-vertical と .lg:join-horizo​​ntal を使用して、モバイル上の垂直スタックからデスクトップ上の水平列に自動的に切り替えます。

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>

グループ化された入力

テキスト入力とボタンやアイコンをシームレスに組み合わせて、プロフェッショナルな検索バーや購読フォームを作成します。

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>

ラジオボタングループ

標準ラジオ入力をボタン クラスを含む Join コンテナーにラップすることで、 それらをセグメント化されたコントロールまたはトグル グループに変換します。

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>

グループ化されたカード

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>

Claude コード、Cursor、または別の AI エディターを使用していますか?

Cherry MCP は、AI エディタに正確な 参加する クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。

Cherry MCP を試してみる