Kbd experimental
기본 keyboard key wrapper입니다. native kbd로 단축키와 키 입력을 작은 키캡 형태로 표시합니다.
Preview
명령 메뉴 CtrlK
저장 CtrlS
줄바꿈 ShiftEnter
<script lang="ts">
import { Kbd } from '@odbd/svelte'
const shortcuts = [
{ label: '명령 메뉴', keys: ['Ctrl', 'K'] },
{ label: '저장', keys: ['Ctrl', 'S'] },
{ label: '줄바꿈', keys: ['Shift', 'Enter'] },
] as const
</script>
<div class="kbd-demo">
{#each shortcuts as shortcut}
<div class="kbd-demo__row">
<span>{shortcut.label}</span>
<span class="kbd-demo__keys">
{#each shortcut.keys as key}
<Kbd>{key}</Kbd>
{/each}
</span>
</div>
{/each}
</div>
<style>
.kbd-demo {
display: grid;
width: min(100%, 30rem);
gap: var(--odbd-space-2);
}
.kbd-demo__row {
display: flex;
min-width: 0;
align-items: center;
gap: var(--odbd-space-4);
gap: var(--odbd-space-4);
color: var(--odbd-color-foreground);
font-size: var(--odbd-font-size-sm);
}
.kbd-demo__keys {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: var(--odbd-space-1);
}
</style>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import { Kbd } from '@odbd/svelte' import { Kbd } from '@odbd/react/kbd'