Refractv0.1.0 · cargo add refract

Documentation / Fundamentals

Layout & styling

Build layouts with stacks, then make them yours with composable modifiers.

Compose with stacks

Use v_stack for a vertical layout and h_stack for a horizontal layout. Their gap controls space between children. Dimensions use logical pixels; padding is nonnegative. Refract does not have a margin API.

layout.rs
v_stack()
    .gap(16.0)
    .child(text("Hello, Refract").font_size(28.0))
    .child(text("A shared view. A different host."))
    .padding(24.0)
    .background(Color::rgb(15, 30, 52))
    .foreground(Color::WHITE)
    .radius(12.0)

Modifier order matters

Padding and frames introduce layout wrappers. Paint and typography setters act on the current outer element, so the order in which you apply them changes the result.

Use fill_width and fill_height when the parent offers room to grow. Use width, height, and max_width to constrain the layout. Text can set its own font size, family, weight, alignment, and line height.

Modifiers
// The background includes the padding.
text("Room to breathe")
    .padding(24.0)
    .background(Color::rgb(22, 40, 64))
    .radius(8.0)

Add depth with paint

Both adapters support linear gradients and a single outer box shadow. Gradient angles follow CSS: 0° points up, 90° right, and 180° down. Shadows do not affect layout, hit testing, or scroll extents.

Paint modifiers
text("A cooler shade")
    .padding(24.0)
    .background_gradient(LinearGradient::new(
        140.0,
        Color::rgb(44, 87, 145),
        Color::rgb(16, 34, 62),
    ))
    .foreground(Color::WHITE)
    .radius(12.0)
    .shadow(BoxShadow::new(
        0.0, 4.0, 20.0, Color(8, 20, 40, 40),
    ))
i

Radial, conic, and repeating gradients are not implemented. Shadows do not yet support inset, spread, or multiple layers.