Add knobs to your Svelte apps. Demo
<script>
import * as knobby from 'svelte-knobby';
const controls = knobby.panel({
// primitive values are handled automatically
message: 'Hello World!',
color: '#ff3e00',
clicks: 0,
checked: false,
// functions become buttons. if state is returned, it will
// update the store
increment: value => ({
...value,
clicks: value.clicks + 1
}),
// specify options by using a { value } object
constrained: {
// any object can be given a $label which will
// appear in place of the property name
$label: 'labelled input',
value: 50,
min: 0,
max: 100,
step: 1
},
// objects that can't be 'interpreted' (see below)
// are treated as folders
folder: {
$label: 'labelled folder',
a: 1, // accessed as $controls.folder.a
b: 2,
nested: {
c: 3, // accessed as $controls.folder.nested.c
d: 4
}
}
});
// the returned store is writable
$controls.message = 'Hello Knobby!';
</script>
<h1>{$controls.message}</h1>TODO
MIT