Styling & Layout

Fluent methods set layout, paint, typography, and interaction styles. Lengths are logical pixels.

#Style modifiers

div()
    .p(16.0)
    .gap(12.0)
    .bg(Color::rgb8(24, 24, 27))
    .text_color(Color::rgb8(250, 250, 250))

Presets such as flex_col, p_3, rounded_lg, and text_lg match the Go and TypeScript helpers. p_3 is 12 pixels. For custom values, use rounded(10.0), p(14.0), and w / h.

#Merging styles

Later calls override earlier ones for the same property. when applies a branch only if the condition is true:

div().p(12.0).when(self.selected, |style| style.bg(Color::rgb8(37, 99, 235)))

#Reusable styles

Write functions that take and return Element:

fn panel(child: impl IntoElement) -> Element {
    div().p_3().rounded_xl().bg(Color::rgb8(32, 36, 44)).child(child)
}

#Flexbox

Use flex, flex_col, flex_grow, alignment, and gap. Set min_w(0.0) or min_h(0.0) on flexible scroll children so they can shrink.

#Grid

Use grid plus track, placement, and span methods.

#Text and color

Font family, weight, size, wrapping, and selection apply to text. Colors accept Color::rgb8, Color::rgba8, and packed values.

#Interaction states

button()
    .bg(Color::rgb8(37, 99, 235))
    .hover(|style| style.bg(Color::rgb8(29, 78, 216)))
    .child("Save")

#Groups and named group hover

Name a group on an ancestor and use group_hover on descendants so they style together.