Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Swap Component

CSS-only Tailwind CSS swap for toggling between two elements. Flip, rotate, and fade animations, no JavaScript. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Hoán đổi các thành phần chuyển đổi giữa hai trạng thái nội dung bằng hình ảnh động mượt mà để phản hồi tương tác của người dùng. Được xây dựng bằng các chuyển tiếp HTML và CSS ngữ nghĩa, các giao dịch hoán đổi cho phép thay đổi trạng thái một cách tinh tế mà không cần JavaScript. Hệ thống hoán đổi Frutjam hỗ trợ nhiều kiểu hoạt ảnh—lý tưởng cho việc chuyển đổi chủ đề, chuyển đổi chế độ, trạng thái tải và hình minh họa tương tác.

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ả
swapCăn cứTrình bao bọc chuyển đổi hai trạng thái được điều khiển bằng hộp kiểm
swap-rotatePhong cáchXoay vòng giữa các trạng thái
swap-flipPhong cáchLật giữa các trạng thái với hiệu ứng 3D

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

Tạo một trao đổi đơn giản với biểu tượng cảm xúc hoặc nội dung văn bản bằng cách sử dụng hộp kiểm để chuyển đổi trạng thái.

1
2
3
4
5
<label class="swap">
  <input type="checkbox" />
  <div class="swap-on">☀️</div>
  <div class="swap-off">🌙</div>
</label>

1
2
3
4
5
<label className="swap">
  <input type="checkbox" />
  <div className="swap-on">☀️</div>
  <div className="swap-off">🌙</div>
</label>

Hoán đổi ảnh động

Áp dụng các kiểu hoạt ảnh khác nhau cho chuyển tiếp trực quan: làm mờ (mặc định), xoay và lật.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<label class="swap">
  <input type="checkbox" />
  <div class="swap-on">Online</div>
  <div class="swap-off">Offline</div>
</label>

<label class="swap swap-rotate">
  <input type="checkbox" />
  <div class="swap-on">➕</div>
  <div class="swap-off">✖️</div>
</label>

<label class="swap swap-flip">
  <input type="checkbox" />
  <div class="swap-on">Yes</div>
  <div class="swap-off">No</div>
</label>

Hoán đổi với các biểu tượng SVG

Sử dụng biểu tượng SVG để thay đổi trạng thái trực quan với hình ảnh động mượt mà.

html 
1
2
3
4
5
6
7
8
9
<label class="swap swap-rotate">
  <input type="checkbox" />
  <svg class="swap-on" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <circle cx="12" cy="12" r="1"/><path d="M12 2v6m0 4v6M4.22 4.22l4.24 4.24m2.98 2.98l4.24 4.24M2 12h6m4 0h6M4.22 19.78l4.24-4.24m2.98-2.98l4.24-4.24"/>
  </svg>
  <svg class="swap-off" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
  </svg>
</label>

Hoán đổi dưới dạng nút

Kết hợp chức năng hoán đổi với kiểu dáng thành phần nút để chuyển đổi tương tác.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<label class="btn btn-primary swap">
  <input type="checkbox" />
  <div class="swap-on">Light Mode</div>
  <div class="swap-off">Dark Mode</div>
</label>

<label class="btn btn-secondary swap swap-flip">
  <input type="checkbox" />
  <div class="swap-on">Connected</div>
  <div class="swap-off">Disconnected</div>
</label>

<label class="btn btn-outline swap swap-rotate">
  <input type="checkbox" />
  <div class="swap-on">Expanded</div>
  <div class="swap-off">Collapsed</div>
</label>

Hoán đổi làm Huy hiệu

Tạo huy hiệu chuyển đổi nhỏ gọn để chuyển đổi trạng thái hoặc danh mục.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<label class="badge badge-primary swap cursor-pointer">
  <input type="checkbox" />
  <div class="swap-on">Active</div>
  <div class="swap-off">Inactive</div>
</label>

<label class="badge badge-success swap cursor-pointer swap-flip">
  <input type="checkbox" />
  <div class="swap-on">✓ Verified</div>
  <div class="swap-off">Pending</div>
</label>

Các biến thể hoán đổi kết hợp

Kết hợp các kiểu hoạt ảnh và loại nội dung khác nhau cho các tình huống chuyển đổi phức tạp.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<label class="swap swap-flip">
  <input type="checkbox" />
  <div class="swap-on">→</div>
  <div class="swap-off">←</div>
</label>

<label class="swap swap-rotate">
  <input type="checkbox" />
  <div class="swap-on">Saving...</div>
  <div class="swap-off">Save</div>
</label>

<label class="btn btn-ghost btn-sm swap swap-flip">
  <input type="checkbox" />
  <div class="swap-on">Show Less</div>
  <div class="swap-off">Show More</div>
</label>