メインコンテンツへスキップ
Frutjam logo Frutjam
v2.2.2
Theme

コンポーネントを交換する

最終更新日:

CSS のみの Tailwind 2 つの要素を切り替えるための CSS スワップ。 JavaScript を使用せずにアニメーションを反転、回転、フェードできます。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

スワップ コンポーネントは、ユーザー インタラクションに応じてスムーズなアニメーションで 2 つのコンテンツ状態を切り替えます。セマンティック HTML および CSS トランジションを使用して構築されたスワップにより、JavaScript を使用せずにエレガントな状態変更が可能になります。 Frutjam スワップ システムは、テーマの切り替え、モードの切り替え、状態の読み込み、およびインタラクティブなイラストに最適な複数のアニメーション スタイルをサポートしています。

CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

クラス タイプ 説明
swapベースチェックボックス駆動の 2 状態トグル ラッパー
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>