This is collection of miscellaneous svelte components I often use in my projects.
I recommend to just copy code file of component you are going to use in your project. Because you often need to modify it to suite your needs or style.
<script>
import Knob from "../../src/Knob.svelte";
let knob = 4;
</script>
<Knob bind:value />
<br />
value: {value}
<script>
import RadioButtonGroup from "../../src/RadioButtonGroup.svelte";
let value = 10;
</script>
<RadioButtonGroup
items={[1, 5, 10, 25, 50, 100].map((i) => ({ l: `${i}x`, v: i }))}
bind:value
/>
<br />
value: {value}
<script>
import PanAndZoom from "../../src/PanAndZoom.svelte";
</script>
<PanAndZoom>
<img src="https://placekitten.com/g/200/300" alt="demo" />
</PanAndZoom>
<script>
import InteractiveLabel from "../../src/InteractiveLabel.svelte";
let value = 10;
</script>
<InteractiveLabel bind:value />
<br />
value: {value}
<script>
import Tooltip from "../../src/Tooltip.svelte";
</script>
<Tooltip tooltip="test">
<div>hover pointer here</div>
</Tooltip>Do not forget to deploy target folder to gh-pages branch.
git subtree push --prefix demo/public origin gh-pages
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent