跳至主要內容
Frutjam logo Frutjam
v2.2.2
Theme

KBD Component

CSS-only Tailwind CSS kbd component for displaying keyboard shortcuts and key combinations. Size variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

鍵盤按鍵組件直觀地表示鍵盤輸入，對於記錄快捷鍵、熱鍵和鍵盤導航很有用。 kbd 元素採用語意 HTML 構建，傳達使用者操作和互動模式。 Frutjam kbd 系統支援多種尺寸和樣式，非常適合快捷方式文件、教學課程覆蓋和鍵盤指南。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

班級 類型 描述
kbd根據帶有凸起邊框和陰影的鍵盤按鍵
kbd-xs尺寸超小號（0.75rem 字型）
kbd-sm尺寸小號（0.8125rem 字型）
kbd-md尺寸中號（0.875rem 字體，預設）
kbd-lg尺寸大號（1rem 字型）
kbd-xl尺寸超大（1.125rem字體）

基本用法

A B C 
1
2
3
<kbd class="kbd">A</kbd>
<kbd class="kbd">B</kbd>
<kbd class="kbd">C</kbd>

1
2
3
<kbd className="kbd">A</kbd>
<kbd className="kbd">B</kbd>
<kbd className="kbd">C</kbd>

按鍵組合

Copy: Ctrl + C
Paste: Ctrl + V
Undo: Ctrl + Z
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<div class="space-y-2">
  <div>
    <span class="text-sm">Copy:</span>
    <kbd class="kbd">Ctrl</kbd>
    <span>+</span>
    <kbd class="kbd">C</kbd>
  </div>
  <div>
    <span class="text-sm">Paste:</span>
    <kbd class="kbd">Ctrl</kbd>
    <span>+</span>
    <kbd class="kbd">V</kbd>
  </div>
  <div>
    <span class="text-sm">Undo:</span>
    <kbd class="kbd">Ctrl</kbd>
    <span>+</span>
    <kbd class="kbd">Z</kbd>
  </div>
</div>

鑰匙尺寸

Xs Sm Md Lg
html 
1
2
3
4
<kbd class="kbd kbd-xs">Xs</kbd>
<kbd class="kbd kbd-sm">Sm</kbd>
<kbd class="kbd kbd-md">Md</kbd>
<kbd class="kbd kbd-lg">Lg</kbd>

特殊按鍵

Enter Tab Shift Alt Esc Space
html 
1
2
3
4
5
6
7
8
<div class="space-x-2">
  <kbd class="kbd">Enter</kbd>
  <kbd class="kbd">Tab</kbd>
  <kbd class="kbd">Shift</kbd>
  <kbd class="kbd">Alt</kbd>
  <kbd class="kbd">Esc</kbd>
  <kbd class="kbd">Space</kbd>
</div>

方向鍵

↑
← ↓ →
html 
1
2
3
4
5
6
7
8
<div class="inline-grid grid-cols-3 gap-1">
  <div></div>
  <kbd class="kbd">↑</kbd>
  <div></div>
  <kbd class="kbd">←</kbd>
  <kbd class="kbd">↓</kbd>
  <kbd class="kbd">→</kbd>
</div>

鍵盤快速鍵指南

Keyboard Shortcuts

Search
Ctrl + K
Focus
/
New
Ctrl + N
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="card bg-base-100 shadow-xl max-w-md">
  <div class="card-content">
    <h2 class="card-title text-lg">Keyboard Shortcuts</h2>
    <div class="space-y-2 text-sm">
      <div class="flex justify-between">
        <span>Search</span>
        <div><kbd class="kbd kbd-sm">Ctrl</kbd> + <kbd class="kbd kbd-sm">K</kbd></div>
      </div>
      <div class="flex justify-between">
        <span>Focus</span>
        <div><kbd class="kbd kbd-sm">/</kbd></div>
      </div>
      <div class="flex justify-between">
        <span>New</span>
        <div><kbd class="kbd kbd-sm">Ctrl</kbd> + <kbd class="kbd kbd-sm">N</kbd></div>
      </div>
    </div>
  </div>
</div>