Chuyển đến nội dung chính
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.

Các thành phần phím của bàn phím thể hiện trực quan hoạt động nhập bằng bàn phím, hữu ích cho việc ghi lại các phím tắt, phím nóng và điều hướng bàn phím. Được xây dựng bằng HTML ngữ nghĩa, các phần tử kbd truyền đạt hành động và kiểu tương tác của người dùng. Hệ thống kbd Frutjam hỗ trợ nhiều kích cỡ và kiểu dáng—lý tưởng cho tài liệu về phím tắt, lớp phủ hướng dẫn và hướng dẫn bàn phím.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Lớp học Kiểu Sự miêu tả
kbdCăn cứPhím bàn phím được tạo kiểu với đường viền và bóng nổi lên
kbd-xsKích cỡCực nhỏ (phông chữ 0,75rem)
kbd-smKích cỡNhỏ (phông chữ 0,8125rem)
kbd-mdKích cỡTrung bình (phông chữ 0,875rem, mặc định)
kbd-lgKích cỡLớn (phông chữ 1rem)
kbd-xlKích cỡCực lớn (phông chữ 1.125rem)

Cách sử dụng cơ bản

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>

Tổ hợp phím

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>

Kích thước phím

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>

Phím đặc biệt

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>

Phím mũi tên

↑
← ↓ →
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>

Hướng dẫn phím tắt

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>