2021-07-16 20:11:25 +00:00
|
|
|
//! Example: The basics of Dioxus
|
|
|
|
//! ----------------------------
|
|
|
|
//!
|
|
|
|
//! This small example covers some of the basics of Dioxus including
|
|
|
|
//! - Components
|
|
|
|
//! - Props
|
|
|
|
//! - Children
|
|
|
|
//! - the rsx! macro
|
|
|
|
|
2021-07-02 05:30:52 +00:00
|
|
|
use dioxus::prelude::*;
|
|
|
|
|
2022-01-02 23:35:38 +00:00
|
|
|
pub fn Example(cx: Scope) -> Element {
|
2021-07-02 05:30:52 +00:00
|
|
|
cx.render(rsx! {
|
|
|
|
div {
|
2021-07-16 20:11:25 +00:00
|
|
|
Greeting {
|
|
|
|
name: "Dioxus"
|
|
|
|
div { "Dioxus is a fun, fast, and portable UI framework for Rust" }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
2022-01-02 23:35:38 +00:00
|
|
|
}
|
2021-07-02 05:30:52 +00:00
|
|
|
|
2021-07-16 20:11:25 +00:00
|
|
|
#[derive(PartialEq, Props)]
|
2022-01-02 23:35:38 +00:00
|
|
|
struct GreetingProps<'a> {
|
2021-07-16 20:11:25 +00:00
|
|
|
name: &'static str,
|
2022-01-02 23:35:38 +00:00
|
|
|
children: Element<'a>,
|
2021-07-16 20:11:25 +00:00
|
|
|
}
|
|
|
|
|
2022-01-02 23:35:38 +00:00
|
|
|
pub fn Greeting<'a>(cx: Scope<'a, GreetingProps<'a>>) -> Element {
|
2021-07-16 20:11:25 +00:00
|
|
|
cx.render(rsx! {
|
|
|
|
div {
|
2021-12-15 20:56:53 +00:00
|
|
|
h1 { "Hello, {cx.props.name}!" }
|
2021-10-24 17:30:36 +00:00
|
|
|
p { "Welcome to the Dioxus framework" }
|
2021-07-16 20:11:25 +00:00
|
|
|
br {}
|
2022-01-02 23:35:38 +00:00
|
|
|
&cx.props.children
|
2021-07-02 05:30:52 +00:00
|
|
|
}
|
|
|
|
})
|
2022-01-02 23:35:38 +00:00
|
|
|
}
|