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

pub const svg_content: 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 = _