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()
}