Adjust with unit

Adjust a value with unit.

Usage

<script>
    import {adjustWithUnit} from "@sveu/shared"

    const result = adjustWithUnit("10px", 1)
</script>

<h1>{$result}</h1>

<button on:click="{() => result.inc()}">Increase</button>

<button on:click="{() => result.dec()}">Decrease</button>
<script>
    import {adjustWithUnit} from "@sveu/shared"

    const result = adjustWithUnit("10px", 1)
</script>

<h1>{$result}</h1>

<button on:click="{() => result.inc()}">Increase</button>

<button on:click="{() => result.dec()}">Decrease</button>
svelte

Example

Result: 10px






<script>
    import { adjustWithUnit } from "@sveu/shared"

    let delta = 1

    let target = "10px"

    $: result = adjustWithUnit(target, delta)
</script>

<div class="text-center">
    <h1>Result: {$result}</h1>

    <br />

    <label for="delta">Delta</label>
    <input
        id="delta"
        type="number"
        bind:value="{delta}" />
    <br />
    <br />

    <label for="target">Target</label>
    <input
        id="target"
        type="text"
        bind:value="{target}" />
    <br />
    <br />

    <button class="mr-5" on:click="{() => result.inc()}">Increase</button>

    <button on:click="{() => result.dec()}">Decrease</button>
</div>
<script>
    import { adjustWithUnit } from "@sveu/shared"

    let delta = 1

    let target = "10px"

    $: result = adjustWithUnit(target, delta)
</script>

<div class="text-center">
    <h1>Result: {$result}</h1>

    <br />

    <label for="delta">Delta</label>
    <input
        id="delta"
        type="number"
        bind:value="{delta}" />
    <br />
    <br />

    <label for="target">Target</label>
    <input
        id="target"
        type="text"
        bind:value="{target}" />
    <br />
    <br />

    <button class="mr-5" on:click="{() => result.inc()}">Increase</button>

    <button on:click="{() => result.dec()}">Decrease</button>
</div>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Click fold/expand code

API

Arguments

Name Description Type Required
target Value to adjust MaybeStore<string or number> Yes
delta Amount to adjust by number Yes
Last update at: Invalid Date