Swap
Swap allows you to toggle the visibility of two elements using a checkbox or a class name.
Usage
import { Swap } from 'stwui';
import Swap from 'stwui/swap';
Default (Spin)
<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>
<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 | |
