Kbd

Визуальный компонент для отображения клавиш клавиатуры. Идеально подходит для показа горячих клавиш, комбинаций клавиш или подсказок в документации и интерфейсе.

Установка

npx @zizigy/capsule add Kbd

Использование

Базовый Kbd

<capsule-kbd>Ctrl</capsule-kbd>

Комбинации клавиш

Отображайте горячие клавиши, комбинируя несколько клавиш:

Нажмите + для копирования

Нажмите <capsule-kbd>Ctrl</capsule-kbd> + <capsule-kbd>C</capsule-kbd> для
копирования

Разные размеры

<capsule-kbd size="xs">XS</capsule-kbd>
<capsule-kbd size="sm">SM</capsule-kbd>
<capsule-kbd size="md">MD</capsule-kbd>
<capsule-kbd size="lg">LG</capsule-kbd>
<capsule-kbd size="xl">XL</capsule-kbd>

Распространённые горячие клавиши

Сохранить: +

Копировать: +

Вставить: +

Отменить: +

Поиск: +

<div
  >Сохранить: <capsule-kbd>Ctrl</capsule-kbd> +
  <capsule-kbd>S</capsule-kbd></div
>
<div
  >Копировать: <capsule-kbd>Ctrl</capsule-kbd> +
  <capsule-kbd>C</capsule-kbd></div
>

Клавиши стрелок

Используйте для навигации

Используйте <capsule-kbd>↑</capsule-kbd> <capsule-kbd>↓</capsule-kbd>
<capsule-kbd>←</capsule-kbd> <capsule-kbd>→</capsule-kbd> для навигации

Функциональные клавиши

<capsule-kbd>F1</capsule-kbd>
<capsule-kbd>F2</capsule-kbd>
<capsule-kbd>F3</capsule-kbd>

API

Свойства

Свойство	Тип	По умолчанию	Описание
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Размер клавиши клавиатуры

Стилизация

Вы можете настроить внешний вид с помощью CSS:

capsule-kbd {
  background: #f0f0f0;
  border-color: #ccc;
  font-size: 14px;
}