Components / overlay
Frost builder
A frosted-glass surface: blurred backdrop, tinted fill, caller's content.
A builder is RenderOnce. Construct and mount it in one expression.
use gpui_kit::overlay::Frost;
Reviewed in frost.
Construct
new(ident: impl Into<Ident>) -> Self
Options
Chain onto the value.
surface(surface: Surface) -> Self
radius(radius: Radius) -> Self
blur(blur: f32) -> Self
child(child: impl IntoElement) -> Self
Example · frost
fn frost(_window: &mut Window, cx: &mut App) -> AnyElement {
let theme = cx.theme().clone();
let card = |title: &'static str, body: &'static str| {
div()
.column()
.gap(px(theme.space(Space::Xs)))
.p(px(theme.space(Space::Md)))
.child(crate::foundation::text(
&theme,
TypeScale::Label,
SharedString::from(title),
))
.child(caption(&theme, body))
};
// What is behind the glass is a page, not a test pattern. A block of
// accent stripes dropped into a panel reads as a hole cut in it, and it
// answers the wrong question anyway: the thing a reader has to be able to
// judge is whether text they can otherwise read has gone out of focus.
stack(&theme)
.w(px(480.0))
.child(caption(&theme, "A floating surface on glass"))
.child(
div()
.relative()
.h(px(200.0))
.surface(&theme, Surface::Panel)
.radius(&theme, Radius::Card)
.overflow_hidden()
.child(filler(&theme, "Document", 8))
.child(
div()
.absolute()
.top(px(48.0))
// Far enough left to cross the lines. Placed clear of
// them the glass had nothing behind it, so the picture
// could not answer the one question it is here for:
// whether text a reader can otherwise read has gone
// out of focus.
.left(px(64.0))
.w(px(240.0))
.child(
Frost::new("scene.frost.popover")
.radius(Radius::Card)
.child(card(
"Rename",
"The page behind stays visible, out of focus",
)),
),
),
)
.child(caption(
&theme,
"The same glass, blurred further and raised above the panel",
))
.child(
div()
.relative()
.h(px(160.0))
.surface(&theme, Surface::Panel)
.radius(&theme, Radius::Card)
.overflow_hidden()
.child(filler(&theme, "Files", 6))
.child(
div()
.absolute()
.top(px(32.0))
.left(px(64.0))
.w(px(280.0))
.child(
Frost::new("scene.frost.rail")
// A surface a step above the page it covers.
// Tinted with the page's own colour the glass
// had no surface of its own: at any alpha, a
// fill the colour of what is behind it adds
// nothing, and the rail's words landed
// directly on the words of the file list.
.surface(gpui_kit_theme::Surface::Raised)
.radius(Radius::Dialog)
.blur(32.0)
.child(card(
"Rail",
"The lines behind stay legible and out of focus",
)),
),
),
)
.into_any_element()
}