qowevisa/fin-check-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add $lib/components/Toggle component

Browse Source
This commit is contained in:
qowevisa 2024-11-27 07:49:25 +02:00
parent aeaef4fbd3
commit 4e7ca13982
1 changed files with 23 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/lib/components/Toggle.svelte Normal file
View File

@ -0,0 +1,23 @@
<script lang="ts">
export let changeField;
export let onChangeFunc;
export let title: string;
</script>
<!-- <label class="inline-flex items-center cursor-pointer"> -->
<div class="block">
<label class="inline-flex items-center cursor-pointer">
<input
type="checkbox"
class="sr-only peer"
checked={changeField}
onchange={onChangeFunc}
/>
<div
class="relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
></div>
<span class="ms-3 text-sm font-bold text-gray-700 dark:text-gray-300">
{title}
</span>
</label>
</div>