Struct freya::prelude::dioxus_elements::rect

pub struct 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(cx: Scope) -> Element {
    render!(
        rect {
            direction: "vertical",
            label { "Hi!" }
            label { "Hi again!"}
        }
    )
}

Implementations§

§

impl rect

pub const padding: (&'static str, Option<&'static str>, bool) = _

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: (&'static str, Option<&'static str>, bool) = _

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: (&'static str, Option<&'static str>, bool) = _

pub const min_height: (&'static str, Option<&'static str>, bool) = _

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: (&'static str, Option<&'static str>, bool) = _

pub const max_height: (&'static str, Option<&'static str>, bool) = _

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: (&'static str, Option<&'static str>, bool) = _

pub const background: (&'static str, Option<&'static str>, bool) = _

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: (&'static str, Option<&'static str>, bool) = _

border & border_align

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: (&'static str, Option<&'static str>, bool) = _

pub const direction: (&'static str, Option<&'static str>, bool) = _

Control how the inner elements stack.

Accepted values:

vertical (default)
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: (&'static str, Option<&'static str>, bool) = _

Draw a shadow 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: (&'static str, Option<&'static str>, bool) = _

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(cx: Scope) -> Element {
    render!(
        rect {
            corner_radius: "10",
            corner_smoothing: "75%"
        }
    )
}

pub const corner_smoothing: (&'static str, Option<&'static str>, bool) = _

pub const color: (&'static str, Option<&'static str>, bool) = _

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(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: (&'static str, Option<&'static str>, bool) = _

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: (&'static str, Option<&'static str>, bool) = _

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(cx: Scope) -> Element {
    render!(
        label {
            font_family: "Inter",
            "Hello, World!"
        }
    )
}

pub const font_style: (&'static str, Option<&'static str>, bool) = _

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

Accepted values:

upright (default)
italic
oblique

Example

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

pub const font_weight: (&'static str, Option<&'static str>, bool) = _

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(cx: Scope) -> Element {
    render!(
        label {
            font_weight: "bold",
            "Hello, bold World!"
        }
    )
}

pub const font_width: (&'static str, Option<&'static str>, bool) = _

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(cx: Scope) -> Element {
    render!(
        label {
            font_width: "ultra-expanded",
            "Hello, wide World!"
        }
    )
}

pub const main_align: (&'static str, Option<&'static str>, bool) = _

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 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: (&'static str, Option<&'static str>, bool) = _

pub const text_align: (&'static str, Option<&'static str>, bool) = _

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(cx: Scope) -> Element {
    render!(
        label {
            text_align: "right",
            "Hello, World!"
        }
    )
}

pub const rotate: (&'static str, Option<&'static str>, bool) = _

The rotate attribute let’s you rotate an element.

Compatible elements: all except text.

Example

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

pub const overflow: (&'static str, Option<&'static str>, bool) = _

Specify how overflow should be handled.

Accepted values:

clip
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: (&'static str, Option<&'static str>, bool) = _

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

Example

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: (&'static str, Option<&'static str>, bool) = _

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

Accepted values:

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: (&'static str, Option<&'static str>, bool) = _

pub const position_right: (&'static str, Option<&'static str>, bool) = _

pub const position_bottom: (&'static str, Option<&'static str>, bool) = _

pub const position_left: (&'static str, Option<&'static str>, bool) = _

pub const opacity: (&'static str, Option<&'static str>, bool) = _

Specify the opacity of an element and all its descendants.

Example

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

pub const name: (&'static str, Option<&'static str>, bool) = _

pub const focusable: (&'static str, Option<&'static str>, bool) = _

pub const role: (&'static str, Option<&'static str>, bool) = _

pub const focus_id: (&'static str, Option<&'static str>, bool) = _

pub const alt: (&'static str, Option<&'static str>, bool) = _

pub const canvas_reference: (&'static str, Option<&'static str>, bool) = _

pub const layer: (&'static str, Option<&'static str>, bool) = _

pub const offset_y: (&'static str, Option<&'static str>, bool) = _

pub const offset_x: (&'static str, Option<&'static str>, bool) = _

pub const reference: (&'static str, Option<&'static str>, bool) = _

pub const cursor_reference: (&'static str, Option<&'static str>, bool) = _

Auto Trait Implementations§

§

impl UnwindSafe for rect

Blanket Implementations§

source §

impl<T> Any for Twhere T: 'static + ?Sized,

source §

fn type_id(&self) -> TypeId

Gets the TypeId of self. Read more

source §

impl<T> Borrow<T> for Twhere T: ?Sized,

source §

fn borrow(&self) -> &T

Immutably borrows from an owned value. Read more

source §

impl<T> BorrowMut<T> for Twhere T: ?Sized,

source §

fn borrow_mut(&mut self) -> &mut T

Mutably borrows from an owned value. Read more

§

impl<T> Downcast for Twhere T: Any,

§

fn into_any(self: Box<T>) -> Box<dyn Any>

Convert Box<dyn Trait> (where Trait: Downcast) to Box<dyn Any>. Box<dyn Any> can then be further downcast into Box<ConcreteType> where ConcreteType implements Trait.

§

fn into_any_rc(self: Rc<T>) -> Rc<dyn Any>

Convert Rc<Trait> (where Trait: Downcast) to Rc<Any>. Rc<Any> can then be further downcast into Rc<ConcreteType> where ConcreteType implements Trait.

§

fn as_any(&self) -> &(dyn Any + 'static)

Convert &Trait (where Trait: Downcast) to &Any. This is needed since Rust cannot generate &Any’s vtable from &Trait’s.

§

fn as_any_mut(&mut self) -> &mut (dyn Any + 'static)

Convert &mut Trait (where Trait: Downcast) to &Any. This is needed since Rust cannot generate &mut Any’s vtable from &mut Trait’s.

§

impl<T> DowncastSync for Twhere T: Any + Send + Sync,

§

fn into_any_arc(self: Arc<T>) -> Arc<dyn Any + Send + Sync>

Convert Arc<Trait> (where Trait: Downcast) to Arc<Any>. Arc<Any> can then be further downcast into Arc<ConcreteType> where ConcreteType implements Trait.

source §