Kbd

Kbd 用于显示键盘快捷键。

类名	类型
kbd	组件	用于显示键盘按键或快捷键
kbd-xs	尺寸	超小尺寸
kbd-sm	尺寸	小尺寸
kbd-md	尺寸	中尺寸[默认]
kbd-lg	尺寸	大尺寸
kbd-xl	尺寸	超大尺寸

Kbd

K

<kbd class="$$kbd">K</kbd>

<kbd class="$$kbd">K</kbd>

            
                <kbd class="$$kbd">K</kbd>

<kbd class="$$kbd">K</kbd>

Kbd 尺寸

超小 小 中 大 超大

<kbd class="$$kbd $$kbd-xs">Xsmall</kbd>
<kbd class="$$kbd $$kbd-sm">Small</kbd>
<kbd class="$$kbd $$kbd-md">Medium</kbd>
<kbd class="$$kbd $$kbd-lg">Large</kbd>
<kbd class="$$kbd $$kbd-xl">Xlarge</kbd>

<kbd class="$$kbd $$kbd-xs">Xsmall</kbd>
<kbd class="$$kbd $$kbd-sm">Small</kbd>
<kbd class="$$kbd $$kbd-md">Medium</kbd>
<kbd class="$$kbd $$kbd-lg">Large</kbd>
<kbd class="$$kbd $$kbd-xl">Xlarge</kbd>

            
                <kbd class="$$kbd $$kbd-xs">Xsmall</kbd>
<kbd class="$$kbd $$kbd-sm">Small</kbd>
<kbd class="$$kbd $$kbd-md">Medium</kbd>
<kbd class="$$kbd $$kbd-lg">Large</kbd>
<kbd class="$$kbd $$kbd-xl">Xlarge</kbd>

<kbd class="$$kbd $$kbd-xs">Xsmall</kbd>
<kbd class="$$kbd $$kbd-sm">Small</kbd>
<kbd class="$$kbd $$kbd-md">Medium</kbd>
<kbd class="$$kbd $$kbd-lg">Large</kbd>
<kbd class="$$kbd $$kbd-xl">Xlarge</kbd>

在文本中

按下 F 表示敬意。

Press
<kbd class="$$kbd $$kbd-sm">F</kbd>
to pay respects.

Press
<kbd class="$$kbd $$kbd-sm">F</kbd>
to pay respects.

            
                Press
<kbd class="$$kbd $$kbd-sm">F</kbd>
to pay respects.

Press
<kbd class="$$kbd $$kbd-sm">F</kbd>
to pay respects.

组合键

ctrl + shift + del

<kbd class="$$kbd">ctrl</kbd>
+
<kbd class="$$kbd">shift</kbd>
+
<kbd class="$$kbd">del</kbd>

<kbd class="$$kbd">ctrl</kbd>
+
<kbd class="$$kbd">shift</kbd>
+
<kbd class="$$kbd">del</kbd>

            
                <kbd class="$$kbd">ctrl</kbd>
+
<kbd class="$$kbd">shift</kbd>
+
<kbd class="$$kbd">del</kbd>

<kbd class="$$kbd">ctrl</kbd>
+
<kbd class="$$kbd">shift</kbd>
+
<kbd class="$$kbd">del</kbd>

功能键

⌘ ⌥ ⇧ ⌃

<kbd class="$$kbd">⌘</kbd>
<kbd class="$$kbd">⌥</kbd>
<kbd class="$$kbd">⇧</kbd>
<kbd class="$$kbd">⌃</kbd>

<kbd class="$$kbd">⌘</kbd>
<kbd class="$$kbd">⌥</kbd>
<kbd class="$$kbd">⇧</kbd>
<kbd class="$$kbd">⌃</kbd>

            
                <kbd class="$$kbd">⌘</kbd>
<kbd class="$$kbd">⌥</kbd>
<kbd class="$$kbd">⇧</kbd>
<kbd class="$$kbd">⌃</kbd>

<kbd class="$$kbd">⌘</kbd>
<kbd class="$$kbd">⌥</kbd>
<kbd class="$$kbd">⇧</kbd>
<kbd class="$$kbd">⌃</kbd>

完整键盘

q w e r t y u i o p

a s d f g h j k l

z x c v b n m /

<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="$$kbd">q</kbd>
  <kbd class="$$kbd">w</kbd>
  <kbd class="$$kbd">e</kbd>
  <kbd class="$$kbd">r</kbd>
  <kbd class="$$kbd">t</kbd>
  <kbd class="$$kbd">y</kbd>
  <kbd class="$$kbd">u</kbd>
  <kbd class="$$kbd">i</kbd>
  <kbd class="$$kbd">o</kbd>
  <kbd class="$$kbd">p</kbd>
</div>
<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="$$kbd">a</kbd>
  <kbd class="$$kbd">s</kbd>
  <kbd class="$$kbd">d</kbd>
  <kbd class="$$kbd">f</kbd>
  <kbd class="$$kbd">g</kbd>
  <kbd class="$$kbd">h</kbd>
  <kbd class="$$kbd">j</kbd>
  <kbd class="$$kbd">k</kbd>
  <kbd class="$$kbd">l</kbd>
</div>
<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="$$kbd">z</kbd>
  <kbd class="$$kbd">x</kbd>
  <kbd class="$$kbd">c</kbd>
  <kbd class="$$kbd">v</kbd>
  <kbd class="$$kbd">b</kbd>
  <kbd class="$$kbd">n</kbd>
  <kbd class="$$kbd">m</kbd>
  <kbd class="$$kbd">/</kbd>
</div>

