Kbd

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

Импорт и базовое использование

Для начала необходимо импортировать компонент из @chakra-ui/react:

import { Kbd } from '@chakra-ui/react';

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

<Kbd>Ctrl</Kbd>

Рендерит кнопку клавиши Ctrl с автоматически применяемыми стилями, соответствующими стандартам Chakra UI: границы, фон и отступы, которые делают клавишу визуально отделённой от остального текста.

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

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

<Kbd>Ctrl</Kbd> + <Kbd>C</Kbd>

Это создаёт видимость привычной комбинации Ctrl+C. Использование нескольких компонентов Kbd обеспечивает правильное визуальное разделение клавиш и последовательное выравнивание.

Стилизация и кастомизация

Компонент Kbd наследует все системные свойства Chakra UI, такие как colorScheme, size, fontSize, borderRadius и padding. Это позволяет гибко адаптировать внешний вид клавиш под дизайн приложения.

Примеры кастомизации:

<Kbd fontSize="sm" color="white" bg="blue.500" borderRadius="md" px={2} py={1}>
  Shift
</Kbd>
  • fontSize — размер текста внутри клавиши.
  • color — цвет текста.
  • bg — цвет фона клавиши.
  • borderRadius — скругление углов.
  • px и py — горизонтальные и вертикальные отступы.

Такой подход позволяет создавать как стандартные клавиши, так и уникальные стили для специальных элементов интерфейса.

Использование внутри текста

Компонент Kbd удобно применять внутри абзацев и заголовков для улучшения читаемости инструкций. Например:

<Text>
  Чтобы скопировать текст, нажмите <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd>.
</Text>

Chakra UI автоматически корректно выравнивает Kbd с окружающим текстом, сохраняя вертикальный центр и промежутки между словами.

Интеграция с другими компонентами

Kbd можно комбинировать с любыми другими компонентами Chakra UI, такими как Tooltip, Button, Stack:

<Tooltip label="Скопировать">
  <Button>
    <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd>
  </Button>
</Tooltip>

В этом примере комбинация клавиш помещается внутрь кнопки, и при наведении отображается подсказка с пояснением действия.

Состояние и адаптивность

Компонент Kbd корректно работает в различных состояниях интерфейса и адаптивно подстраивается под размеры шрифтов и контейнеров. Можно использовать Kbd в Flex, Grid или HStack для упорядочивания клавиш в строке или колонке:

<HStack spacing={2}>
  <Kbd>Cmd</Kbd>
  <Kbd>Shift</Kbd>
  <Kbd>P</Kbd>
</HStack>

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

Доступность

Chakra UI учитывает принципы доступности при рендеринге Kbd. Компонент корректно воспринимается скринридерами, так как фактически является семантическим inline-элементом, соответствующим HTML-тегу <kbd>. Это обеспечивает поддержку пользователей с особыми потребностями без дополнительной настройки.

Итоговые рекомендации по использованию

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

Kbd обеспечивает единообразие и профессиональный вид инструкций, позволяя поддерживать высокие стандарты интерфейса и удобство для пользователя.

Оглавление