Tesserae - Keyboard Shortcut

KeyboardShortcut

Description

Render keyboard shortcuts as styled key chips

KeyboardShortcut renders one or more key names as styled chips that look like physical keyboard keys. It automatically adapts modifier key labels to the current OS (⌘ on macOS, Ctrl on Windows/Linux) and handles special keys like Enter (↵), Escape, and arrow keys.

Samples

Common Shortcuts

keyboard-shortcut-common-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = VStack().Gap(12.px()).Children(
                HStack().AlignItems(ItemAlign.Center).Gap(16.px()).Children(
                    TextBlock("Search").W(120.px()).Small(),
                    KeyboardShortcut("Ctrl", "K")
                ),
                HStack().AlignItems(ItemAlign.Center).Gap(16.px()).Children(
                    TextBlock("Save").W(120.px()).Small(),
                    KeyboardShortcut("Ctrl", "S")
                ),
                HStack().AlignItems(ItemAlign.Center).Gap(16.px()).Children(
                    TextBlock("Undo").W(120.px()).Small(),
                    KeyboardShortcut("Ctrl", "Z")
                ),
                HStack().AlignItems(ItemAlign.Center).Gap(16.px()).Children(
                    TextBlock("Redo").W(120.px()).Small(),
                    KeyboardShortcut("Ctrl", "Shift", "Z")
                ),
                HStack().AlignItems(ItemAlign.Center).Gap(16.px()).Children(
                    TextBlock("Copy").W(120.px()).Small(),
                    KeyboardShortcut("Ctrl", "C")
                ),
                HStack().AlignItems(ItemAlign.Center).Gap(16.px()).Children(
                    TextBlock("Select all").W(120.px()).Small(),
                    KeyboardShortcut("Ctrl", "A")
                ),
                HStack().AlignItems(ItemAlign.Center).Gap(16.px()).Children(
                    TextBlock("Close / Cancel").W(120.px()).Small(),
                    KeyboardShortcut("Escape")
                ),
                HStack().AlignItems(ItemAlign.Center).Gap(16.px()).Children(
                    TextBlock("Confirm").W(120.px()).Small(),
                    KeyboardShortcut("Enter")
                )
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Special Keys

keyboard-shortcut-special-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = HStack().Gap(16.px()).AlignItems(ItemAlign.Center).Children(
                KeyboardShortcut("ArrowUp"),
                KeyboardShortcut("ArrowDown"),
                KeyboardShortcut("ArrowLeft"),
                KeyboardShortcut("ArrowRight"),
                KeyboardShortcut("Tab"),
                KeyboardShortcut("Backspace"),
                KeyboardShortcut("Delete")
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Inline Usage

keyboard-shortcut-inline-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = HStack().AlignItems(ItemAlign.Center).Gap(4.px()).Children(
                TextBlock("Press").Small(),
                KeyboardShortcut("Ctrl", "K"),
                TextBlock("to open the command palette, or").Small(),
                KeyboardShortcut("Escape"),
                TextBlock("to dismiss it.").Small()
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

API reference

class

KeyboardShortcut

public sealed class KeyboardShortcut : ComponentBase<KeyboardShortcut, HTMLElement>

Renders a keyboard shortcut as styled <kbd> chips (e.g. Ctrl+K).

Namespace: Tesserae
Inheritance: ComponentBase<KeyboardShortcut, HTMLElement> → KeyboardShortcut

Constructors

Name	Description
KeyboardShortcut	Initializes a new instance of this class.

Constructor

KeyboardShortcut

public KeyboardShortcut(params string[] keys)

Initializes a new instance of this class.

Methods

Name Description

Render Renders the component's root HTML element.

Matches Whether e is the shortcut described by keys - the same key names this component displays, so a shortcut can be declared once and what is shown cannot drift from what is bound. Ctrl (and its aliases Mod / CmdOrCtrl) is the platform's command modifier: Ctrl elsewhere, and on Apple either Cmd or Ctrl - which is also why it shows there as ⌘. Use the explicit Control for a shortcut that means the Control key on a Mac too.

Name	Description
Render	Renders the component's root HTML element.
Matches	Whether `e` is the shortcut described by `keys` - the same key names this component displays, so a shortcut can be declared once and what is shown cannot drift from what is bound. `Ctrl` (and its aliases `Mod` / `CmdOrCtrl`) is the platform's command modifier: Ctrl elsewhere, and on Apple either Cmd or Ctrl - which is also why it shows there as ⌘. Use the explicit `Control` for a shortcut that means the Control key on a Mac too.

Method

KeyboardShortcut.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Method

KeyboardShortcut.Matches

public static bool Matches(KeyboardEvent e, params string[] keys)

Whether e is the shortcut described by keys - the same key names this component displays, so a shortcut can be declared once and what is shown cannot drift from what is bound. Ctrl (and its aliases Mod / CmdOrCtrl) is the platform's command modifier: Ctrl elsewhere, and on Apple either Cmd or Ctrl - which is also why it shows there as ⌘. Use the explicit Control for a shortcut that means the Control key on a Mac too.

KeyboardShortcut

Description

Samples

Common Shortcuts

Special Keys

Inline Usage

API reference

Constructors

KeyboardShortcut

Methods

KeyboardShortcut.Render

KeyboardShortcut.Matches

See also