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}