rect() acts as a generic container to contain other elements inside, like a box. It’s the equivalent of view/div/container in other UI models.
Usage
use freya::prelude::*;
fn app() -> impl IntoElement {
rect()
.expanded()
.background((0, 255, 0))
.child(label().text("Hello"))
}
Builder Methods
Layout
Set the width of the rect.rect().width(100.0)
rect().width(Size::fill())
Set the height of the rect.rect().height(100.0)
rect().height(Size::fill())
Expand both width and height using Size::fill(). Set padding inside the rect.rect().padding(10.0)
rect().padding((10.0, 20.0))
Set margin outside the rect. Set the position type (absolute or relative).rect().position(Position::absolute())
Container & Content
Set the layout direction (horizontal or vertical).rect().direction(Direction::vertical())
rect().horizontal()
rect().vertical()
Set alignment along the main axis.rect().main_align(Alignment::center())
Set alignment along the cross axis.rect().cross_align(Alignment::center())
Center content both horizontally and vertically. Set spacing between children. Set the content behavior.rect().content(Content::flex())
Style
Set the background color.rect().background((255, 0, 0))
rect().background(Color::RED)
rect().background("#ff0000")
background_linear_gradient
Set a linear gradient background.rect().background_linear_gradient(
LinearGradient::new()
.add_stop(0.0, Color::RED)
.add_stop(1.0, Color::BLUE)
)
background_radial_gradient
Set a radial gradient background.
background_conic_gradient
Set a conic gradient background.
Add a border to the rect.rect().border(Border::all(Color::BLACK, 2.0))
Set corner radius for rounded corners.rect().corner_radius(10.0)
rect().rounded()
rect().rounded_lg()
Add a shadow effect.rect().shadow(Shadow::new((0.0, 4.0), 10.0, Color::BLACK.with_opacity(0.25)))
Effects
Set overflow behavior.rect().overflow(Overflow::clip())
Rotate the rect in degrees. Scale the rect.rect().scale(1.5)
rect().scale((1.5, 2.0))
Set opacity (0.0 to 1.0). Text Style (inherited by children)
Set the text color for child text elements.rect().color(Color::WHITE)
Set the font size for child text elements. Children
Add a child element.rect().child(label().text("Child"))
children
impl IntoIterator<Item = Element>
Add multiple children.rect().children(vec![
label().text("First").into_element(),
label().text("Second").into_element(),
])
Events
Handle press/click events.rect().on_press(|_| println!("Pressed!"))
on_mouse_down
EventHandler<MouseEventData>
Handle mouse down events.
on_mouse_up
EventHandler<MouseEventData>
Handle mouse up events.
on_mouse_move
EventHandler<MouseEventData>
Handle mouse move events.
Examples
Basic Container
rect()
.width(200.0)
.height(200.0)
.background(Color::BLUE)
.rounded()
Flexbox Layout
rect()
.expanded()
.vertical()
.spacing(10.0)
.padding(20.0)
.children(vec![
label().text("Item 1").into_element(),
label().text("Item 2").into_element(),
label().text("Item 3").into_element(),
])
Centered Content
rect()
.expanded()
.center()
.child(
label().text("Centered Text")
)
With Border and Shadow
rect()
.width(150.0)
.height(100.0)
.background(Color::WHITE)
.border(Border::all(Color::GRAY, 1.0))
.rounded_lg()
.shadow(Shadow::new(
(0.0, 4.0),
10.0,
Color::BLACK.with_opacity(0.1)
))