Module rect

Expand description

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!"}
        }
    )
}

Constants§

a11y_access_key
a11y_author_id
a11y_auto_complete
a11y_auto_focus
a11y_busy
a11y_color_value
a11y_column_count
a11y_column_index
a11y_column_index_text
a11y_column_span
a11y_current
a11y_default_action_verb
a11y_description
a11y_disabled
a11y_expanded
a11y_focusable
a11y_has_popup
a11y_hidden
a11y_hovered
a11y_id
a11y_invalid
a11y_is_grammar_error
a11y_is_search_match
a11y_is_spelling_error
a11y_is_suggestion
a11y_keyboard_shortcut
a11y_language
a11y_level
a11y_linked
a11y_list_style
a11y_live
a11y_live_atomic
a11y_max_numeric_value
a11y_member_of
a11y_min_numeric_value
a11y_modal
a11y_multiselectable
a11y_name
a11y_numeric_value
a11y_numeric_value_jump
a11y_numeric_value_step
a11y_orientation
a11y_placeholder
a11y_position_in_set
a11y_read_only
a11y_required
a11y_role
a11y_role_description
a11y_row_count
a11y_row_index
a11y_row_index_text
a11y_row_span
a11y_scroll_x
a11y_scroll_x_max
a11y_scroll_x_min
a11y_scroll_y
a11y_scroll_y_max
a11y_scroll_y_min
a11y_selected
a11y_size_of_set
a11y_sort_direction
a11y_state_description
a11y_toggled
a11y_tooltip
a11y_touch_transparent
a11y_url
a11y_value
a11y_vertical_offset
a11y_visited
background: Specify a color as the background of an element.
background_opacity: Specify the opacity of an element’s background color.
border: Specify borders for an element.
canvas_reference: Attach a canvas reference created from the use_canvas or use_canvas_with_deps hooks to enable drawing to an element.
color: The color attribute lets you specify the color of the text.
content: Specify how you want the automatic (e.g width: auto) bounds in the cross axis to be constrained for the inner elements.
corner_radius: Round the corners of an element by a specified radius.
corner_smoothing: Control the smoothing effect for rounded corners to create a “squircle” effect.
cross_align: cross_align
decoration: Specify the decoration in a text.
decoration_color: Specify the decoration’s color in a text.
decoration_style: Specify the decoration’s style in a text.
direction: Control how the inner elements stack.
font_family: With the font_family you can specify what font you want to use for the inner text.
font_size: You can specify the size of the text using font_size.
font_style: You can choose a style for a text using the font_style attribute.
font_weight: You can choose a weight for text using the font_weight attribute.
font_width: You can choose a width for a text using the font_width attribute.
height: Specify the height for the given element.
layer: Controls the stacking order of elements on the z-axis.
letter_spacing: Specify the spacing between characters of the text.
line_height: line_height
main_align: main_align
margin: Specify the margin of an element. You can do so by four different ways, just like in CSS.
max_height: Specify a maximum height for the given element.
max_lines: Determines the amount of lines that the text can have. It has unlimited lines by default.
max_width: Specify a maximum width for the given element.
min_height: Specify a minimum height for the given element. This can be useful if you use it alongside a percentage for the target size.
min_width: Specify a minimum width for the given element. This can be useful if you use it alongside a percentage for the target size.
offset_x: Moves the content inside of the container horizontally by the specified pixel amount. This attribute only supports pixels.
offset_y: Moves the content inside of the container vertically by the specified pixel amount. This attribute only supports pixels.
opacity: Specify the opacity for this element.
overflow: Specify how overflow should be handled.
padding: Specify the inner paddings of an element. You can do so by four different ways, just like in CSS.
position: Specify how you want the element to be positioned inside it’s parent area.
position_bottom: Specify the bottom position of an element when using position: "absolute" or position: "global". This supports pixels only.
position_left: Specify the left position of an element when using position: "absolute" or position: "global". This supports pixels only.
position_right: Specify the right position of an element when using position: "absolute" or position: "global". This supports pixels only.
position_top: Specify the top position of an element when using position: "absolute" or position: "global". This supports pixels only.
reference: Attach a reference to an element to track its layout and metadata.
rotate: Specify the rotation for this element.
scale: Specify the scale for this element.
shadow: Draw a shadow of the element.
spacing: 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.
text_align: You can change the alignment of the text using the text_align attribute.
text_height: Specify the text height behavior.
text_overflow: 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.
text_shadow: Specify the shadow of a text.
visible_height: Specify the percentage of height to be visible.
visible_width: Specify the percentage of width to be visible.
width: Specify the width for the given element.
word_spacing: Specify the spacing between words of the text.

Module rect

Module rect Copy item path

§Example

Constants§

Module rect