Struct freya_elements::elements::rect

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

Implementations§

source§

impl rect

source

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
        }
    )
}
source

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",
        }
    )
}
source

pub const width: AttributeDescription = _

source

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%",
        }
    )
}
source

pub const min_width: AttributeDescription = _

source

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",
        }
    )
}
source

pub const max_width: AttributeDescription = _

source

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

pub const border: AttributeDescription = _

§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() -> Element {
    rsx!(
        rect {
            border: "2 solid black",
            border_align: "inner"
        }
    )
}
source

pub const border_align: AttributeDescription = _

source

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

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

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%"
        }
    )
}
source

pub const corner_smoothing: AttributeDescription = _

source

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

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

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

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

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

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

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 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
  • 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-between (only for main_align): Distributed among the available space with the same size of margins in the sides and in between the elements.

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"
            },
        }
    )
}
source

pub const cross_align: AttributeDescription = _

source

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

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

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",
            }
        }
    )
}
source

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
        }
    )
}
source

pub const position: AttributeDescription = _

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() -> Element {
    rsx!(
        rect {
            width: "100%",
            height: "100%",
            rect {
                position: "absolute",
                position_bottom: "15",
                position_right: "15",
                background: "black",
                width: "100",
                height: "100",
            }
        }
    )
}
source

pub const position_top: AttributeDescription = _

source

pub const position_right: AttributeDescription = _

source

pub const position_bottom: AttributeDescription = _

source

pub const position_left: AttributeDescription = _

source

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

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.

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

§Example
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",
            }
        }
    )
}
source

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

pub const name: AttributeDescription = _

source

pub const focusable: AttributeDescription = _

source

pub const role: AttributeDescription = _

source

pub const focus_id: AttributeDescription = _

source

pub const alt: AttributeDescription = _

source

pub const canvas_reference: AttributeDescription = _

source

pub const layer: AttributeDescription = _

source

pub const offset_y: AttributeDescription = _

source

pub const offset_x: AttributeDescription = _

source

pub const reference: AttributeDescription = _

source

pub const cursor_reference: AttributeDescription = _

Auto Trait Implementations§

§

impl Freeze for rect

§

impl RefUnwindSafe for rect

§

impl Send for rect

§

impl Sync for rect

§

impl Unpin for rect

§

impl UnwindSafe for rect

Blanket Implementations§

source§

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

source§

fn type_id(&self) -> TypeId

Gets the TypeId of self. Read more
source§

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

source§

fn borrow(&self) -> &T

Immutably borrows from an owned value. Read more
source§

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

source§

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

Mutably borrows from an owned value. Read more
§

impl<T> Downcast for T
where 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 T
where T: Any + Send + Sync,

§

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

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

impl<T> From<T> for T

source§

fn from(t: T) -> T

Returns the argument unchanged.

§

impl<T> Instrument for T

§

fn instrument(self, span: Span) -> Instrumented<Self>

Instruments this type with the provided [Span], returning an Instrumented wrapper. Read more
§

fn in_current_span(self) -> Instrumented<Self>

Instruments this type with the current Span, returning an Instrumented wrapper. Read more
source§

impl<T, U> Into<U> for T
where U: From<T>,

source§

fn into(self) -> U

Calls U::from(self).

That is, this conversion is whatever the implementation of From<T> for U chooses to do.

source§

impl<T> IntoEither for T

source§

fn into_either(self, into_left: bool) -> Either<Self, Self>

Converts self into a Left variant of Either<Self, Self> if into_left is true. Converts self into a Right variant of Either<Self, Self> otherwise. Read more
source§

fn into_either_with<F>(self, into_left: F) -> Either<Self, Self>
where F: FnOnce(&Self) -> bool,

Converts self into a Left variant of Either<Self, Self> if into_left(&self) returns true. Converts self into a Right variant of Either<Self, Self> otherwise. Read more
§

impl<T> Pointable for T

§

const ALIGN: usize = _

The alignment of pointer.
§

type Init = T

The type for initializers.
§

unsafe fn init(init: <T as Pointable>::Init) -> usize

Initializes a with the given initializer. Read more
§

unsafe fn deref<'a>(ptr: usize) -> &'a T

Dereferences the given pointer. Read more
§

unsafe fn deref_mut<'a>(ptr: usize) -> &'a mut T

Mutably dereferences the given pointer. Read more
§

unsafe fn drop(ptr: usize)

Drops the object pointed to by the given pointer. Read more
§

impl<T, O> SuperFrom<T> for O
where O: From<T>,

§

fn super_from(input: T) -> O

Convert from a type to another type.
§

impl<T, O, M> SuperInto<O, M> for T
where O: SuperFrom<T, M>,

§

fn super_into(self) -> O

Convert from a type to another type.
source§

impl<T, U> TryFrom<U> for T
where U: Into<T>,

§

type Error = Infallible

The type returned in the event of a conversion error.
source§

fn try_from(value: U) -> Result<T, <T as TryFrom<U>>::Error>

Performs the conversion.
source§

impl<T, U> TryInto<U> for T
where U: TryFrom<T>,

§

type Error = <U as TryFrom<T>>::Error

The type returned in the event of a conversion error.
source§

fn try_into(self) -> Result<U, <U as TryFrom<T>>::Error>

Performs the conversion.
§

impl<T> WithSubscriber for T

§

fn with_subscriber<S>(self, subscriber: S) -> WithDispatch<Self>
where S: Into<Dispatch>,

Attaches the provided Subscriber to this type, returning a [WithDispatch] wrapper. Read more
§

fn with_current_subscriber(self) -> WithDispatch<Self>

Attaches the current default Subscriber to this type, returning a [WithDispatch] wrapper. Read more