Struct freya_elements::elements::svg

pub struct svg;

svg element let’s you display SVG code.

For dynamic SVGs you may use dynamic_bytes.

Example

static FERRIS: &[u8] = include_bytes!("./ferris.svg");

fn app() -> Element {
    let ferris = static_bytes(FERRIS);
    rsx!(
        svg {
            svg_data: ferris,
            width: "100%", // You must specify size otherwhise it will default to 0
            height: "100%",
        }
    )
}

Implementations

impl svg

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

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

pub const max_width: AttributeDescription = _

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

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

pub const position_top: AttributeDescription = _

pub const position_right: AttributeDescription = _

pub const position_bottom: AttributeDescription = _

pub const position_left: AttributeDescription = _

pub const layer: AttributeDescription = _

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

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

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

pub const svg_data: AttributeDescription = _

pub const svg_content: AttributeDescription = _

pub const fill: AttributeDescription = _

The fill and stroke attributes allows you to specify the fill or stroke color for the svg.

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

Example

fn app() -> Element {
    let svg_content = include_str!("../../../examples/settings.svg");

    rsx!(
        svg {
            fill: "red",
            width: "100%",
            height: "100%",
            svg_content,
        }
    )
}

pub const stroke: AttributeDescription = _

pub const a11y_id: AttributeDescription = _

pub const a11y_focusable: AttributeDescription = _

pub const a11y_auto_focus: AttributeDescription = _

pub const a11y_name: AttributeDescription = _

pub const a11y_description: AttributeDescription = _

pub const a11y_value: AttributeDescription = _

pub const a11y_access_key: AttributeDescription = _

pub const a11y_author_id: AttributeDescription = _

pub const a11y_keyboard_shortcut: AttributeDescription = _

pub const a11y_language: AttributeDescription = _

pub const a11y_placeholder: AttributeDescription = _

pub const a11y_role_description: AttributeDescription = _

pub const a11y_state_description: AttributeDescription = _

pub const a11y_tooltip: AttributeDescription = _

pub const a11y_url: AttributeDescription = _

pub const a11y_row_index_text: AttributeDescription = _

pub const a11y_column_index_text: AttributeDescription = _

pub const a11y_scroll_x: AttributeDescription = _

pub const a11y_scroll_x_min: AttributeDescription = _

pub const a11y_scroll_x_max: AttributeDescription = _

pub const a11y_scroll_y: AttributeDescription = _

pub const a11y_scroll_y_min: AttributeDescription = _

pub const a11y_scroll_y_max: AttributeDescription = _

pub const a11y_numeric_value: AttributeDescription = _

pub const a11y_min_numeric_value: AttributeDescription = _

pub const a11y_max_numeric_value: AttributeDescription = _

pub const a11y_numeric_value_step: AttributeDescription = _

pub const a11y_numeric_value_jump: AttributeDescription = _

pub const a11y_row_count: AttributeDescription = _

pub const a11y_column_count: AttributeDescription = _

pub const a11y_row_index: AttributeDescription = _

pub const a11y_column_index: AttributeDescription = _

pub const a11y_row_span: AttributeDescription = _

pub const a11y_column_span: AttributeDescription = _

pub const a11y_level: AttributeDescription = _

pub const a11y_size_of_set: AttributeDescription = _

pub const a11y_position_in_set: AttributeDescription = _

pub const a11y_color_value: AttributeDescription = _

pub const a11y_expanded: AttributeDescription = _

pub const a11y_selected: AttributeDescription = _

pub const a11y_hovered: AttributeDescription = _

pub const a11y_hidden: AttributeDescription = _

pub const a11y_linked: AttributeDescription = _

pub const a11y_multiselectable: AttributeDescription = _

pub const a11y_required: AttributeDescription = _

pub const a11y_visited: AttributeDescription = _

pub const a11y_busy: AttributeDescription = _

pub const a11y_live_atomic: AttributeDescription = _

pub const a11y_modal: AttributeDescription = _

pub const a11y_touch_transparent: AttributeDescription = _

pub const a11y_read_only: AttributeDescription = _

pub const a11y_disabled: AttributeDescription = _

pub const a11y_is_spelling_error: AttributeDescription = _

pub const a11y_is_grammar_error: AttributeDescription = _

pub const a11y_is_search_match: AttributeDescription = _

pub const a11y_is_suggestion: AttributeDescription = _

pub const a11y_role: AttributeDescription = _

pub const a11y_invalid: AttributeDescription = _

pub const a11y_toggled: AttributeDescription = _

pub const a11y_live: AttributeDescription = _

pub const a11y_default_action_verb: AttributeDescription = _

pub const a11y_orientation: AttributeDescription = _

pub const a11y_sort_direction: AttributeDescription = _

pub const a11y_current: AttributeDescription = _

pub const a11y_auto_complete: AttributeDescription = _

pub const a11y_has_popup: AttributeDescription = _

pub const a11y_list_style: AttributeDescription = _

pub const a11y_vertical_offset: AttributeDescription = _