UNPKG

@gravity-ui/uikit

Version:

Gravity UI base styling and components

github.com/gravity-ui/uikit

gravity-ui/uikit

51 lines (33 loc) • 2.23 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
# Hotkey You can use the `Hotkey` component to display keyboard shortcuts for both Mac and PC. ```tsx import {Hotkey} from '@gravity-ui/uikit'; ``` ### 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` | |