Skip to main content

stack

Function stack 

Source
pub fn stack<I, E>(children: I) -> El
where I: IntoIterator<Item = E>, E: Into<El>,
Expand description

An overlay stack; children share the parent’s rect.

For modals, sheets, popovers, and tooltips reach for the named widget instead — dialog, sheet, popover, .tooltip(...). stack is the layered-visuals primitive (focus rings, custom badges painted over content) that those widgets compose against.

Examples found in repository?
examples/dashboard_01_calibration.rs (lines 442-444)
441fn table_action_cell() -> El {
442    stack([icon("more-horizontal")
443        .icon_size(tokens::ICON_SM)
444        .color(tokens::MUTED_FOREGROUND)])
445    .align(Align::Center)
446    .justify(Justify::Center)
447    .width(Size::Fixed(32.0))
448    .height(Size::Hug)
449}
More examples
Hide additional examples
examples/circular_layout.rs (line 74)
48fn fixture() -> El {
49    let centre = h2("Compass").center_text();
50    let dirs = [
51        ("North", "n"),
52        ("NE", "ne"),
53        ("East", "e"),
54        ("SE", "se"),
55        ("South", "s"),
56        ("SW", "sw"),
57        ("West", "w"),
58        ("NW", "nw"),
59    ];
60
61    let mut children: Vec<El> = vec![centre];
62    for (label, k) in dirs {
63        children.push(button(label).key(k).primary());
64    }
65
66    column([
67        h1("Custom layout — circular"),
68        paragraph(
69            "Eight buttons positioned on a circle by an author-supplied \
70             LayoutFn. Stock paint, automatic hover/press, and hit-test \
71             all keep working — only the rect distribution changed.",
72        )
73        .muted(),
74        stack(children)
75            .key("compass")
76            .layout(circular)
77            .width(Size::Fill(1.0))
78            .height(Size::Fixed(360.0)),
79    ])
80    .gap(tokens::SPACE_4)
81    .padding(tokens::SPACE_7)
82}
examples/modal.rs (lines 10-52)
9fn modal_fixture() -> El {
10    stack([
11        column([
12            h1("Account"),
13            titled_card(
14                "Profile",
15                [
16                    row([text("Email"), spacer(), text("user@example.com").muted()]),
17                    row([text("Plan"), spacer(), badge("Pro").info()]),
18                ],
19            ),
20            titled_card(
21                "Danger zone",
22                [row([
23                    column([
24                        text("Delete account").bold(),
25                        text("Remove this account and all associated data.")
26                            .muted()
27                            .small(),
28                    ])
29                    .gap(tokens::SPACE_1)
30                    .align(Align::Start)
31                    .width(Size::Hug),
32                    spacer(),
33                    button("Delete").destructive().key("open-delete"),
34                ])],
35            ),
36        ])
37        .gap(tokens::SPACE_4)
38        .padding(tokens::SPACE_7),
39        modal(
40            "delete-account",
41            "Delete account?",
42            [
43                text("Permanent action. Export data first.").muted(),
44                row([
45                    spacer(),
46                    button("Cancel").ghost().key("cancel-delete"),
47                    button("Delete").destructive().key("confirm-delete"),
48                ])
49                .gap(tokens::SPACE_2),
50            ],
51        ),
52    ])
53}