---
title: "Swap"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "JS-free Tailwind CSS Swap with fade, rotate, and flip animations. Toggle between content states for theme switches, icon transitions, and loading states."
url: https://frutjam.com/zh-hant/components/swap
---

# Swap Component

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

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

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

## 基本用法

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

## 交換動畫

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

```html
<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
<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
<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
<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
<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>
```