mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-12-18 08:33:07 +00:00
6c323e9fc5
* Move getting started to Guide * Clean up summary and getting started * Shorten intro by moving stuff to individual platform docs * Make intro even shorter, summarize features * Further cleanup; move development-related docs to separate section * Make `guide` a crate. Turn code samples into examples so that we can check if they compile * Rewrite "Describing the UI": * Focus on RSX syntax (interactivity covered in later chapters); make sure samples are tested; concise language * Move some "special attribute" samples to the `examples` directory * Simplify introduction to components * Simplify introduction to component props * Document Prop features; add code samples * Simplify component children docs * Interactivity: better introduction to events * Hooks: better introduction * Remove outdated doc * Introducs use_ref * Simplify User Input chapter * Document event handler props * Meme editor example * Meme editor walkthrough * Add dark mode example * Guide for context; dark mode example * Guide: custom hooks * Guide: conditional rendering * Guide: rendering lists * Guide: rendering lists + keys * Move remaining infor from Reference to guide * Delete reference book
113 lines
2.6 KiB
Rust
113 lines
2.6 KiB
Rust
#![allow(non_snake_case)]
|
|
use dioxus::prelude::*;
|
|
|
|
fn main() {
|
|
dioxus::desktop::launch(App);
|
|
}
|
|
|
|
fn App(cx: Scope) -> Element {
|
|
cx.render(rsx! {
|
|
// ANCHOR: OptionalProps_usage
|
|
Title {
|
|
title: "Some Title",
|
|
},
|
|
Title {
|
|
title: "Some Title",
|
|
subtitle: "Some Subtitle",
|
|
},
|
|
// Providing an Option explicitly won't compile though:
|
|
// Title {
|
|
// title: "Some Title",
|
|
// subtitle: None,
|
|
// },
|
|
// ANCHOR_END: OptionalProps_usage
|
|
|
|
// ANCHOR: ExplicitOption_usage
|
|
ExplicitOption {
|
|
title: "Some Title",
|
|
subtitle: None,
|
|
},
|
|
ExplicitOption {
|
|
title: "Some Title",
|
|
subtitle: Some("Some Title"),
|
|
},
|
|
// This won't compile:
|
|
// ExplicitOption {
|
|
// title: "Some Title",
|
|
// },
|
|
// ANCHOR_END: ExplicitOption_usage
|
|
|
|
// ANCHOR: DefaultComponent_usage
|
|
DefaultComponent {
|
|
number: 5,
|
|
},
|
|
DefaultComponent {},
|
|
// ANCHOR_END: DefaultComponent_usage
|
|
|
|
// ANCHOR: IntoComponent_usage
|
|
IntoComponent {
|
|
string: "some &str",
|
|
},
|
|
// ANCHOR_END: IntoComponent_usage
|
|
})
|
|
}
|
|
|
|
// ANCHOR: OptionalProps
|
|
#[derive(Props)]
|
|
struct OptionalProps<'a> {
|
|
title: &'a str,
|
|
subtitle: Option<&'a str>,
|
|
}
|
|
|
|
fn Title<'a>(cx: Scope<'a, OptionalProps>) -> Element<'a> {
|
|
return cx.render(rsx!(h1{
|
|
"{cx.props.title}: ",
|
|
[cx.props.subtitle.unwrap_or("No subtitle provided")],
|
|
}));
|
|
}
|
|
// ANCHOR_END: OptionalProps
|
|
|
|
// ANCHOR: ExplicitOption
|
|
#[derive(Props)]
|
|
struct ExplicitOptionProps<'a> {
|
|
title: &'a str,
|
|
#[props(!optional)]
|
|
subtitle: Option<&'a str>,
|
|
}
|
|
|
|
fn ExplicitOption<'a>(cx: Scope<'a, ExplicitOptionProps>) -> Element<'a> {
|
|
return cx.render(rsx!(h1{
|
|
"{cx.props.title}: ",
|
|
[cx.props.subtitle.unwrap_or("No subtitle provided")],
|
|
}));
|
|
}
|
|
// ANCHOR_END: ExplicitOption
|
|
|
|
// ANCHOR: DefaultComponent
|
|
#[derive(PartialEq, Props)]
|
|
struct DefaultProps {
|
|
// default to 42 when not provided
|
|
#[props(default = 42)]
|
|
number: i64,
|
|
}
|
|
|
|
fn DefaultComponent(cx: Scope<DefaultProps>) -> Element {
|
|
return cx.render(rsx!(h1{
|
|
"{cx.props.number}",
|
|
}));
|
|
}
|
|
// ANCHOR_END: DefaultComponent
|
|
|
|
// ANCHOR: IntoComponent
|
|
#[derive(PartialEq, Props)]
|
|
struct IntoProps {
|
|
#[props(into)]
|
|
string: String,
|
|
}
|
|
|
|
fn IntoComponent(cx: Scope<IntoProps>) -> Element {
|
|
return cx.render(rsx!(h1{
|
|
"{cx.props.string}",
|
|
}));
|
|
}
|
|
// ANCHOR_END: IntoComponent
|