Przejdź do głównej treści
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.

Kluczowe elementy klawiatury wizualnie reprezentują dane wejściowe z klawiatury, przydatne do dokumentowania skrótów, klawiszy skrótu i ​​nawigacji za pomocą klawiatury. Elementy kbd, zbudowane w oparciu o semantyczny HTML, komunikują działania użytkownika i wzorce interakcji. System Frutjam kbd obsługuje wiele rozmiarów i stylów — idealnie nadaje się do dokumentacji skrótów, nakładek z samouczkami i przewodników po klawiaturze.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Klasa Typ Opis
kbdOpieraćKlawisz klawiatury stylizowany na podwyższoną ramkę i cień
kbd-xsRozmiarBardzo mała (czcionka 0,75 rem)
kbd-smRozmiarMały (czcionka 0,8125 rem)
kbd-mdRozmiarŚredni (czcionka 0,875 rem, domyślna)
kbd-lgRozmiarDuży (czcionka 1rem)
kbd-xlRozmiarBardzo duży (czcionka 1,125 rem)

Podstawowe użycie

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>

Kluczowe kombinacje

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>

Kluczowe rozmiary

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>

Klucze specjalne

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>

Klawisze strzałek

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

Przewodnik po skrótach klawiaturowych

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>