27 lines
797 B
Svelte
27 lines
797 B
Svelte
<script lang="ts">
|
|
export let initialValue: boolean = false;
|
|
|
|
let enabled: boolean = initialValue;
|
|
|
|
const toggleSwitch = (): void => {
|
|
enabled = !enabled;
|
|
};
|
|
</script>
|
|
|
|
<button
|
|
type="button"
|
|
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
|
|
class:bg-indigo-600={enabled}
|
|
class:bg-gray-200={!enabled}
|
|
role="switch"
|
|
aria-checked={enabled}
|
|
on:click={toggleSwitch}
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
class="pointer-events-none inline-block rounded-full h-5 w-5 transform bg-white shadow ring-0 transition duration-200 ease-in-out"
|
|
class:translate-x-5={enabled}
|
|
class:translate-x-0={!enabled}
|
|
></span>
|
|
</button>
|