Struct 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 (Floating element relative to the parent element)
• global (Floating element relative to the window)

When using the absolute or global modes, you can also combine them 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