Struct freya_elements::elements::rect

pub struct rect;

rect is a generic element that acts as a container for other elements.

You can specify things like width, padding or even in what direction the inner elements are stacked.

Example:

fn app(cx: Scope) -> Element {
    render!(
        rect {
            direction: "vertical",
            label { "Hi!" }
            label { "Hi again!"}
        }
    )
}

Implementations

impl rect

pub const padding: AttributeDescription = _

padding

Specify the inner paddings of an element. You can do so by three different ways, just like in CSS.

Example:

fn app(cx: Scope) -> Element {
    render!(
        rect {
            padding: "25" // 25 in all sides
            padding: "100 50" // 100 in top and bottom, and 50 in left and right
            padding: "5 7 3 9" // 5 in top, 7 in right, 3 in bottom and 9 in left
        }
    )
}

pub const height: AttributeDescription = _

width and height

Specify the width and height for the given element.

See syntax in Size Units.

Example:

fn app(cx: Scope) -> Element {
    render!(
        rect {
            background: "red",
            width: "15",
            height: "50",
        }
    )
}

pub const width: AttributeDescription = _

pub const min_height: AttributeDescription = _

min_width & min_height

rect supports specifying a minimum width and height, this can be useful if you use it alongside a percentage for the target size.

See syntax for Size Units.

Usage

fn app(cx: Scope) -> Element {
    render!(
        rect {
            background: "red",
            min_width: "100",
            min_height: "100",
            width: "50%",
            height: "50%",
        }
    )
}

pub const min_width: AttributeDescription = _

pub const max_height: AttributeDescription = _

max_width & max_height

rect supports specifying a maximum width and height.

See syntax for Size Units.

Usage

fn app(cx: Scope) -> Element {
    render!(
        rect {
            background: "red",
            max_width: "50%",
            max_height: "50%",
            width: "500",
            height: "500",
        }
    )
}

pub const max_width: AttributeDescription = _

pub const background: AttributeDescription = _

background

Specify a color as the background of an element.

You can learn about the syntax of this attribute here.

Example:

fn app(cx: Scope) -> Element {
    render!(
        rect {
            background: "red"
        }
    )
}

pub const border: AttributeDescription = _

border

You can add a border to an element using the border and border_align attributes.

• border syntax: [width] <solid | none> [color].
• border_align syntax: <inner | outer | center>.

Example:

fn app(cx: Scope) -> Element {
    render!(
        rect {
            border: "2 solid black",
            border_align: "inner"
        }
    )
}

pub const border_align: AttributeDescription = _

pub const direction: AttributeDescription = _

direction

Control how the inner elements will be stacked, possible values are vertical (default) and horizontal.

Usage

fn app(cx: Scope) -> Element {
    render!(
        rect {
            width: "100%",
            height: "100%",
            direction: "vertical",
            rect {
                width: "100%",
                height: "50%",
                background: "red"
            },
            rect {
                width: "100%",
                height: "50%",
                background: "green"
            }
        }
    )
}

pub const shadow: AttributeDescription = _

shadow

Draw a shadow outside of the element.

Syntax: <x> <y> <intensity> <size> <color>

Example:

fn app(cx: Scope) -> Element {
    render!(
        rect {
            shadow: "0 0 25 2 rgb(0, 0, 0, 120)"
        }
    )
}

pub const corner_radius: AttributeDescription = _

corner_radius & corner_smoothing

The corner_radius attribute let’s you smooth the corners of the element, with corner_smoothing you can give a “squircle” effect.

Example:

fn app(cx: Scope) -> Element {
    render!(
        rect {
            corner_radius: "10",
            corner_smoothing: "75%"
        }
    )
}

pub const corner_smoothing: AttributeDescription = _

pub const color: AttributeDescription = _

color

The color attribute let’s you specify the color of the text.

You can learn about the syntax of this attribute in Color Syntax.

Example:

fn app(cx: Scope) -> Element {
    render!(
        label {
            color: "green",
            "Hello, World!"
        }
    )
}

Another example showing inheritance:

fn app(cx: Scope) -> Element {
    render!(
        rect {
            color: "blue",
            label {
                "Hello, World!"
            }
        }
    )
}

pub const font_size: AttributeDescription = _

font_size

You can specify the size of the text using font_size.

Example:

fn app(cx: Scope) -> Element {
    render!(
        label {
            font_size: "50",
            "Hellooooo!"
        }
    )
}

pub const font_family: AttributeDescription = _

font_family

With the font_family you can specify what font do you want to use for the inner text.

Limitation: Only fonts installed in the system are supported for now.

Example:

fn app(cx: Scope) -> Element {
    render!(
        label {
            font_family: "Inter",
            "Hello, World!"
        }
    )
}

pub const font_style: AttributeDescription = _

