You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.4 KiB
49 lines
1.4 KiB
2 years ago
|
<style>
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
import Icon from "$/client/components/Icon.svelte";
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<p>Basic demo that's just on/off.</p>
|
||
|
|
<input class="switch" type="checkbox" id="demo-1">
|
||
|
|
<label class="switch" for="demo-1"></label>
|
||
|
|
|
||
|
|
<p>Demo with Yes/No text.</p>
|
||
|
|
<input class="switch" type="checkbox" id="demo-2">
|
||
|
|
<label class="switch" for="demo-2">
|
||
|
|
<active>Yes</active>
|
||
|
|
<inactive>No</inactive>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<p>Demo showing you can change the size.</p>
|
||
|
|
<input class="switch" type="checkbox" id="demo-3">
|
||
|
|
<label class="switch medium" for="demo-3">
|
||
|
|
<active>Yes</active>
|
||
|
|
<inactive>No</inactive>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<input class="switch" type="checkbox" id="demo-4">
|
||
|
|
<label class="switch large" for="demo-4">
|
||
|
|
<active>Yes</active>
|
||
|
|
<inactive>No</inactive>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<p>Demo with Icons in rather than text.</p>
|
||
|
|
<input class="switch" type="checkbox" id="demo-5">
|
||
|
|
<label class="switch" for="demo-5">
|
||
|
|
<active><Icon name="eye" size="18px" /></active>
|
||
|
|
<inactive><Icon name="eye-off" size="18px" /></inactive>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<input class="switch" type="checkbox" id="demo-6">
|
||
|
|
<label class="switch medium" for="demo-6">
|
||
|
|
<active><Icon name="eye" size="24px" /></active>
|
||
|
|
<inactive><Icon name="eye-off" size="24px" /></inactive>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<input class="switch" type="checkbox" id="demo-7">
|
||
|
|
<label class="switch large" for="demo-7">
|
||
|
|
<active><Icon name="eye" size="36px" /></active>
|
||
|
|
<inactive><Icon name="eye-off" size="36px" /></inactive>
|
||
|
|
</label>
|