Обзор
ИмпортируйтеShortcut и formatShortcut из twenty-ui/primitives/typography. Оба используют одинаковую модель, символы и разделители. Регистрируйте сочетания клавиш в приложении. Shortcut только форматирует подсказку; он не регистрирует действия клавиатуры. Нативные атрибуты, обработчики событий, стили, имена классов и ссылки нацелены на его внешний span. ShortcutProps и ShortcutFormatOptions — публичные типы.
Использование
Комбинации и последовательности
['Mod', 'K'] означает, что нужно нажать Mod и K одновременно. Вложенный массив представляет собой упорядоченную последовательность: [['G'], ['P']] означает, что нужно нажать G, затем P. Каждый вложенный массив — это одно сочетание, поэтому [['Mod', 'K'], ['Mod', 'C']] означает, что нужно нажать Mod и K, затем Mod и C. Для одной клавиши используйте массив с одним элементом. Обе формы массивов могут быть readonly.
Mod и CommandOrControl отображают Command в macOS и iOS, а Control — в других системах. Явно указанные клавиши Command, Control, Alt и Enter также имеют отображаемые обозначения. Другие строки отображаются как указано. Определение устройства безопасно без глобальных объектов браузера; platform позволяет переопределить его значением mac или other.
Используйте sequenceJoinLabel для локализованного текста соединения. combinationSeparator может сохранять принятый в приложении формат, например +. Текстовый разделитель по умолчанию отсутствует на устройствах Apple и представляет собой пробел в других случаях. variant выбирает keys, text или button. visibility="desktop" скрывает подсказку при ширине мобильной области просмотра, а always оставляет её видимой.
Символы клавиш имеют понятные доступные имена. Используйте accessibleKeyLabels для локализации названий отдельных клавиш в выводе программы чтения с экрана. Укажите aria-label или aria-labelledby для локализованного имени всего сочетания клавиш либо aria-hidden для декоративной подсказки. Кнопки сохраняют названия своих действий и скрывают декоративные подсказки на мобильных устройствах. Строки меню и списков сохраняют видимость своих подсказок.
Внешний вид
Используйтеkeys для отдельных клавиш, text для встроенной подсказки или button для компактной подсказки внутри действия. Эти варианты изменяют только представление.
Миграция
Плоские сохранённые массивы, представляющие последовательные нажатия клавиш, необходимо сделать вложенными перед передачей в
shortcut: hotKeys.map((key) => [key]). Массивы, представляющие одновременные нажатия клавиш, можно передавать напрямую. Строки клавиш остаются литеральными токенами, поэтому ['Mod', '+'] содержит клавишу плюса, а ['Space'] содержит клавишу пробела; разбор строк сочетаний клавиш не требуется.
Свойства
Readonly<Record<string, string>>
Optional localized names for individual keys in screen reader output.
string
Optional separator between simultaneous keys. Defaults to no separator on Apple devices and a space elsewhere.
"mac" | "other"
Optional mac or other platform override. Defaults to server-safe device detection.
string
Text between sequence steps. Defaults to then.
ShortcutDefinition
обязательно
Flat key array for a simultaneous combination, or nested key arrays for an ordered sequence of combinations.
"button" | "keys" | "text"
по умолчанию:"keys"
Keycaps, inline text, or a separated button hint.
"always" | "desktop"
по умолчанию:"always"
Always visible by default. Desktop hints hide on mobile viewports.