1.0.1 • Published 4 years ago
svelte-checkbox v1.0.1
svelte-checkbox
A checkbox component for Svelte (Cool animation, Customizable).
☑️ Demo
Installation
yarn add svelte-checkbox
Usage
<script>
import Checkbox from "svelte-checkbox";
let checked = false;
</script>
<Checkbox bind:checked></Checkbox>
Props
Prop | Type | Default | Description |
---|---|---|---|
size | String | 3rem | Component width & height |
name | String | - | Input name |
id | String | - | Component id |
class | String | - | Component class |
primaryColor | String | #242432 | Primary color |
secondaryColor | String | #d8d8ea | Secondary color |
checked | Boolean | false | Checked input |
Events
Event Name | Callback | Description |
---|---|---|
change | (event) => event.detail | fires when checked/unchecked |
<script>
import Checkbox from "svelte-checkbox";
function handleChange({ detail }) {
console.log("checked", detail);
}
</script>
<Checkbox on:change="{handleChange}" />
Full Usage
<script>
import Checkbox from "svelte-checkbox";
let checked = false;
</script>
<style>
:global(.main__checkbox) {
margin: 0.5rem;
}
</style>
<Checkbox
class="main__checkbox"
size="5rem"
bind:checked
name="inputName"
secondaryColor="rgba(1, 50, 67,0.2)"
primaryColor="rgb(77, 5, 232)"
/>
Join Our Telegram Community
1.0.1
4 years ago
1.0.0
4 years ago
1.0.0-beta.9
4 years ago
1.0.0-beta.7
4 years ago
1.0.0-beta.8
4 years ago
1.0.0-beta.6
4 years ago
1.0.0-beta.5
4 years ago
1.0.0-beta.4
4 years ago
1.0.0-beta.3
4 years ago
1.0.0-beta.2
4 years ago
1.0.0-beta.1
4 years ago