Skip to main content
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.

Tukar komponen untuk beralih antara dua status konten dengan animasi halus sebagai respons terhadap interaksi pengguna. Dibangun dengan transisi semantik HTML dan CSS, swap memungkinkan perubahan status yang elegan tanpa JavaScript. Sistem pertukaran Frutjam mendukung berbagai gaya animasi—ideal untuk peralihan tema, peralihan mode, status pemuatan, dan ilustrasi interaktif.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Kelas Jenis Keterangan
swapBasisPembungkus sakelar dua keadaan yang digerakkan oleh kotak centang
swap-rotateGayaBerputar antar negara bagian
swap-flipGayaBeralih antar negara bagian dengan efek 3D

Penggunaan Dasar

Buat pertukaran sederhana dengan emoji atau konten teks menggunakan kotak centang untuk beralih status.

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>

Tukar Animasi

Terapkan gaya animasi berbeda untuk transisi visual: memudar (default), memutar, dan membalik.

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>

Tukar dengan Ikon SVG

Gunakan ikon SVG untuk perubahan keadaan visual dengan animasi yang halus.

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>

Tukar sebagai Tombol

Gabungkan fungsionalitas pertukaran dengan gaya komponen tombol untuk peralihan interaktif.

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>

Tukar sebagai Lencana

Buat lencana pengalih ringkas untuk peralihan status atau kategori.

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>

Varian Swap Gabungan

Campurkan gaya animasi dan tipe konten yang berbeda untuk skenario peralihan yang kompleks.

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>