Module freya::elements_docs::size_unit

Size Units

Auto

Will use it’s inner children as size, so in this case, the rect width will be equivalent to the width of label:

fn app() -> Element {
    rsx!(
        rect {
            width: "auto",
            height: "33",
            label {
                "hello!"
            }
        }
    )
}

Logical pixels

fn app() -> Element {
    rsx!(rect {
        width: "50",
        height: "33"
    })
}

Parent percentage

Relative percentage to the parent equivalent value.

fn app() -> Element {
    rsx!(rect {
        width: "50%",  // Half the parent
        height: "75%"  // 3/4 the parent
    })
}

calc()

For more complex logic you can use the calc() function.

fn app() -> Element {
    rsx!(rect {
        width: "calc(33% - 60 + 15%)", // (1/3 of the parent minus 60) plus 15% of parent
        height: "calc(100% - 10)"      // 100% of the parent minus 10
    })
}

fill

Use the remaining available space from the parent area:

fn app() -> Element {
    rsx!(
        rect {
            width: "100%",
            height: "100%",
            rect {
                height: "200",
                width: "100%",
            }
            rect {
                height: "fill", // This is the same as calc(100% - 200)
                width: "100%",
            }
        }
    )
}

fill-min

Will have the same size of the biggest sibling element inside a container who has content: fit. For an example, see content.

Viewport percentage

Relative percentage to the viewport (Window) equivalent value.

fn app() -> Element {
    rsx!(
        rect {
            width: "200",
            height: "200",
            rect {
                height: "25v", // 25% of the window height no matter what height the parent has.
                width: "100%",
            }
        }
    )
}

Flex Factor

When being a children of an element with content: flex you may change the growth factor of the size attributes.

fn app() -> Element {
    rsx!(
        rect {
            content: "flex",
            width: "200",
            height: "200",
            rect {
                height: "flex(1)",
                width: "100%",
                background: "red"
            }
            rect {
                height: "flex(3)",
                width: "100%",
                background: "blue"
            }
        }
    )
}