Kbd
Inline keyboard shortcut chip wrapping HTML5 <kbd> with daisyUI 5 kbd class. Two props: size and appearance. Embed in prose or chain with + to show combos.
default 単独表示 — size=md, appearance=default
K
size variants — xs / sm / md / lg / xl
K
K
K
K
K
Enter
Enter
Enter
Enter
Enter
appearance variants — default / soft / outline (size=md)
default
K
Ctrl
↵
soft
K
Ctrl
↵
outline
K
Ctrl
↵
shortcut combos — 実例
コマンドパレットを開く
Ctrl
+ K
保存 (macOS)
⌘
S
ヘルプを表示
Shift
+ ?
3 キーコンボ
Ctrl
+ Shift
+ P
大きめサイズ (size=lg)
Ctrl
+ K
in text — 段落内の埋め込み
検索を起動するには / を押してください。検索ボックスから抜けるには Esc を押します。
ファイルを保存する時は ⌘ S 、すべて保存する時は ⌘ + Shift + S を使います。
soft appearance を文章内で使うと、地味なので読み心地が良い: ⌘ K でコマンドパレット。
使い方
{{-- 単独 --}}
<x-kbd>K</x-kbd>
{{-- size: xs / sm / md (default) / lg / xl --}}
<x-kbd size="lg">Enter</x-kbd>
{{-- appearance: default / soft / outline --}}
<x-kbd appearance="soft">Ctrl</x-kbd>
<x-kbd appearance="outline">Ctrl</x-kbd>
{{-- combo (+ で繋ぐ / 隣接) --}}
<x-kbd>Ctrl</x-kbd> + <x-kbd>K</x-kbd>
<x-kbd>⌘</x-kbd><x-kbd>S</x-kbd>
{{-- 文章内に埋め込み --}}
<p>検索は <x-kbd size="sm">/</x-kbd> を押してください</p>