Kbd
A Kbd shows a keyboard shortcut as key caps. Use it in a help text, a tooltip, a menu or a tutorial. It only shows the keys; it does not listen for them.
<ui:Label text="Find a command" />
<tb:Kbd keys="Ctrl+K" />
row.Add(new Kbd("Ctrl+Shift+S"));
| Member | Description |
|---|---|
Keys (keys) |
The keys with "+" between them, such as "Ctrl+Shift+S" or "F5". Each key shows as one cap. Spaces around a key are removed. |
Separator (separator) |
The text between two caps (default "+"). Use "then" for a sequence of keys. An empty text shows no separator. |
- The format of
Keysis the format of aMenuItemshortcut and ofCommandPalette.Shortcut, so one text serves both. - The cap uses the same USS rule as the value of a
KeyBindingField.
Tips:
- Write the "+" key as "Plus", because "+" divides the keys.
- For the key of an action that the player can rebind, read the binding and set
Keysfrom it, so the hint is always correct. - For a gamepad button, use a GamepadGlyph. For a mouse button or a key as a glyph, use an
InputGlyph. AKbdshows a text as a cap in the font of the theme; a glyph is a picture from the PromptFont font.
Styling
| Class | Element |
|---|---|
tb-kbd |
The row of caps. |
tb-kbd__key |
One key cap: a border that is 2 px at the bottom, a radius of 4 px, --tb-color-surface-alt and bold small text. It shares these rules with the value of a KeyBindingField. |
tb-kbd__separator |
The text between two caps, in --tb-color-text-muted. |
.tb-kbd__key { background-color: var(--tb-color-accent); color: var(--tb-color-accent-text); border-color: var(--tb-color-accent); }