This component allows you to swap between two states (true / false) using two elements with animations.
| Property | Type | Description |
|---|---|---|
| id | ?string | A unique identifier. |
| true | ?string | The text content of the true state. |
| false | ?string | The text content of the false state. |
| true-icon | ?string | The icon content of true state. |
| false-icon | ?string | The icon content of false state. |
| icon-class | ?string | Classes that should be applied to the icons [default="h-5 w-5"] |
| before | slot | Content before the swap. |
| after | slot | Content after the swap. |
If you have multiple Swap componentns on the same page make sure to set different ids.
<c-swap id="swap-1" wire:model="swap" />
<c-swap id="swap-2" wire:model="swap" icon-class="h-8 w-8" />
<c-swap id="swap-3" wire:model="swap" icon-class="h-12 w-12" />
{{-- NOTE: `true` and `false` --}}
<c-swap id="swap-text" true="ON" false="OFF" />
{{-- NOTE: `true-icon` and `false-icon` --}}
<c-swap id="swap-icon" true-icon="volume-2" false-icon="volume-x" />
<c-swap id="swap-fade" icon-class="h-12 w-12" />
<c-swap id="swap-flip" class="swap-flip" icon-class="h-12 w-12" />
<c-swap id="swap-rotate" class="swap-rotate" icon-class="h-12 w-12" />
<c-swap id="swap-custom">
<c-slot:true class="bg-primary rounded-field p-2">
Custom true
</c-slot:true>
<c-slot:false class="bg-accent text-white p-2">
Custom false
</c-slot:false>
</c-swap>
Clicking the before or after slot also toggles the value.
<c-swap id="swap-slots" class="flex gap-3">
<c-slot:before class="text-primary">
BEFORE
</c-slot:before>
<c-slot:after class="text-accent">
AFTER
</c-slot:after>
</c-swap>