Chuyển đến nội dung chính
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.

Nối các thành phần nhóm các mục liền kề lại với nhau bằng cách xóa khoảng cách và hợp nhất đường viền giữa các thành phần. Hệ thống nối Frutjam tạo ra các nhóm nút gắn kết, điều khiển được phân đoạn và kết hợp đầu vào. Hỗ trợ nhiều hướng và hoạt động liền mạch với các nút, đầu vào và các thành phần chọn lọc cho các nhóm điều khiển và bố cục biểu mẫu chuyên nghiệp.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Lớp học Kiểu Sự miêu tả
joinCăn cứNhóm các phần tử con bằng cách hợp nhất các đường viền của chúng
join-itemCông cụ sửa đổiPhần tử con tham gia vào nhóm tham gia
join-horizontalCông cụ sửa đổiBố cục ngang (mặc định)
join-verticalCông cụ sửa đổiBố cục xếp chồng theo chiều dọc

Cách sử dụng cơ bản

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>

Tham gia chỉ đường

Kiểm soát hướng bố cục của các mục được nhóm bằng cách sử dụng các lớp tiện ích định hướng.

Tham gia theo chiều ngang

Bố cục mặc định cho các nhóm nút và điều khiển cạnh nhau.

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>

Tham gia theo chiều dọc

Xếp chồng nối các mục theo chiều dọc, lý tưởng cho thanh bên hoặc điều hướng dành riêng cho thiết bị di động.

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>

Tham gia đáp ứng

Tự động chuyển từ hàng dọc trên thiết bị di động sang hàng ngang trên máy tính để bàn bằng cách sử dụng .join-vertical và .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>

Đầu vào được nhóm

Kết hợp liền mạch các kiểu nhập văn bản với các nút hoặc biểu tượng để tạo thanh tìm kiếm và biểu mẫu đăng ký chuyên nghiệp.

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>

Nhóm nút radio

Biến đầu vào radio tiêu chuẩn thành nhóm điều khiển được phân đoạn hoặc chuyển đổi bằng cách gói chúng trong vùng chứa Tham gia với các lớp nút.

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>

Thẻ được nhóm

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>