ScrollFade builder

A region whose content fades towards the edges it is scrolled past.

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

The verified scroll-fade scene in studio-dark

use gpui_kit::layout::ScrollFade;

Reviewed in scroll-fade.

Construct

new(ident: impl Into<Ident>) -> Self

Options

Chain onto the value.

edges(edges: FadeEdges) -> Self
top(fade: bool) -> Self
bottom(fade: bool) -> Self
left(fade: bool) -> Self
right(fade: bool) -> Self
band(band: f32) -> Self
fit_height() -> Self
child(child: impl IntoElement) -> Self

Example · scroll-fade

fn scroll_fade(window: &mut Window, cx: &mut App) -> AnyElement {
    let theme = cx.theme().clone();
    crate::layout::scroll_to(
        "scene.fade.output",
        gpui::point(px(0.0), px(120.0)),
        window,
        cx,
    );
    stack(&theme)
        .w(px(480.0))
        .child(caption(&theme, "Scrolled: content runs past both ends"))
        .child(
            div()
                .surface(&theme, Surface::Panel)
                .radius(&theme, Radius::Card)
                .overflow_hidden()
                .child(
                    ScrollFade::new("scene.fade.scrolled")
                        .edges(FadeEdges::vertical())
                        .fit_height()
                        .child(
                            ScrollArea::new("scene.fade.output")
                                .label("Run output")
                                .vertical()
                                .height(200.0)
                                .child(filler(&theme, "Output", 20)),
                        ),
                ),
        )
        // Nothing is hidden here, so no edge fades and the caller says so.
        .child(caption(&theme, "Nothing hidden: no edge fades"))
        .child(
            div()
                .surface(&theme, Surface::Panel)
                .radius(&theme, Radius::Card)
                .overflow_hidden()
                .child(
                    ScrollFade::new("scene.fade.settled").fit_height().child(
                        ScrollArea::new("scene.fade.summary")
                            .label("Summary")
                            .vertical()
                            .height(200.0)
                            .child(filler(&theme, "Summary", 7)),
                    ),
                ),
        )
        .into_any_element()
}

Source: crates/gpui-kit/src/layout/scroll_fade.rs