Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Thành phần KBD

Cập nhật lần cuối:

Thành phần kbd CSS Tailwind chỉ có CSS ​​để hiển thị các phím tắt và tổ hợp phím. Các biến thể kích thước. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

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

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

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

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

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

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>

Using Claude Code, Cursor, or another AI editor?

Cherry MCP cung cấp cho trình soạn thảo AI của bạn tên và cấu trúc lớp KBD chính xác theo yêu cầu. Không còn những lớp học ảo giác nữa.

Try Cherry MCP