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.
43 lines
755 B
43 lines
755 B
6 years ago
|
<script>
|
||
|
let key;
|
||
2 years ago
|
let code;
|
||
6 years ago
|
|
||
|
function handleKeydown(event) {
|
||
|
key = event.key;
|
||
2 years ago
|
code = event.code;
|
||
6 years ago
|
}
|
||
|
</script>
|
||
|
|
||
1 year ago
|
<svelte:window />
|
||
4 years ago
|
|
||
|
<div style="text-align: center">
|
||
|
{#if key}
|
||
|
<kbd>{key === ' ' ? 'Space' : key}</kbd>
|
||
2 years ago
|
<p>{code}</p>
|
||
4 years ago
|
{:else}
|
||
|
<p>Focus this window and press any key</p>
|
||
|
{/if}
|
||
|
</div>
|
||
|
|
||
6 years ago
|
<style>
|
||
|
div {
|
||
|
display: flex;
|
||
|
height: 100%;
|
||
|
align-items: center;
|
||
|
justify-content: center;
|
||
|
flex-direction: column;
|
||
|
}
|
||
|
|
||
|
kbd {
|
||
|
background-color: #eee;
|
||
|
border-radius: 4px;
|
||
|
font-size: 6em;
|
||
|
padding: 0.2em 0.5em;
|
||
4 years ago
|
border-top: 5px solid rgba(255, 255, 255, 0.5);
|
||
|
border-left: 5px solid rgba(255, 255, 255, 0.5);
|
||
|
border-right: 5px solid rgba(0, 0, 0, 0.2);
|
||
|
border-bottom: 5px solid rgba(0, 0, 0, 0.2);
|
||
6 years ago
|
color: #555;
|
||
|
}
|
||
2 years ago
|
</style>
|