macro_rules! define_elements {
($($tokens:tt)*) => { ... };
}Expand description
Define typed custom elements (and their typed attributes) for use in rsx!.
Reach for define_elements! when your app needs project-specific element
names or attributes that should type-check just like the built-in Dioxus
HTML elements. Each element becomes a typed builder, and each listed
attribute becomes a typed method you can set in rsx!.
Element and attribute identifiers are written in Rust (snake_case or
camelCase). Use #[element(name = "...")] / #[attr(name = "...")] to
control the rendered HTML name when it differs from the Rust identifier -
for example to emit a hyphenated custom-element tag or a data-* attribute.
§Example
ⓘ
use dioxus::prelude::*;
dioxus::html::define_elements! {
// Renders as `<analytics-panel>` even though the Rust name is `analyticsPanel`.
#[element(name = "analytics-panel")]
analyticsPanel {
metric,
// Renders as the `data-region` attribute.
#[attr(name = "data-region")]
region,
}
}
fn app() -> Element {
rsx! {
analyticsPanel {
metric: "conversion-rate",
region: "north-america",
"Revenue dashboard"
}
}
}