Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Komponente tauschen

Zuletzt aktualisiert:

Nur CSS-Tailwind-CSS-Swap zum Umschalten zwischen zwei Elementen. Animationen umdrehen, drehen und ausblenden, kein JavaScript. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Swap-Komponenten schalten zwischen zwei Inhaltszuständen mit sanften Animationen als Reaktion auf Benutzerinteraktionen um. Swaps basieren auf semantischen HTML- und CSS-Übergängen und ermöglichen elegante Zustandsänderungen ohne JavaScript. Das Frutjam-Austauschsystem unterstützt mehrere Animationsstile – ideal zum Umschalten von Themen, Moduswechseln, Ladezuständen und interaktiven Illustrationen.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
swapBaseCheckbox-gesteuerter Toggle-Wrapper mit zwei Zuständen
swap-rotateStilWechselt zwischen den Staaten
swap-flipStilWechselt zwischen den Zuständen mit einem 3D-Effekt

Grundlegende Verwendung

Erstellen Sie einen einfachen Austausch mit Emojis oder Textinhalten, indem Sie ein Kontrollkästchen verwenden, um den Status umzuschalten.

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>

Animationen austauschen

Wenden Sie verschiedene Animationsstile für visuelle Übergänge an: Ausblenden (Standard), Drehen und Spiegeln.

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>

Tauschen Sie mit SVG-Symbolen

Verwenden Sie SVG-Symbole für visuelle Zustandsänderungen mit reibungslosen Animationen.

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>

Als Button tauschen

Kombinieren Sie die Swap-Funktionalität mit dem Stil der Schaltflächenkomponenten für interaktives Umschalten.

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>

Als Abzeichen tauschen

Erstellen Sie kompakte Umschalt-Badges für den Status- oder Kategoriewechsel.

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>

Kombinierte Swap-Varianten

Mischen Sie verschiedene Animationsstile und Inhaltstypen für komplexe Umschaltszenarien.

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>

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Tauschen-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP