This is a parody of leetcode.com for designers. It's being developed live on Twitch.tv/zedashaw to demonstrate how to make a parody of a website.
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.
pixelperfectionist/admin/bando/demos/Switch.svelte

49 lines
1.4 KiB

<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>