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§
- Control the blur effect on this element’s background.
- Specify a color as the background of an element.
- Specify the opacity of an element’s background color.
- Control the blend mode of this element.
- Specify borders for an element.
- Attach a canvas reference created from the
use_canvas
oruse_canvas_with_deps
hooks to enable drawing to an element. - The
color
attribute lets you specify the color of the text. - Specify how you want the automatic (e.g
width: auto
) bounds in the cross axis to be constrained for the inner elements. - Round the corners of an element by a specified radius.
- Control the smoothing effect for rounded corners to create a “squircle” effect.
- cross_align
- Specify the decoration in a text.
- Specify the decoration’s color in a text.
- Specify the decoration’s style in a text.
- Control how the inner elements stack.
- With the
font_family
you can specify what font you want to use for the inner text. - You can specify the size of the text using
font_size
. - You can choose a style for a text using the
font_style
attribute. - You can choose a weight for text using the
font_weight
attribute. - You can choose a width for a text using the
font_width
attribute. - Specify the height for the given element.
- Controls the stacking order of elements on the z-axis.
- Specify the spacing between characters of the text.
- line_height
- main_align
- Specify the margin of an element. You can do so by four different ways, just like in CSS.
- Specify a maximum height for the given element.
- Determines the amount of lines that the text can have. It has unlimited lines by default.
- Specify a maximum width for the given element.
- Specify a minimum height for the given element. This can be useful if you use it alongside a percentage for the target size.
- Specify a minimum width for the given element. This can be useful if you use it alongside a percentage for the target size.
- Moves the content inside of the container horizontally by the specified pixel amount. This attribute only supports pixels.
- Moves the content inside of the container vertically by the specified pixel amount. This attribute only supports pixels.
- Specify the opacity for this element.
- Specify how overflow should be handled.
- Specify the inner paddings of an element. You can do so by four different ways, just like in CSS.
- Specify how you want the element to be positioned inside it’s parent area.
- Specify the bottom position of an element when using
position: "absolute"
orposition: "global"
. This supports pixels only. - Specify the left position of an element when using
position: "absolute"
orposition: "global"
. This supports pixels only. - Specify the right position of an element when using
position: "absolute"
orposition: "global"
. This supports pixels only. - Specify the top position of an element when using
position: "absolute"
orposition: "global"
. This supports pixels only. - Attach a reference to an element to track its layout and metadata.
- Specify the rotation for this element.
- Specify the scale for this element.
- Draw a shadow of the element.
- 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.
- You can change the alignment of the text using the
text_align
attribute. - Specify the text height behavior.
- Determines how text is treated when it exceeds its
max_lines
count. By default uses theclip
mode, which will cut off any overflowing text, withellipsis
mode it will show...
at the end. - Specify the shadow of a text.
- Specify the percentage of height to be visible.
- Specify the percentage of width to be visible.
- Specify the width for the given element.
- Specify the spacing between words of the text.