GitHub

Kbd

PreviousNext

A key cap for keyboard shortcuts, written as GPUI Kit writes them on each platform.

New control
InteractiveKbd demo
<StackPanel Spacing="12" HorizontalAlignment="Left">
  <StackPanel Orientation="Horizontal" Spacing="6">
    <TextBlock Text="Press" VerticalAlignment="Center" />
    <gpui:Kbd Gesture="Ctrl+K" VerticalAlignment="Center" />
    <TextBlock Text="to search" VerticalAlignment="Center" />
  </StackPanel>
  <WrapPanel ItemSpacing="8" LineSpacing="8">
    <gpui:Kbd Gesture="A" />
    <gpui:Kbd Gesture="F12" />
    <gpui:Kbd Gesture="Tab" />
    <gpui:Kbd Gesture="Space" />
    <gpui:Kbd Gesture="PageDown" />
    <gpui:Kbd Gesture="Ctrl+Shift+P" />
  </WrapPanel>
</StackPanel>

Usage

gpui:Kbd shows its Gesture (a KeyGesture, such as Ctrl+Shift+P) in muted 12px text on a key cap at least 20px wide with 4×2 padding. The text follows GPUI Kit's notation on the running platform: on macOS the modifier symbols without a separator (⌃ ⌥ ⇧ ⌘, with ⏎ and ⎋ for Enter and Escape), elsewhere the names joined by "+" (Ctrl, Alt, Shift, Win). Classes="outline" draws the cap on the background with a 1px border.

Examples

outline on single keys and on a chord.

Outline
InteractiveKbd demo: Outline
<WrapPanel ItemSpacing="8" LineSpacing="8">
  <gpui:Kbd Classes="outline" Gesture="A" />
  <gpui:Kbd Classes="outline" Gesture="F12" />
  <gpui:Kbd Classes="outline" Gesture="Enter" />
  <gpui:Kbd Classes="outline" Gesture="Ctrl+K" />
</WrapPanel>

Not covered

  • Resolving the keys from an Action; write the key names.