Kbd для горячих клавиш

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

В Chakra UI Kbd является семантическим элементом, основанным на HTML-теге <kbd>, с готовыми стилями, которые можно легко кастомизировать.

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

Базовое применение компонента выглядит следующим образом:

import { Kbd, Text } from "@chakra-ui/react";

function ShortcutExample() {
  return (
    <Text>
      Чтобы скопировать текст, нажмите <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd>
    </Text>
  );
}

Разбор кода:

  • <Kbd> автоматически придает клавише визуальный стиль, похожий на физическую кнопку.
  • Комбинации клавиш можно объединять через + или любой другой разделитель, чтобы отобразить последовательность действий.
  • Компонент может использоваться внутри любых текстовых элементов (Text, Heading, Box и т. д.), сохраняя корректное отображение.

Настройка стилей

Chakra UI предоставляет возможность изменять стили компонента Kbd через системные пропсы:

<Kbd colorScheme="teal" fontSize="md" px={3} py={1} borderRadius="md">
  Ctrl
</Kbd>

Ключевые пропсы:

  • colorScheme — задает цветовую схему для фона клавиши.
  • fontSize — размер шрифта внутри клавиши.
  • px, py — горизонтальные и вертикальные отступы, управляющие размерами «кнопки».
  • borderRadius — скругление углов, которое может быть использовано для стилистической настройки.

Также доступна полная интеграция с темингом Chakra UI, что позволяет глобально настраивать внешний вид всех Kbd через extendTheme.

Комбинирование клавиш

Для отображения сочетаний клавиш можно обернуть каждую клавишу в отдельный компонент Kbd:

<HStack spacing={2}>
  <Kbd>Shift</Kbd>
  <Kbd>Alt</Kbd>
  <Kbd>R</Kbd>
</HStack>

Особенности:

  • Использование HStack из Chakra UI автоматически распределяет клавиши по горизонтали с заданным промежутком.
  • Для вертикальных комбинаций удобно использовать VStack.
  • Для сложных комбинаций клавиш можно создавать собственные компоненты, которые автоматически рендерят массив клавиш.

Адаптивность и доступность

Kbd наследует все свойства Chakra UI по доступности:

  • Компонент правильно обрабатывается экранными считывателями.
  • Цветовая схема и контраст можно настроить так, чтобы сочетания клавиш оставались читаемыми на разных фонах.
  • Можно использовать семантические HTML-атрибуты (aria-label) для описания функции клавиши, если это необходимо.
<Kbd aria-label="Сочетание клавиш для копирования">Ctrl + C</Kbd>

Создание пользовательских сочетаний

Для динамического отображения горячих клавиш удобно создавать отдельный компонент, который принимает массив клавиш:

function Shortcut({ keys }) {
  return (
    <HStack spacing={1}>
      {keys.map((key) => (
        <Kbd key={key}>{key}</Kbd>
      ))}
    </HStack>
  );
}

// Использование
<Shortcut keys={["Ctrl", "Shift", "S"]} />

Преимущества такого подхода:

  • Упрощается изменение комбинаций клавиш.
  • Легко интегрируется с данными из настроек приложения.
  • Компонент универсален и переиспользуем.

Встраивание в документацию и UI

Kbd идеально подходит для:

  • Подсказок в интерфейсе (Tooltips).
  • Документации и руководств пользователя.
  • Панелей управления, где отображаются горячие клавиши для ускорения работы.

Пример с подсказкой:

<Tooltip label="Скопировать">
  <Text>
    Нажмите <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd>
  </Text>
</Tooltip>

Интеграция с темой Chakra UI

Можно глобально настраивать стиль всех компонентов Kbd через тему:

import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  components: {
    Kbd: {
      baseStyle: {
        px: 2,
        py: 1,
        borderRadius: "sm",
        fontWeight: "bold",
        bg: "gray.200",
        color: "gray.800",
      },
    },
  },
});

Возможности кастомизации:

  • baseStyle задает глобальные значения для всех экземпляров Kbd.
  • variants позволяют создавать разные стили для отдельных случаев (например, primary, secondary).
  • sizes управляют размерами клавиш.

Компонент Kbd в Chakra UI сочетает в себе семантику HTML, визуальную привлекательность и гибкость настройки, что делает его идеальным инструментом для отображения горячих клавиш и улучшения UX приложений на JavaScript.

Оглавление