Catalog Keyboard

<.event>

ConnieUI.Keyboard

Press the key anywhere on the page to toggle the line below.

HEEx

<ConnieUI.Layouts.vstack gap="sm">
  <ConnieUI.Keyboard.event key="ArrowRight" event={JS.toggle(to: "#catalog-keyboard-pressed")} />
  <ConnieUI.Typography.muted>
    Press the key anywhere on the page to toggle the line below.
  </ConnieUI.Typography.muted>
  <ConnieUI.Typography.muted id="catalog-keyboard-pressed" color="quaternary" class="hidden">
    The shortcut ran.
  </ConnieUI.Typography.muted>
</ConnieUI.Layouts.vstack>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

Set by the example

event

Docs

Runs `event` whenever `key` is pressed anywhere on the page, for as long as the component is on it. For page-wide shortcuts such as stepping through records with the arrow keys.

Attribute	Type	Description
No data found.
key *	:string	ArrowUp \| ArrowDown \| ArrowLeft \| ArrowRight \| Enter \| Escape \| Tab \| Space \| Backspace \| Delete \| Home \| End \| PageUp \| PageDown \| F1 \| F2 \| F3 \| F4 \| F5 \| F6 \| F7 \| F8 \| F9 \| F10 \| F11 \| F12
event *	:any	The JS command to execute when the key is pressed