Struct 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() -> Element {
    rsx!(
        rect {
            direction: "vertical",
            label { "Hi!" }
            label { "Hi again!"}
        }
    )
}

Implementations

impl rect

pub const height: AttributeDescription

Specify the width and height for the given element.

See syntax in Size Units.

Example

fn app() -> Element {
    rsx!(
        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() -> Element {
    rsx!(
        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() -> Element {
    rsx!(
        rect {
            background: "red",
            max_width: "50%",
            max_height: "50%",
            width: "500",
            height: "500",
        }
    )
}

pub const max_width: AttributeDescription

pub const margin: AttributeDescription

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

Example

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

pub const padding: AttributeDescription

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

Example

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

pub const position: AttributeDescription

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

Accepted values:

• stacked (default)
• absolute (Floating element relative to the parent element)
• global (Floating element relative to the window)

When using the absolute or global modes, you can also combine them with the following attributes:

• position_top
• position_right
• position_bottom
• position_left

These only support pixels.

Example

fn app() -> Element {
    rsx!(
        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 layer: AttributeDescription

pub const direction: AttributeDescription

Control how the inner elements stack.

Accepted values:

• vertical (default)
• horizontal

Usage

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

pub const content: AttributeDescription

Specify how you want the automatic (e.g width: auto) bounds in the cross axis to be constrained for the inner elements.

Accepted values:

• normal (default): Uses parent bounds.
• fit: Uses parent bounds but later shrunks to the size of the biggest element inside.
• flex: Marks the container as flex container, children of this element will be able to use size/size(n) in their width and height attributes.

fit

The fit mode will allow the inner elements using width: fill-min to expand to the biggest element inside this element.

fn app() -> Element {
    rsx!(
        rect {
            content: "fit",
            height: "100%",
            rect {
                width: "fill-min", // Will have a width of 300px
                height: "25%",
                background: "red",
            }
            rect {
                width: "150",  // Will have a width of 150px
                height: "25%",
                background: "green",
            }
            rect {
                width: "fill-min",  // Will have a width of 300px
                height: "25%",
                background: "blue",
            }
            rect {
                width: "300",  // Biggest element, will have a width of 300px
                height: "25%",
                background: "black",
            }
        }
    )
}

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.

Accepted values for main_align:

• start (default): At the begining of the axis
• center: At the center of the axis
• end: At the end of the axis
• space-between(only for main_align): Distributed among the available space
• space-around (only for main_align): Distributed among the available space with small margins in the sides
• space-evenly (only for main_align): Distributed among the available space with the same size of margins in the sides and in between the elements.

Accepted values for cross_align:

• start (default): At the begining of the axis (same as in main_align)
• center: At the center of the axis (same as in main_align)
• end: At the end of the axis (same as in main_align)

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() -> Element {
    rsx!(
        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 spacing: AttributeDescription

Specify a space between the inner elements. Think it as a margin for every element but defined by its parent. It only applies to the side of the direction.

Example

fn app() -> Element {
    rsx!(
        rect {
            direction: "vertical",
            spacing: "20",
            // Not before
            rect {
                width: "100",
                height: "100",
                background: "red",
            }
            // There will be a space between these two elements of 20 pixels
            rect {
                width: "100",
                height: "100",
                background: "blue",
            }
            // Here as well
            rect {
                width: "100",
                height: "100",
                background: "green",
            }
            // But not after
        }
    )
}

pub const overflow: AttributeDescription

Specify how overflow should be handled.

Accepted values:

• clip
• none

Example

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

pub const offset_x: AttributeDescription

pub const offset_y: AttributeDescription

pub const background: AttributeDescription

Specify a color as the background of an element.

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

Example

fn app() -> Element {
    rsx!(
        rect {
            background: "red"
        }
    )
}

pub const border: AttributeDescription

border

You can add borders to an element using the border attribute.

• border syntax: [width] [width?] [width?] [width?] <inner | outer | center> [fill].

1-4 width values should be provided with the border attribute. Widths will be applied to different sides of a rect depending on the number of values provided:

• One value: all
• Two values: vertical, horizontal
• Three values: top horizontal bottom
• Four values: top right bottom left

Border alignment determines how the border is positioned relative to the element’s edge. Alignment can be inner, outer, or center.

Examples

A solid, black border with a width of 2 pixels on every side. Border is aligned to the inside of the rect’s edge.

fn app() -> Element {
    rsx!(
        rect {
            border: "2 inner black",
        }
    )
}

A solid, red border with different widths on each side. Border is aligned to the center of the rect’s edge.

fn app() -> Element {
    rsx!(
        rect {
            border: "1 2 3 4 center red",
        }
    )
}

Borders can take any valid fill type, including gradients.

fn app() -> Element {
    rsx!(
        rect {
            border: "1 inner linear-gradient(red, green, yellow 40%, blue)",
        }
    )
}

Similarly to the shadow attribute, multiple borders can be drawn on a single element when separated by a comma. Borders specified later in the list are drawn on top of previous ones.

fn app() -> Element {
    rsx!(
        rect {
            border: "6 outer red, 5 outer orange, 4 outer yellow, 3 outer green, 2 outer blue, 1 outer purple",
        }
    )
}

pub const shadow: AttributeDescription

Draw a shadow of the element.

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

Example

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

pub const corner_radius: AttributeDescription

corner_radius & corner_smoothing

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

Example

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

pub const corner_smoothing: AttributeDescription

pub const color: AttributeDescription

The color attribute lets you specify the color of the text.

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

Example

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

Another example showing inheritance:

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

pub const font_size: AttributeDescription

You can specify the size of the text using font_size.

Example

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

pub const font_family: AttributeDescription

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

Check out the custom font example to see how you can load your own fonts.

Example

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

pub const font_style: AttributeDescription

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

Accepted values:

• upright (default)
• italic
• oblique

Example

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

You can also specify multiple fonts in order of priority, if one is not found it will fallback to the next one.

Example:

fn app() -> Element {
    rsx!(
        label {
            font_family: "DoesntExist Font, Impact",
            "Hello, World!"
        }
    )
}

pub const font_weight: AttributeDescription

You can choose a weight for 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() -> Element {
    rsx!(
        label {
            font_weight: "bold",
            "Hello, bold World!"
        }
    )
}

pub const font_width: AttributeDescription

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

⚠️ Only fonts with variable widths will be affected.

Accepted values:

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

Example

fn app() -> Element {
    rsx!(
        label {
            font_width: "ultra-expanded",
            "Hello, wide World!"
        }
    )
}

pub const text_align: AttributeDescription

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

Accepted values:

• center
• end
• justify
• left (default)
• right
• start

Example

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

pub const line_height: AttributeDescription

line_height

Specify the height of the lines of the text.

Example

fn app() -> Element {
    rsx!(
        label {
            line_height: "3",
            "Hello, World! \n Hello, again!"
        }
    )
}

pub const text_shadow: AttributeDescription

Specify the shadow of a text.

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

Example

fn app() -> Element {
    rsx!(
        label {
            text_shadow: "0 18 12 rgb(0, 0, 0)",
            "Hello, World!"
        }
    )
}

pub const max_lines: AttributeDescription

Determines the amount of lines that the text can have. It has unlimited lines by default.

Example

fn app() -> Element {
    rsx!(
        label {
            "Hello, World! \n Hello, World! \n Hello, world!" // Will show all three lines
        }
        label {
            max_lines: "2",
            "Hello, World! \n Hello, World! \n Hello, world!" // Will only show two lines
        }
    )
}

pub const decoration: AttributeDescription

Specify the decoration in a text.

Accepted values:

• underline
• line-through
• overline

Example

fn app() -> Element {
    rsx!(
        label {
            decoration: "line-through",
            "Hello, World!"
        }
    )
}

pub const decoration_style: AttributeDescription

Specify the decoration’s style in a text.

Accepted values:

• solid (default)
• double
• dotted
• dashed
• wavy

Example

fn app() -> Element {
    rsx!(
        label {
            decoration: "line-through",
            decoration_style: "dotted",
            "Hello, World!"
        }
    )
}

pub const decoration_color: AttributeDescription

Specify the decoration’s color in a text.

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

Example

fn app() -> Element {
    rsx!(
        label {
            decoration: "line-through",
            decoration_color: "orange",
            "Hello, World!"
        }
    )
}

pub const text_overflow: AttributeDescription

Determines how text is treated when it exceeds its max_lines count. By default uses the clip mode, which will cut off any overflowing text, with ellipsis mode it will show ... at the end.

Accepted values:

• clip (default)
• ellipsis

Example

fn app() -> Element {
    rsx!(
        label {
            max_lines: "3",
            text_overflow: "ellipsis",
            "Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text"
        }
    )
}

pub const letter_spacing: AttributeDescription

Specify the spacing between characters of the text.

Example

fn app() -> Element {
    rsx!(
        label {
            letter_spacing: "10",
            "Hello, World!"
        }
    )
}

pub const word_spacing: AttributeDescription

Specify the spacing between words of the text.

Example

fn app() -> Element {
    rsx!(
        label {
            word_spacing: "10",
            "Hello, World!"
        }
    )
}

pub const text_height: AttributeDescription

Specify the text height behavior.

Accepted values:

• disable-all (default)
• all
• disable-first-ascent
• disable-least-ascent

Example

fn app() -> Element {
    rsx!(
        label {
            text_height: "disable-all",
            "Hello, World!"
        }
    )
}

pub const rotate: AttributeDescription

The rotate attribute let’s you rotate an element.

Compatible elements: all except text.

Example

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

pub const opacity: AttributeDescription

Specify the opacity of an element and all its descendants.

Example

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

pub const canvas_reference: AttributeDescription

pub const reference: AttributeDescription

pub const cursor_reference: AttributeDescription

pub const a11y_id: AttributeDescription

pub const a11y_focusable: AttributeDescription

pub const a11y_auto_focus: AttributeDescription

pub const a11y_name: AttributeDescription

pub const a11y_description: AttributeDescription

pub const a11y_value: AttributeDescription

pub const a11y_access_key: AttributeDescription

pub const a11y_author_id: AttributeDescription

pub const a11y_keyboard_shortcut: AttributeDescription

pub const a11y_language: AttributeDescription

pub const a11y_placeholder: AttributeDescription

pub const a11y_role_description: AttributeDescription

pub const a11y_state_description: AttributeDescription

pub const a11y_tooltip: AttributeDescription

pub const a11y_url: AttributeDescription

pub const a11y_row_index_text: AttributeDescription

pub const a11y_column_index_text: AttributeDescription

pub const a11y_scroll_x: AttributeDescription

pub const a11y_scroll_x_min: AttributeDescription

pub const a11y_scroll_x_max: AttributeDescription

pub const a11y_scroll_y: AttributeDescription

pub const a11y_scroll_y_min: AttributeDescription

pub const a11y_scroll_y_max: AttributeDescription

pub const a11y_numeric_value: AttributeDescription

pub const a11y_min_numeric_value: AttributeDescription

pub const a11y_max_numeric_value: AttributeDescription

pub const a11y_numeric_value_step: AttributeDescription

pub const a11y_numeric_value_jump: AttributeDescription

pub const a11y_row_count: AttributeDescription

pub const a11y_column_count: AttributeDescription

pub const a11y_row_index: AttributeDescription

pub const a11y_column_index: AttributeDescription

pub const a11y_row_span: AttributeDescription

pub const a11y_column_span: AttributeDescription

pub const a11y_level: AttributeDescription

pub const a11y_size_of_set: AttributeDescription

pub const a11y_position_in_set: AttributeDescription

pub const a11y_color_value: AttributeDescription

pub const a11y_expanded: AttributeDescription

pub const a11y_selected: AttributeDescription

pub const a11y_hovered: AttributeDescription

pub const a11y_hidden: AttributeDescription

pub const a11y_linked: AttributeDescription

pub const a11y_multiselectable: AttributeDescription

pub const a11y_required: AttributeDescription

pub const a11y_visited: AttributeDescription

pub const a11y_busy: AttributeDescription

pub const a11y_live_atomic: AttributeDescription

pub const a11y_modal: AttributeDescription

pub const a11y_touch_transparent: AttributeDescription

pub const a11y_read_only: AttributeDescription

pub const a11y_disabled: AttributeDescription

pub const a11y_is_spelling_error: AttributeDescription

pub const a11y_is_grammar_error: AttributeDescription

pub const a11y_is_search_match: AttributeDescription

pub const a11y_is_suggestion: AttributeDescription

pub const a11y_role: AttributeDescription

pub const a11y_invalid: AttributeDescription

pub const a11y_toggled: AttributeDescription

pub const a11y_live: AttributeDescription

pub const a11y_default_action_verb: AttributeDescription

pub const a11y_orientation: AttributeDescription

pub const a11y_sort_direction: AttributeDescription

pub const a11y_current: AttributeDescription

pub const a11y_auto_complete: AttributeDescription

pub const a11y_has_popup: AttributeDescription

pub const a11y_list_style: AttributeDescription

pub const a11y_vertical_offset: AttributeDescription