Kbd

A keyboard key or shortcut.

2 fichiers

<div class="flex flex-col items-center gap-4">
  <pb-ui.kbd-group><pb-ui.kbd>⌘</pb-ui.kbd><pb-ui.kbd>⇧</pb-ui.kbd><pb-ui.kbd>⌥</pb-ui.kbd><pb-ui.kbd>⌃</pb-ui.kbd></pb-ui.kbd-group>
  <pb-ui.kbd-group><pb-ui.kbd>Ctrl</pb-ui.kbd><span class="text-sm">+</span><pb-ui.kbd>B</pb-ui.kbd></pb-ui.kbd-group>
</div>

Installation

pyblade-ui add kbd

Copiez ces fichiers dans votre projet

components/ui/kbd.html

<kbd data-slot="kbd" {{ attributes.cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none [&_svg:not([class*='size-'])]:size-3") }}>{{ slot }}</kbd>

components/ui/kbd_group.html

<kbd data-slot="kbd-group" {{ attributes.cn("inline-flex items-center gap-1") }}>{{ slot }}</kbd>

Adaptez le chemin à votre projet
Le dossier components est celui déclaré dans pyblade.toml.

Utilisation

Les balises <pb-ui.kbd> <pb-ui.kbd-group> sont disponibles dans tous vos templates.

<pb-ui.kbd-group><pb-ui.kbd>Ctrl</pb-ui.kbd><pb-ui.kbd>K</pb-ui.kbd></pb-ui.kbd-group>

Exemples

Dans un texte

‹ Empty Spinner ›