sites icon indicating copy to clipboard operation
sites copied to clipboard

Improve the component-binding example

Open Pacheco95 opened this issue 2 years ago • 2 comments

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>

Pacheco95 avatar Jul 06 '23 14:07 Pacheco95

The code is in the svelte repo: https://github.com/sveltejs/svelte/blob/master/documentation/examples/05-bindings/12-component-bindings/Keypad.svelte

geoffrich avatar Jul 06 '23 15:07 geoffrich

Thanks @geoffrich Here's the PR https://github.com/sveltejs/svelte/pull/8931

Pacheco95 avatar Jul 06 '23 17:07 Pacheco95