GPUI Box GitHub

Components / overlay

Kbd builder

A keyboard shortcut, written the way the current platform writes it.

A builder is RenderOnce. Construct and mount it in one expression.

use gpui_kit::overlay::Kbd;

Reviewed in kbd.

Construct
new(keystroke: impl Into<SharedString>) -> Self
Options

Chain onto the value.

id(ident: impl Into<Ident>) -> Self
Queries

Only answer; they change nothing.

caps(cx: &App) -> Vec<SharedString>
Example · kbd
fn kbd(_window: &mut Window, cx: &mut App) -> AnyElement {
    let theme = cx.theme().clone();
    // A keystroke is only ever read beside the thing it performs, so the
    // exhibit shows it where it is used: at the end of a menu row, at the end
    // of a sentence, and in the run of special keys whose glyphs are the part
    // that goes wrong.
    let named = |label: &'static str, keystroke: &'static str, id: &'static str| {
        div()
            .row()
            .w_full()
            .items_center()
            .justify_between()
            .gap_token(&theme, Space::Md)
            .py_token(&theme, Space::Xs)
            .child(crate::foundation::text(&theme, TypeScale::Body, label))
            .child(Kbd::new(keystroke).id(id))
    };

    stack(&theme)
        .w(px(420.0))
        .child(caption(&theme, "the shortcut sits with the thing it does"))
        .child(
            div()
                .column()
                .w_full()
                .card_surface(&theme, CardVariant::Elevated)
                .px_token(&theme, Space::Md)
                .py_token(&theme, Space::Sm)
                .child(named(
                    "Open the command palette",
                    "cmd-shift-p",
                    "scene.kbd.palette",
                ))
                .child(div().w_full().h(px(theme.space(Space::Sm))))
                .child(named("Copy the selection", "ctrl-c", "scene.kbd.copy"))
                .child(div().w_full().h(px(theme.space(Space::Sm))))
                .child(named("Rename in place", "cmd-alt-r", "scene.kbd.rename")),
        )
        .child(caption(
            &theme,
            "the keys that need the bundled symbol face",
        ))
        .child(
            row(&theme)
                .gap_token(&theme, Space::Sm)
                .child(Kbd::new("enter").id("scene.kbd.confirm"))
                .child(Kbd::new("escape").id("scene.kbd.dismiss"))
                .child(Kbd::new("backspace").id("scene.kbd.erase"))
                .child(Kbd::new("delete").id("scene.kbd.delete"))
                .child(Kbd::new("tab").id("scene.kbd.advance"))
                .child(Kbd::new("space").id("scene.kbd.space"))
                .child(Kbd::new("up").id("scene.kbd.up"))
                .child(Kbd::new("down").id("scene.kbd.down")),
        )
        .child(
            div()
                .row()
                .items_center()
                .gap_token(&theme, Space::Xs)
                .child(crate::foundation::text(&theme, TypeScale::Body, "Press"))
                .child(Kbd::new("cmd-enter").id("scene.kbd.inline"))
                .child(crate::foundation::text(
                    &theme,
                    TypeScale::Body,
                    "to send the message.",
                ))
                .text_color(theme.colors.text_muted),
        )
        .into_any_element()
}

Source: crates/gpui-kit/src/overlay/kbd.rs