Struct freya::prelude::dioxus_elements::svg

pub struct svg;

Expand description

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: (&'static str, Option<&'static str>, bool) = _

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: (&'static str, Option<&'static str>, bool) = _

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

§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: (&'static str, Option<&'static str>, bool) = _

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

§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: (&'static str, Option<&'static str>, bool) = _

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

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: (&'static str, Option<&'static str>, bool) = _

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: (&'static str, Option<&'static str>, bool) = _

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

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

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

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

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

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: (&'static str, Option<&'static str>, bool) = _

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: (&'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 svg_data: (&'static str, Option<&'static str>, bool) = _

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

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

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: (&'static str, Option<&'static str>, bool) = _

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Auto Trait Implementations§

§

impl UnwindSafe for svg

Blanket Implementations§

source §

impl<T> Any for T
where T: 'static + ?Sized,

source §

fn type_id(&self) -> TypeId

Gets the TypeId of self. Read more

source §

impl<T> Borrow<T> for T
where T: ?Sized,

source §

fn borrow(&self) -> &T

Immutably borrows from an owned value. Read more

source §

impl<T> BorrowMut<T> for T
where T: ?Sized,

source §

fn borrow_mut(&mut self) -> &mut T

Mutably borrows from an owned value. Read more

§

impl<T> Downcast for T
where T: Any,

§

fn into_any(self: Box<T>) -> Box<dyn Any>

Convert Box<dyn Trait> (where Trait: Downcast) to Box<dyn Any>. Box<dyn Any> can then be further downcast into Box<ConcreteType> where ConcreteType implements Trait.

§

fn into_any_rc(self: Rc<T>) -> Rc<dyn Any>

Convert Rc<Trait> (where Trait: Downcast) to Rc<Any>. Rc<Any> can then be further downcast into Rc<ConcreteType> where ConcreteType implements Trait.

§

fn as_any(&self) -> &(dyn Any + 'static)

Convert &Trait (where Trait: Downcast) to &Any. This is needed since Rust cannot generate &Any’s vtable from &Trait’s.

§

fn as_any_mut(&mut self) -> &mut (dyn Any + 'static)

Convert &mut Trait (where Trait: Downcast) to &Any. This is needed since Rust cannot generate &mut Any’s vtable from &mut Trait’s.

§

impl<T> DowncastSync for T
where T: Any + Send + Sync,

§

fn into_any_arc(self: Arc<T>) -> Arc<dyn Any + Sync + Send>

Convert Arc<Trait> (where Trait: Downcast) to Arc<Any>. Arc<Any> can then be further downcast into Arc<ConcreteType> where ConcreteType implements Trait.

source §

impl<T> From<T> for T

source §

fn from(t: T) -> T

Returns the argument unchanged.

§

impl<T> Instrument for T

§

fn instrument(self, span: Span) -> Instrumented<Self>

Instruments this type with the provided [Span], returning an Instrumented wrapper. Read more

§

fn in_current_span(self) -> Instrumented<Self>

Instruments this type with the current Span, returning an Instrumented wrapper. Read more

source §

impl<T, U> Into for T
where U: From<T>,

source §

fn into(self) -> U

Calls U::from(self).

That is, this conversion is whatever the implementation of From<T> for U chooses to do.

source §

impl<T> IntoEither for T

source §

fn into_either(self, into_left: bool) -> Either<Self, Self>

Converts self into a Left variant of Either<Self, Self> if into_left is true. Converts self into a Right variant of Either<Self, Self> otherwise. Read more

source §

fn into_either_with<F>(self, into_left: F) -> Either<Self, Self>
where F: FnOnce(&Self) -> bool,

Converts self into a Left variant of Either<Self, Self> if into_left(&self) returns true. Converts self into a Right variant of Either<Self, Self> otherwise. Read more

§