Hotkey
import {Hotkey} from '@gravity-ui/uikit';
You can use the Hotkey component to display keyboard shortcuts for both Mac and PC.
Value
Keyboard shortcuts are set in the <key>+<key> format, which means you need to specify multiple keys separated by a plus sign, e.g., shift+tab.
The sequence of key combinations can be separated by a space: <shortcut> <shortcut>, e.g., ctrl+a ctrl+c ctrl+v.
You can use mod as a shorthand for cmd on Mac and ctrl for other platforms. For example, mod+v is rendered as ⌘+A for Mac and Ctrl+A for PC.
View
light: Used if the component is displayed on a light background (used by default).
dark: Used if the component is displayed on a dark background.
<Hotkey view="light" value="mod+a mod+c mod+v" />
<Hotkey view="dark" value="mod+a mod+c mod+v" />Platform
pc: Used to display keyboard shortcuts for a regular PC keyboard.
mac: Used to display keyboard shortcuts for a Macintosh keyboard.
By default, the platform is detected automatically.
<Hotkey value="mod+a mod+c mod+v" />
<Hotkey platform="pc" value="mod+a mod+c mod+v" />
<Hotkey platform="mac" value="mod+a mod+c mod+v" />Properties
| Name | Description | Type | Default |
|---|---|---|---|
| view | Used to set the color scheme | "light" "dark" | "light" |
| platform | Used to select the platform (PC or Macintosh) to display the keyboard shortcut | "pc" "mac" | Detected automatically |
| title | Keyboard shortcut value | string | |
| style | HTML style attribute | React.CSSProperties | |
| className | Alert class name | string |