跳至主要內容
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.

交換元件透過平滑的動畫在兩個內容狀態之間切換，以回應使用者互動。交換採用語義 HTML 和 CSS 轉換構建，無需 JavaScript 即可實現優雅的狀態變更。 Frutjam 交換系統支援多種動畫樣式 - 非常適合主題切換、模式切換、載入狀態和互動式插圖。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

班級 類型 描述
swap根據複選框驅動的兩種狀態切換包裝器
swap-rotate風格在狀態之間輪換
swap-flip風格在具有 3D 效果的狀態之間翻轉

基本用法

使用核取方塊來切換狀態，建立與表情符號或文字內容的簡單交換。

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>

交換動畫

對視覺過渡套用不同的動畫樣式：淡入淡出（預設）、旋轉和翻轉。

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>

與 SVG 圖示交換

使用 SVG 圖示透過流暢的動畫實現視覺狀態變化。

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>

交換為按鈕

將交換功能與按鈕元件樣式結合以實現互動式切換。

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>

交換為徽章

建立緊湊的切換徽章以進行狀態或類別切換。

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>

組合交換變體

混合不同的動畫樣式和內容類型以實現複雜的切換場景。

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>