Jonathan Kelley
cd54f5953b
* update the dioxus cratesio readme * fix example * fix header * add a bunch more examples
47 lines
1.3 KiB
Rust
47 lines
1.3 KiB
Rust
//! Defining and using components.
|
|
//!
|
|
//! A component is just a function annotated with `#[component]` that returns an `Element`.
|
|
//! Its arguments are its props — Dioxus generates a builder so you can construct the
|
|
//! component inside `rsx!` with a struct-like syntax.
|
|
|
|
use dioxus::prelude::*;
|
|
|
|
fn main() {
|
|
dioxus::launch(app);
|
|
}
|
|
|
|
fn app() -> Element {
|
|
rsx! {
|
|
h1 { "Greetings" }
|
|
Greeting { name: "Alice" }
|
|
Greeting { name: "Bob", excited: true }
|
|
Greeting { name: "Charlie", excited: false }
|
|
|
|
h2 { "User cards" }
|
|
UserCard { name: "Ada Lovelace", role: "Mathematician" }
|
|
UserCard { name: "Grace Hopper", role: "Computer Scientist" }
|
|
}
|
|
}
|
|
|
|
// Components must start with an uppercase letter.
|
|
// Props are taken as named arguments — `name` is required, and `excited` has a default.
|
|
#[component]
|
|
fn Greeting(name: String, #[props(default)] excited: bool) -> Element {
|
|
let punctuation = if excited { "!" } else { "." };
|
|
rsx! {
|
|
p { "Hello, {name}{punctuation}" }
|
|
}
|
|
}
|
|
|
|
// Components can take any Clone + PartialEq type as a prop.
|
|
#[component]
|
|
fn UserCard(name: String, role: String) -> Element {
|
|
rsx! {
|
|
div { border: "1px solid #ccc", padding: "8px", margin: "4px",
|
|
strong { "{name}" }
|
|
" — "
|
|
em { "{role}" }
|
|
}
|
|
}
|
|
}
|