mirror of
https://github.com/IoTManagerProject/IoTManagerWeb.git
synced 2026-03-26 15:02:21 +03:00
38 lines
1.2 KiB
Svelte
38 lines
1.2 KiB
Svelte
<!-- Toggle A -->
|
|
<div class="flex items-center justify-center w-full mb-12">
|
|
<label for="toogleA" class="flex items-center cursor-pointer">
|
|
<!-- toggle -->
|
|
<div class="relative">
|
|
<!-- input -->
|
|
<input id="toogleA" type="checkbox" class="sr-only" />
|
|
<!-- line -->
|
|
<div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner" />
|
|
<!-- dot -->
|
|
<div
|
|
class="dot absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transition"
|
|
/>
|
|
</div>
|
|
<!-- label -->
|
|
<div class="ml-3 text-gray-700 font-medium">Toggle Me!</div>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Toggle B -->
|
|
<div class="flex items-center justify-center w-full mb-12">
|
|
<label for="toggleB" class="flex items-center cursor-pointer">
|
|
<!-- toggle -->
|
|
<div class="relative">
|
|
<!-- input -->
|
|
<input type="checkbox" id="toggleB" class="sr-only" />
|
|
<!-- line -->
|
|
<div class="block bg-gray-600 w-14 h-8 rounded-full" />
|
|
<!-- dot -->
|
|
<div
|
|
class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"
|
|
/>
|
|
</div>
|
|
<!-- label -->
|
|
<div class="ml-3 text-gray-700 font-medium">Toggle Me!</div>
|
|
</label>
|
|
</div>
|