---
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/tr/components/swap
---

# Swap Component

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                                            |
| ----------- | ----- | ------------------------------------------------ |
| swap        | Temel | Onay kutusu odaklı iki durumlu geçiş sarmalayıcı |
| swap-rotate | Stil  | Durumlar arasında döner                          |
| swap-flip   | Stil  | 3D 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.

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