Ir al contenido principal
Frutjam logo Frutjam
v2.2.2
Theme

Unirse al componente

Última actualización:

Unión CSS de Tailwind solo CSS para agrupar botones, entradas o selecciones en una unidad conectada. Horizontales y verticales. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.

Unir componentes agrupa elementos adyacentes eliminando espacios y fusionando bordes entre elementos. El sistema de unión de Frutjam crea grupos de botones cohesivos, controles segmentados y combinaciones de entradas. Admite múltiples direcciones y funciona a la perfección con botones, entradas y elementos seleccionados para diseños de formularios y grupos de control profesionales.

Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.

Clase Tipo Descripción
joinBaseAgrupa elementos secundarios fusionando sus bordes.
join-itemModificadorElemento hijo que participa en el grupo de unión.
join-horizontalModificadorDiseño horizontal (predeterminado)
join-verticalModificadorDiseño apilado verticalmente

Uso básico

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>

Unirse a las direcciones

Controle la orientación del diseño de elementos agrupados mediante clases de utilidad direccionales.

Unión horizontal

El diseño predeterminado para controles y grupos de botones uno al lado del otro.

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>

Unión vertical

Apila une elementos verticalmente, ideal para barras laterales o navegación específica para dispositivos móviles.

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>

Unirse responsivo

Cambie automáticamente de una pila vertical en dispositivos móviles a una fila horizontal en computadoras de escritorio usando .join-vertical y .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>

Entradas agrupadas

Combine fácilmente entradas de texto con botones o íconos para crear barras de búsqueda y formularios de suscripción profesionales.

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>

Grupos de botones de radio

Convierta las entradas de radio estándar en un control segmentado o alterne un grupo envolviéndolas en un contenedor Join con clases de botones.

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>

Tarjetas agrupadas

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>

¿Usando Claude Code, Cursor u otro editor de IA?

Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Unirse según sea necesario. No más clases alucinadas.

Pruebe Cherry MCP