Swap

Swap allows you to toggle the visibility of two elements using a checkbox or a class name.

Default

svelte

<script lang="ts">
import { Icon, Swap } from 'stwui';

const menu = "svg-path";
const close = "svg-path";

let swapped = false;

function toggleSwap() {
   swapped = !swapped;
}
</script>

<Swap on:click={toggleSwap} {swapped}>
   <Icon slot="on" class="h-8 w-8" data={menu} />
   <Icon slot="off" class="h-8 w-8" data={close} />
</Swap>

Flip

svelte

<script lang="ts">
import { Icon, Swap } from 'stwui';

const menu = "svg-path";
const close = "svg-path";

let swapped = false;

function toggleSwap() {
   swapped = !swapped;
}
</script>

<Swap type="flip" on:click={toggleSwap} {swapped}>
   <Icon slot="on" class="h-8 w-8" data={menu} />
   <Icon slot="off" class="h-8 w-8" data={close} />
</Swap>

Swap Props

type	'rotate' \| 'flip'	rotate
loading	false \| true \| undefined
swapped	false \| true \| undefined

Swap Slots

on
off