Passer au contenu principal
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.

Les composants de jointure regroupent les éléments adjacents en supprimant l’espacement et en fusionnant les bordures entre les éléments. Le système de jointure Frutjam crée des groupes de boutons cohérents, des commandes segmentées et des combinaisons d'entrées. Prend en charge plusieurs directions et fonctionne de manière transparente avec les boutons, les entrées et les éléments de sélection pour les mises en page de formulaires professionnels et les groupes de contrôle.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

Classe Taper Description
joinBaseRegroupe les éléments enfants en fusionnant leurs bordures
join-itemModificateurÉlément enfant qui participe au groupe de jointure
join-horizontalModificateurDisposition horizontale (par défaut)
join-verticalModificateurDisposition empilée verticale

Utilisation de base

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>

Rejoindre les directions

Contrôlez l'orientation de la présentation des éléments groupés à l'aide de classes utilitaires directionnelles.

Jointure horizontale

La disposition par défaut pour les contrôles côte à côte et les groupes de boutons.

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>

Jointure verticale

Empile les éléments de jointure verticalement, idéal pour les barres latérales ou la navigation spécifique aux mobiles.

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>

Rejoindre réactif

Passez automatiquement d'une pile verticale sur mobile à une ligne horizontale sur ordinateur à l'aide de .join-vertical et .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>

Entrées groupées

Combinez facilement des saisies de texte avec des boutons ou des icônes pour créer des barres de recherche et des formulaires d'abonnement professionnels.

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>

Groupes de boutons radio

Transformez les entrées radio standard en un contrôle segmenté ou en un groupe à bascule en les enveloppant dans un conteneur Join avec des classes de boutons.

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>

Cartes groupées

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>