iotmanager/IoTManagerWeb
1
0
Fork 0
mirror of https://github.com/IoTManagerProject/IoTManagerWeb.git synced 2026-03-26 15:02:21 +03:00
Code Issues Packages Projects Releases Wiki Activity

add two toggles as examples

Browse Source
This commit is contained in:
Dmitry Borisenko
2021-10-19 05:54:52 +08:00
parent f7482614fe
commit 2f7c9f58e4
1 changed files with 47 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/App.svelte
View File

@@ -170,7 +170,41 @@
<Card title="Подключение к MQTT брокеру" />
</div>
</Route>
<Route path="/utilities" />
<Route path="/utilities">
<!-- 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>
</Route>
</div>
</ul>
</main>
@@ -334,4 +368,16 @@
height: 30px;
opacity: 1;
}
/* Toggle A */
input:checked ~ .dot {
transform: translateX(100%);
background-color: #48bb78;
}
/* Toggle B */
input:checked ~ .dot {
transform: translateX(100%);
background-color: #48bb78;
}
</style>