Miscellaneous svelte components

This is collection of miscellaneous svelte components I often use in my projects.

How to use

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.

DEMO

Knob

<script>
  import Knob from "../../src/Knob.svelte";
  let knob = 4;
</script>

<Knob bind:value />
<br />
value: {value}

RadioButtonGroup

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

PanAndZoom

<script>
  import PanAndZoom from "../../src/PanAndZoom.svelte";
</script>
<PanAndZoom>
    <img src="https://placekitten.com/g/200/300" alt="demo" />
</PanAndZoom>

InteractiveLabel

<script>
  import InteractiveLabel from "../../src/InteractiveLabel.svelte";
  let value = 10;
</script>
<InteractiveLabel bind:value />
<br />
value: {value}

Tooltip

<script>
  import Tooltip from "../../src/Tooltip.svelte";
</script>
<Tooltip tooltip="test">
      <div>hover pointer here</div>
</Tooltip>

Deployment note:

Do not forget to deploy target folder to gh-pages branch.

git subtree push --prefix demo/public origin gh-pages