sites
sites copied to clipboard
Improve the component-binding example
I searched the repo for the example file to make a PR but found nothing.
Example: https://svelte.dev/examples/component-bindings
Keypad.svelte
<script>
import { createEventDispatcher } from 'svelte';
export let value = '';
const dispatch = createEventDispatcher();
const select = (num) => () => (value += num);
const clear = () => (value = '');
const submit = () => dispatch('submit');
</script>
<div class="keypad">
{#each Array(9) as _, i}
<button on:click={select(i + 1)}>{i + 1}</button>
{/each}
<button disabled={!value} on:click={clear}>clear</button>
<button on:click={select(0)}>0</button>
<button disabled={!value} on:click={submit}>submit</button>
</div>
<style>
.keypad {
display: grid;
grid-template-columns: repeat(3, 5em);
grid-template-rows: repeat(4, 3em);
grid-gap: 0.5em;
}
button {
margin: 0;
}
</style>
The code is in the svelte repo: https://github.com/sveltejs/svelte/blob/master/documentation/examples/05-bindings/12-component-bindings/Keypad.svelte
Thanks @geoffrich Here's the PR https://github.com/sveltejs/svelte/pull/8931