Skip to main content

smudge_widgets/
containers.rs

1//! Layout containers: the row, the column, the stack and the spacer.
2//!
3//! All four are [`Panel`]s, so they take every style builder the core
4//! defines. The containers only decide the defaults: which way their children
5//! flow, and for the stack, how its children are placed.
6
7use smudge_core::element::Element;
8use smudge_core::style::{Edges, Length, Position, Style};
9use smudge_core::widget::{Panel, panel};
10
11/// Creates a container that lays its children out left to right.
12///
13/// The gap between adjacent children starts at zero; [`Element::gap`] sets
14/// it.
15///
16/// ```
17/// use smudge_core::style::px;
18/// use smudge_widgets::{button, row};
19///
20/// let bar = row()
21///     .gap(smudge_core::geometry::Size {
22///         width: 8.0,
23///         height: 0.0,
24///     })
25///     .child(button("Undo"))
26///     .child(button("Redo").padding(px(8.0)));
27/// ```
28pub fn row() -> Element<Panel> {
29    panel().row()
30}
31
32/// Creates a container that lays its children out top to bottom.
33///
34/// The gap between adjacent children starts at zero; [`Element::gap`] sets
35/// it.
36pub fn column() -> Element<Panel> {
37    panel().column()
38}
39
40/// Creates a container whose children overlap.
41///
42/// Every child added to the stack is taken out of the flow and stretched to
43/// the stack's own bounds, so the children paint on top of each other in the
44/// order they were added and the last one covers the ones below it. Because
45/// the children do not take part in the flow, they do not size the stack: a
46/// stack sizes itself through its own style, such as a fixed
47/// [`Element::size`], or through children that stay in the flow.
48///
49/// ```
50/// use smudge_core::geometry::Color;
51/// use smudge_core::style::px;
52/// use smudge_widgets::stack;
53///
54/// let layered = stack()
55///     .size(smudge_core::geometry::Size {
56///         width: 100.0,
57///         height: 60.0,
58///     })
59///     .child(smudge_core::widget::panel().background(Color::WHITE))
60///     .child(smudge_core::widget::panel().background(Color::BLACK));
61/// ```
62pub fn stack() -> Element<Panel> {
63    panel().style_children(|style: &mut Style| {
64        style.layout.position = Position::Absolute;
65        style.layout.inset = Edges::all(Length::px(0.0));
66    })
67}
68
69/// Creates an empty box that takes the leftover space on the main axis.
70///
71/// Between two children of a [`row`](crate::row) it pushes them apart; inside
72/// a [`column`](crate::column) it fills the space below the content.
73pub fn spacer() -> Element<Panel> {
74    panel().grow(1.0)
75}