<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="$$kbd">q</kbd>
  <kbd class="$$kbd">w</kbd>
  <kbd class="$$kbd">e</kbd>
  <kbd class="$$kbd">r</kbd>
  <kbd class="$$kbd">t</kbd>
  <kbd class="$$kbd">y</kbd>
  <kbd class="$$kbd">u</kbd>
  <kbd class="$$kbd">i</kbd>
  <kbd class="$$kbd">o</kbd>
  <kbd class="$$kbd">p</kbd>
</div>
<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="$$kbd">a</kbd>
  <kbd class="$$kbd">s</kbd>
  <kbd class="$$kbd">d</kbd>
  <kbd class="$$kbd">f</kbd>
  <kbd class="$$kbd">g</kbd>
  <kbd class="$$kbd">h</kbd>
  <kbd class="$$kbd">j</kbd>
  <kbd class="$$kbd">k</kbd>
  <kbd class="$$kbd">l</kbd>
</div>
<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="$$kbd">z</kbd>
  <kbd class="$$kbd">x</kbd>
  <kbd class="$$kbd">c</kbd>
  <kbd class="$$kbd">v</kbd>
  <kbd class="$$kbd">b</kbd>
  <kbd class="$$kbd">n</kbd>
  <kbd class="$$kbd">m</kbd>
  <kbd class="$$kbd">/</kbd>
</div>

            
                <div class="my-1 flex w-full justify-center gap-1">
  <kbd class="$$kbd">q</kbd>
  <kbd class="$$kbd">w</kbd>
  <kbd class="$$kbd">e</kbd>
  <kbd class="$$kbd">r</kbd>
  <kbd class="$$kbd">t</kbd>
  <kbd class="$$kbd">y</kbd>
  <kbd class="$$kbd">u</kbd>
  <kbd class="$$kbd">i</kbd>
  <kbd class="$$kbd">o</kbd>
  <kbd class="$$kbd">p</kbd>
</div>
<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="$$kbd">a</kbd>
  <kbd class="$$kbd">s</kbd>
  <kbd class="$$kbd">d</kbd>
  <kbd class="$$kbd">f</kbd>
  <kbd class="$$kbd">g</kbd>
  <kbd class="$$kbd">h</kbd>
  <kbd class="$$kbd">j</kbd>
  <kbd class="$$kbd">k</kbd>
  <kbd class="$$kbd">l</kbd>
</div>
<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="$$kbd">z</kbd>
  <kbd class="$$kbd">x</kbd>
  <kbd class="$$kbd">c</kbd>
  <kbd class="$$kbd">v</kbd>
  <kbd class="$$kbd">b</kbd>
  <kbd class="$$kbd">n</kbd>
  <kbd class="$$kbd">m</kbd>
  <kbd class="$$kbd">/</kbd>
</div>

<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="$$kbd">q</kbd>
  <kbd class="$$kbd">w</kbd>
  <kbd class="$$kbd">e</kbd>
  <kbd class="$$kbd">r</kbd>
  <kbd class="$$kbd">t</kbd>
  <kbd class="$$kbd">y</kbd>
  <kbd class="$$kbd">u</kbd>
  <kbd class="$$kbd">i</kbd>
  <kbd class="$$kbd">o</kbd>
  <kbd class="$$kbd">p</kbd>
</div>
<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="$$kbd">a</kbd>
  <kbd class="$$kbd">s</kbd>
  <kbd class="$$kbd">d</kbd>
  <kbd class="$$kbd">f</kbd>
  <kbd class="$$kbd">g</kbd>
  <kbd class="$$kbd">h</kbd>
  <kbd class="$$kbd">j</kbd>
  <kbd class="$$kbd">k</kbd>
  <kbd class="$$kbd">l</kbd>
</div>
<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="$$kbd">z</kbd>
  <kbd class="$$kbd">x</kbd>
  <kbd class="$$kbd">c</kbd>
  <kbd class="$$kbd">v</kbd>
  <kbd class="$$kbd">b</kbd>
  <kbd class="$$kbd">n</kbd>
  <kbd class="$$kbd">m</kbd>
  <kbd class="$$kbd">/</kbd>
</div>

方向键

▲

◀︎ ▶︎

▼

<div class="flex w-full justify-center">
  <kbd class="$$kbd">▲</kbd>
</div>
<div class="flex w-full justify-center gap-12">
  <kbd class="$$kbd">◀︎</kbd>
  <kbd class="$$kbd">▶︎</kbd>
</div>
<div class="flex w-full justify-center">
  <kbd class="$$kbd">▼</kbd>
</div>

<div class="flex w-full justify-center">
  <kbd class="$$kbd">▲</kbd>
</div>
<div class="flex w-full justify-center gap-12">
  <kbd class="$$kbd">◀︎</kbd>
  <kbd class="$$kbd">▶︎</kbd>
</div>
<div class="flex w-full justify-center">
  <kbd class="$$kbd">▼</kbd>
</div>

            
                <div class="flex w-full justify-center">
  <kbd class="$$kbd">▲</kbd>
</div>
<div class="flex w-full justify-center gap-12">
  <kbd class="$$kbd">◀︎</kbd>
  <kbd class="$$kbd">▶︎</kbd>
</div>
<div class="flex w-full justify-center">
  <kbd class="$$kbd">▼</kbd>
</div>

<div class="flex w-full justify-center">
  <kbd class="$$kbd">▲</kbd>
</div>
<div class="flex w-full justify-center gap-12">
  <kbd class="$$kbd">◀︎</kbd>
  <kbd class="$$kbd">▶︎</kbd>
</div>
<div class="flex w-full justify-center">
  <kbd class="$$kbd">▼</kbd>
</div>