mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
996 B
41 lines
996 B
6 years ago
|
<script>
|
||
|
import { createEventDispatcher } from 'svelte';
|
||
|
|
||
|
export let value = '';
|
||
|
|
||
|
const dispatch = createEventDispatcher();
|
||
|
|
||
1 year ago
|
const select = (num) => () => (value += num);
|
||
|
const clear = () => (value = '');
|
||
6 years ago
|
const submit = () => dispatch('submit');
|
||
|
</script>
|
||
|
|
||
|
<div class="keypad">
|
||
|
<button on:click={select(1)}>1</button>
|
||
|
<button on:click={select(2)}>2</button>
|
||
|
<button on:click={select(3)}>3</button>
|
||
|
<button on:click={select(4)}>4</button>
|
||
|
<button on:click={select(5)}>5</button>
|
||
|
<button on:click={select(6)}>6</button>
|
||
|
<button on:click={select(7)}>7</button>
|
||
|
<button on:click={select(8)}>8</button>
|
||
|
<button on:click={select(9)}>9</button>
|
||
|
|
||
|
<button disabled={!value} on:click={clear}>clear</button>
|
||
|
<button on:click={select(0)}>0</button>
|
||
|
<button disabled={!value} on:click={submit}>submit</button>
|
||
4 years ago
|
</div>
|
||
|
|
||
|
<style>
|
||
|
.keypad {
|
||
|
display: grid;
|
||
|
grid-template-columns: repeat(3, 5em);
|
||
|
grid-template-rows: repeat(4, 3em);
|
||
1 year ago
|
grid-gap: 0.5em;
|
||
4 years ago
|
}
|
||
|
|
||
|
button {
|
||
1 year ago
|
margin: 0;
|
||
4 years ago
|
}
|
||
1 year ago
|
</style>
|