Struct Sides

Source

pub struct Sides {
    pub left: f32,
    pub right: f32,
    pub top: f32,
    pub bottom: f32,
}

Expand description

Per-side padding/inset values.

Fields§

§left: f32§right: f32§top: f32§bottom: f32

Implementations§

Source §

impl Sides

Source

pub const fn all(v: f32) -> Self

Source

pub const fn xy(x: f32, y: f32) -> Self

Examples found in repository ?

examples/scrollbar.rs (line 28)

20fn list_rows() -> Vec<El> {
21    (0..40)
22        .map(|i| {
23            row([
24                text(format!("{i:02}.")).mono().muted(),
25                text(format!("scrollable list item {i}")),
26            ])
27            .gap(tokens::SPACE_2)
28            .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_1))
29            .height(Size::Fixed(28.0))
30            .align(Align::Center)
31        })
32        .collect()
33}
34
35fn fixture() -> El {
36    column([
37        h2("Scrollbar"),
38        text("scroll() and virtual_list() show a draggable thumb by default.").muted(),
39        row([
40            // 1) scroll() — default-on scrollbar.
41            column([
42                text("scroll() — default").bold(),
43                scroll(list_rows())
44                    .height(Size::Fixed(240.0))
45                    .padding(tokens::SPACE_2)
46                    .stroke(tokens::BORDER)
47                    .stroke_width(1.0)
48                    .radius(tokens::RADIUS_MD),
49            ])
50            .gap(tokens::SPACE_2)
51            .width(Size::Fill(1.0))
52            .height(Size::Hug),
53            // 2) virtual_list — thumb scales to content size.
54            column([
55                text("virtual_list(200, 28)").bold(),
56                virtual_list(200, 28.0, |i| {
57                    row([
58                        text(format!("{i:03}")).mono().muted(),
59                        text(format!("row {i}")),
60                    ])
61                    .gap(tokens::SPACE_2)
62                    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_1))
63                    .height(Size::Fixed(28.0))
64                    .align(Align::Center)
65                })
66                .height(Size::Fixed(240.0))
67                .padding(tokens::SPACE_2)
68                .stroke(tokens::BORDER)
69                .stroke_width(1.0)
70                .radius(tokens::RADIUS_MD),
71            ])
72            .gap(tokens::SPACE_2)
73            .width(Size::Fill(1.0))
74            .height(Size::Hug),
75            // 3) Opt-out: same content, no thumb.
76            column([
77                text("scroll().no_scrollbar()").bold(),
78                scroll(list_rows())
79                    .no_scrollbar()
80                    .height(Size::Fixed(240.0))
81                    .padding(tokens::SPACE_2)
82                    .stroke(tokens::BORDER)
83                    .stroke_width(1.0)
84                    .radius(tokens::RADIUS_MD),
85            ])
86            .gap(tokens::SPACE_2)
87            .width(Size::Fill(1.0))
88            .height(Size::Hug),
89        ])
90        .gap(tokens::SPACE_4)
91        .width(Size::Fill(1.0)),
92    ])
93    .gap(tokens::SPACE_4)
94    .padding(tokens::SPACE_7)
95}

More examples

Hide additional examples

examples/custom_paint.rs (line 78)

68fn build_row(c: &FakeCommit, idx: usize, selected: bool) -> El {
69    row([
70        graph_cell(c.lane, selected),
71        text(c.sha).mono().muted(),
72        text(c.subject),
73        spacer(),
74        text(format!("{} · {}", c.author, c.when)).muted(),
75    ])
76    .key(format!("commit-{idx}"))
77    .gap(tokens::SPACE_3)
78    .padding(Sides::xy(tokens::SPACE_2, 0.0))
79    .height(Size::Fixed(ROW_HEIGHT))
80    .align(Align::Center)
81}

examples/virtual_list.rs (line 35)

18fn build_row(i: usize) -> El {
19    let badge_el = match i % 5 {
20        0 => badge("info").muted(),
21        1 => badge("warn").warning(),
22        2 => badge("ok").success(),
23        3 => badge("err").destructive(),
24        _ => spacer(),
25    };
26    row([
27        text(format!("#{i:05}")).mono(),
28        spacer(),
29        text(format!("entry {i}")),
30        spacer(),
31        badge_el,
32    ])
33    .key(format!("row-{i}"))
34    .gap(tokens::SPACE_3)
35    .padding(Sides::xy(tokens::SPACE_3, tokens::SPACE_2))
36    .height(Size::Fixed(ROW_HEIGHT))
37}

examples/polish_calibration.rs (line 82)

67fn nav_item(icon: &'static str, label: &'static str, selected: bool) -> El {
68    let mut item = row([
69        icon_cell(icon),
70        text(label)
71            .font_weight(FontWeight::Medium)
72            .ellipsis()
73            .width(Size::Fill(1.0)),
74    ])
75    .key(if selected {
76        "metric:sidebar.nav.row".to_string()
77    } else {
78        format!("nav-{label}")
79    })
80    .metrics_role(MetricsRole::ListItem)
81    .gap(tokens::SPACE_3)
82    .padding(Sides::xy(tokens::SPACE_2, 0.0))
83    .height(Size::Fixed(40.0))
84    .align(Align::Center)
85    .focusable();
86
87    if selected {
88        item = item.current();
89    }
90
91    item
92}

examples/scroll_list.rs (line 26)

15fn scroll_list_fixture() -> El {
16    let rows: Vec<El> = (0..20)
17        .map(|i| {
18            row([
19                badge(format!("#{i}")).info(),
20                text(format!("Notification {i}")).bold(),
21                spacer(),
22                text(format!("{}m ago", i + 1)).muted(),
23            ])
24            .gap(tokens::SPACE_2)
25            .height(Size::Fixed(44.0))
26            .padding(Sides::xy(tokens::SPACE_3, tokens::SPACE_2))
27        })
28        .collect();
29
30    let list = scroll(rows)
31        .key("notifications")
32        .height(Size::Fixed(420.0))
33        .padding(tokens::SPACE_2);
34
35    column([
36        h2("Notifications"),
37        text("Roll the wheel inside the panel to scroll. The content is taller than the viewport.")
38            .muted(),
39        list,
40    ])
41    .gap(tokens::SPACE_4)
42    .padding(tokens::SPACE_7)
43}

examples/palette_demo.rs (line 305)

282fn token_chip(token: TokenDef, palette: &Palette) -> El {
283    let resolved = palette.resolve(token.color);
284    row([
285        El::new(Kind::Custom("palette-swatch"))
286            .at(file!(), line!())
287            .fill(token.color)
288            .stroke(tokens::BORDER)
289            .radius(tokens::RADIUS_SM)
290            .width(Size::Fixed(42.0))
291            .height(Size::Fixed(34.0)),
292        column([
293            text(token.name)
294                .label()
295                .ellipsis()
296                .nowrap_text()
297                .width(Size::Fill(1.0)),
298            mono(rgba_label(resolved)).caption().muted(),
299        ])
300        .gap(0.0)
301        .width(Size::Fill(1.0))
302        .height(Size::Hug),
303    ])
304    .gap(tokens::SPACE_2)
305    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_2))
306    .align(Align::Center)
307    .fill(tokens::CARD)
308    .stroke(tokens::BORDER)
309    .radius(tokens::RADIUS_MD)
310    .width(Size::Fill(1.0))
311    .height(Size::Fixed(54.0))
312}