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_canvasoruse_canvas_with_depshooks to enable drawing to an element. - The
colorattribute 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_familyyou 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_styleattribute. - You can choose a weight for text using the
font_weightattribute. - You can choose a width for a text using the
font_widthattribute. - 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_alignattribute. - Specify the text height behavior.
- Determines how text is treated when it exceeds its
max_linescount. By default uses theclipmode, which will cut off any overflowing text, withellipsismode 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.