131 lines
2.6 KiB
Markdown
131 lines
2.6 KiB
Markdown
# daisyUI Documentation - Kbd Component
|
|
|
|
Kbd is used to display keyboard shortcuts.
|
|
|
|
## Classes and Usage
|
|
|
|
### Core Classes:
|
|
- **kbd** - The main kbd element
|
|
- **kbd-xs** - Extra small size
|
|
- **kbd-sm** - Small size
|
|
- **kbd-md** - Medium size [Default]
|
|
- **kbd-lg** - Large size
|
|
- **kbd-xl** - Extra large size
|
|
|
|
## Examples
|
|
|
|
### Basic Kbd
|
|
|
|
`K`
|
|
|
|
```html
|
|
<kbd class="kbd">K</kbd>
|
|
```
|
|
|
|
### Kbd Sizes
|
|
|
|
`Xsmall` `Small` `Medium` `Large` `Xlarge`
|
|
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
### In Text
|
|
|
|
Press `F` to pay respects.
|
|
|
|
```html
|
|
Press
|
|
<kbd class="kbd kbd-sm">F</kbd>
|
|
to pay respects.
|
|
```
|
|
|
|
### Key Combination
|
|
|
|
`ctrl` + `shift` + `del`
|
|
|
|
```html
|
|
<kbd class="kbd">ctrl</kbd>
|
|
+
|
|
<kbd class="kbd">shift</kbd>
|
|
+
|
|
<kbd class="kbd">del</kbd>
|
|
```
|
|
|
|
### Function Keys
|
|
|
|
`⌘` `⌥` `⇧` `⌃`
|
|
|
|
```html
|
|
<kbd class="kbd">⌘</kbd>
|
|
<kbd class="kbd">⌥</kbd>
|
|
<kbd class="kbd">⇧</kbd>
|
|
<kbd class="kbd">⌃</kbd>
|
|
```
|
|
|
|
### A Full Keyboard
|
|
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
### Arrow Keys
|
|
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
## Features
|
|
|
|
- Displays keyboard shortcuts and key combinations
|
|
- Multiple size options (xs, sm, md, lg, xl)
|
|
- Works with individual keys or combinations
|
|
- Can be styled to look like physical keyboard keys
|
|
- Responsive design
|
|
|
|
This component is useful for documenting keyboard shortcuts in applications or guides. |