Struct freya::prelude::dioxus_elements::text

pub struct text;

text element is simply a text span used for the paragraph element.

Implementations

impl text

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() -> Element {
    rsx!(
        label {
            color: "green",
            "Hello, World!"
        }
    )
}

Another example showing inheritance:

fn app() -> Element {
    rsx!(
        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() -> Element {
    rsx!(
        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() -> Element {
    rsx!(
        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() -> 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!"
        }
    )
}

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

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

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

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

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

Specify the shadow of a text.

Syntax: <x> <y> <size> <color>

Example

fn app() -> Element {
    rsx!(
        label {
            text_shadow: "0 18 12 rgb(0, 0, 0)",
            "Hello, World!"
        }
    )
}

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

Specify the decoration in a text.

Accepted values:

• underline
• line-through
• overline

Example

fn app() -> Element {
    rsx!(
        label {
            decoration: "line-through",
            "Hello, World!"
        }
    )
}

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

Specify the decoration’s style in a text.

Accepted values:

• solid (default)
• double
• dotted
• dashed
• wavy

Example

fn app() -> Element {
    rsx!(
        label {
            decoration: "line-through",
            decoration_style: "dotted",
            "Hello, World!"
        }
    )
}

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

Specify the decoration’s color in a text.

You can learn about the syntax of this attribute in Color Syntax.

Example

fn app() -> Element {
    rsx!(
        label {
            decoration: "line-through",
            decoration_color: "orange",
            "Hello, World!"
        }
    )
}

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

Specify the spacing between characters of the text.

Example

fn app() -> Element {
    rsx!(
        label {
            letter_spacing: "10",
            "Hello, World!"
        }
    )
}

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

Specify the spacing between words of the text.

Example

fn app() -> Element {
    rsx!(
        label {
            word_spacing: "10",
            "Hello, World!"
        }
    )
}