font_style

You can choose a style for a text using the font_style attribute.

Accepted values: upright (default), italic and oblique.

Example:

fn app(cx: Scope) -> Element {
    render!(
        label {
            font_style: "italic",
            "Hello, World!"
        }
    )
}

pub const font_weight: AttributeDescription = _

font_weight

You can choose a weight for a text using the font_weight attribute.

Accepted values:

• invisible
• thin
• extra-light
• light
• normal (default)
• medium
• semi-bold
• bold
• extra-bold
• black
• extra-black
• 50
• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900
• 950

Example:

fn app(cx: Scope) -> Element {
    render!(
        label {
            font_weight: "bold",
            "Hello, World!"
        }
    )
}

pub const font_width: AttributeDescription = _

font_width

You can choose a width for a text using the font_width attribute.

Accepted values:

• ultra-condensed
• extra-condensed
• condensed
• normal (default)
• semi-expanded
• expanded
• extra-expanded
• ultra-expanded

Example:

fn app(cx: Scope) -> Element {
    render!(
        label {
            font_weight: "bold",
            "Hello, World!"
        }
    )
}

pub const main_align: AttributeDescription = _

main_align & cross_align

Control how the inner elements are positioned inside the element. You can combine it with the direction attribute to create complex flows.

Possible values for both attributes are:

• start (default): At the begining of the axis
• center: At the center of the axis
• end: At the end of the axis

When using the vertical direction, main_align will be the Y axis and cross_align will be the X axis. But when using the horizontal direction, the main_align will be the X axis and the cross_align will be the Y axis.

Example on how to center the inner elements in both axis:

fn app(cx: Scope) -> Element {
    render!(
        rect {
            width: "100%",
            height: "100%",
            main_align: "center",
            cross_align: "center",
            rect {
                width: "50%",
                height: "50%",
                background: "red"
            },
        }
    )
}

pub const cross_align: AttributeDescription = _

pub const text_align: AttributeDescription = _

text_align

You can change the alignment of the text using the text_align attribute.

Accepted values: center, end, justify, left, right, start

Example

fn app(cx: Scope) -> Element {
    render!(
        label {
            text_align: "right",
            "Hello, World!"
        }
    )
}

pub const rotate: AttributeDescription = _

rotate

The rotate attribute let’s you rotate an element.

Example:

fn app(cx: Scope) -> Element {
    render!(
        label {
            rotate: "180deg",
            "Hello, World!"
        }
    )
}

Compatible elements: all except text.

pub const overflow: AttributeDescription = _

overflow

Specify how overflow should be handled.

Accepted values: clip or none.

Example:

fn app(cx: Scope) -> Element {
    render!(
        rect {
            overflow: "clip"
            width: "100",
            height: "100%",
            rect {
                width: "500",
                height: "100%",
                background: "red",
            }
        }
    )
}

pub const margin: AttributeDescription = _

margin

Specify the margin of an element. You can do so by three different ways, just like in CSS.

fn app(cx: Scope) -> Element {
    render!(
        rect {
            margin: "25" // 25 in all sides
            margin: "100 50" // 100 in top and bottom, and 50 in left and right
            margin: "5 7 3 9" 5 // in top, 7 in right, 3 in bottom and 9 in left
        }
    )
}

pub const position: AttributeDescription = _

position

Specify how you want the element to be positioned inside it’s parent Area

Possible values for position:

• stacked (default)
• absolute

When using the absolute mode, you can also combine it with the following attributes:

• position_top
• position_right
• position_bottom
• position_left

These only support pixels.

Example:

fn app(cx: Scope) -> Element {
    render!(
        rect {
            width: "100%",
            height: "100%",
            rect {
                position: "absolute",
                position_bottom: "15",
                position_right: "15",
                background: "black",
                width: "100",
                height: "100",
            }
        }
    )
}

pub const position_top: AttributeDescription = _

pub const position_right: AttributeDescription = _

pub const position_bottom: AttributeDescription = _

pub const position_left: AttributeDescription = _

pub const opacity: AttributeDescription = _

opacity

Specify the opacity of an element and all its desdendants.

Example:

fn app(cx: Scope) -> Element {
    render!(
        rect {
            opacity: "0.5", // 50% visible
            label {
                "I am fading!"
            }
        }
    )
}

pub const name: AttributeDescription = _

pub const focusable: AttributeDescription = _

pub const role: AttributeDescription = _

pub const focus_id: AttributeDescription = _

pub const alt: AttributeDescription = _

pub const canvas_reference: AttributeDescription = _

pub const layer: AttributeDescription = _

pub const offset_y: AttributeDescription = _

pub const offset_x: AttributeDescription = _

pub const reference: AttributeDescription = _

pub const cursor_reference: AttributeDescription = _