Ana içeriğe atla
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.

Bileşenleri değiştir, kullanıcı etkileşimine yanıt olarak akıcı animasyonlarla iki içerik durumu arasında geçiş yapar. Anlamsal HTML ve CSS geçişleriyle oluşturulan takaslar, JavaScript olmadan zarif durum değişikliklerine olanak tanır. Frutjam takas sistemi birden fazla animasyon stilini destekler; tema geçişleri, mod geçişleri, yükleme durumları ve etkileşimli çizimler için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

Sınıf Tip Tanım
swapTemelOnay kutusu odaklı iki durumlu geçiş sarmalayıcı
swap-rotateStilDurumlar arasında döner
swap-flipStil3D efektiyle durumlar arasında geçiş yapar

Temel Kullanım

Durumları değiştirmek için bir onay kutusunu kullanarak emoji veya metin içeriğiyle basit bir takas oluşturun.

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>

Animasyonları Değiştir

Görsel geçişler için farklı animasyon stilleri uygulayın: soldurma (varsayılan), döndürme ve çevirme.

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 Simgeleriyle Değiştirin

Sorunsuz animasyonlarla görsel durum değişiklikleri için SVG simgelerini kullanın.

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>

Düğme Olarak Değiştir

Etkileşimli geçişler için değiştirme işlevini düğme bileşeni stiliyle birleştirin.

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>

Rozet Olarak Değiştir

Durum veya kategori geçişi için kompakt geçiş rozetleri oluşturun.

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>

Kombine Takas Varyantları

Karmaşık geçiş senaryoları için farklı animasyon stillerini ve içerik türlerini karıştırın.

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>