GPUI Box GitHub

Components / layout

SplitTree builder

Draws a SplitLayout and reports what the typist asked to change.

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

use gpui_kit::layout::SplitTree;

Reviewed in split-tree.

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

Chain onto the value.

layout(layout: SplitLayout) -> Self
pane(id: impl Into<SharedString>, content: impl IntoElement) -> Self
on_change(handler: impl Fn(SplitChange, &mut Window, &mut App) + 'static) -> Self
Example · split-tree
fn split_tree(_window: &mut Window, cx: &mut App) -> AnyElement {
    let theme = cx.theme().clone();
    let layout = SplitLayout::horizontal(
        "workspace",
        0.26,
        SplitLayout::leaf(SplitPaneSpec::new("files").min_width(140.0)),
        SplitLayout::horizontal(
            "body",
            0.74,
            SplitLayout::vertical(
                "editing",
                0.6,
                SplitLayout::leaf(SplitPaneSpec::new("editor").min_height(90.0)),
                SplitLayout::leaf(SplitPaneSpec::new("terminal").min_height(70.0)),
            ),
            // A collapsed leaf is drawn at its rail, and the divider beside it
            // is not offered: a fixed extent has no ratio to trade.
            SplitLayout::leaf(SplitPaneSpec::new("outline").rail(40.0).collapsed(true)),
        ),
    );

    stack(&theme)
        .w(px(680.0))
        .child(
            div()
                .h(px(340.0))
                .surface(&theme, Surface::Panel)
                .radius(&theme, Radius::Card)
                .overflow_hidden()
                .child(
                    SplitTree::new("scene.tree.workspace")
                        .layout(layout)
                        // Each pane holds enough to reach the bottom of the
                        // room the tree gave it: a pane drawn half empty says
                        // the divider above it is in the wrong place, which is
                        // the one thing this scene is not about.
                        .pane("files", filler(&theme, "Files", 13))
                        .pane("editor", filler(&theme, "main.rs", 7))
                        .pane("terminal", filler(&theme, "Terminal", 4))
                        // The rail is narrower than any label, so the collapsed
                        // leaf is drawn as the room it still holds.
                        .pane("outline", div())
                        .on_change(|_, _, _| {}),
                ),
        )
        .child(caption(
            &theme,
            "A divider high in the tree stops where a leaf far below it would \
             run out of room.",
        ))
        .into_any_element()
}

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