Struct freya_elements::elements::paragraph

pub struct paragraph;

paragraph element let’s you build texts with different styles.

This used used with the text element.

fn app(cx: Scope) -> Element {
    render!(
        paragraph {
            text {
                font_size: "15",
                "Hello, "
            }
            text {
                font_size: "30",
                "World!"
            }
        }
    )
}

Implementations

impl paragraph

pub const height: AttributeDescription = _

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: AttributeDescription = _

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(cx: Scope) -> Element {
    render!(
        rect {
            background: "red",
            min_width: "100",
            min_height: "100",
            width: "50%",
            height: "50%",
        }
    )
}

pub const min_width: AttributeDescription = _

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(cx: Scope) -> Element {
    render!(
        rect {
            background: "red",
            max_width: "50%",
            max_height: "50%",
            width: "500",
            height: "500",
        }
    )
}

pub const max_width: AttributeDescription = _

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

pub const direction: AttributeDescription = _

pub const rotate: AttributeDescription = _

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 font_size: AttributeDescription = _

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

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

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

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

pub const line_height: AttributeDescription = _

line_height

Specify the height of the lines of the text.

Example

fn app(cx: Scope) -> Element {
    render!(
        label {
            line_height: "3",
            "Hello, World! \n Hello, again!"
        }
    )
}

pub const letter_spacing: AttributeDescription = _

Specify the spacing between characters of the text.

Example

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

pub const word_spacing: AttributeDescription = _

Specify the spacing between words of the text.

Example

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

pub const decoration: AttributeDescription = _

Specify the decoration in a text.

Accepted values:

• underline
• line-through
• overline

Example

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

pub const decoration_style: AttributeDescription = _

Specify the decoration’s style in a text.

Accepted values:

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

Example

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

pub const text_overflow: AttributeDescription = _

Specify the decoration’s color in a text.

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

Example

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

pub const overflow: AttributeDescription = _

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 focusable: AttributeDescription = _

pub const margin: AttributeDescription = _

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 opacity: AttributeDescription = _

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 layer: AttributeDescription = _

pub const cursor_index: AttributeDescription = _

pub const max_lines: AttributeDescription = _

pub const cursor_color: AttributeDescription = _

pub const cursor_mode: AttributeDescription = _

pub const cursor_id: AttributeDescription = _

pub const alt: AttributeDescription = _

pub const name: AttributeDescription = _

pub const role: AttributeDescription = _

pub const focus_id: AttributeDescription = _

pub const highlights: AttributeDescription = _

pub const highlight_color: AttributeDescription = _