Reinis Mazeiks
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
106 lines
2.3 KiB
Rust
106 lines
2.3 KiB
Rust
// ANCHOR: all
|
|
#![allow(non_snake_case)]
|
|
|
|
use dioxus::events::FormEvent;
|
|
use dioxus::prelude::*;
|
|
|
|
fn main() {
|
|
dioxus::desktop::launch(MemeEditor);
|
|
}
|
|
|
|
// ANCHOR: meme_editor
|
|
fn MemeEditor(cx: Scope) -> Element {
|
|
let container_style = r"
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
margin: 0 auto;
|
|
width: fit-content;
|
|
";
|
|
|
|
let caption = use_state(&cx, || "me waiting for my rust code to compile".to_string());
|
|
|
|
cx.render(rsx! {
|
|
div {
|
|
style: "{container_style}",
|
|
h1 { "Meme Editor" },
|
|
Meme {
|
|
caption: caption,
|
|
},
|
|
CaptionEditor {
|
|
caption: caption,
|
|
on_input: move |event: FormEvent| {caption.set(event.value.clone());},
|
|
},
|
|
}
|
|
})
|
|
}
|
|
// ANCHOR_END: meme_editor
|
|
|
|
// ANCHOR: meme_component
|
|
#[inline_props]
|
|
fn Meme<'a>(cx: Scope<'a>, caption: &'a str) -> Element<'a> {
|
|
let container_style = r#"
|
|
position: relative;
|
|
width: fit-content;
|
|
"#;
|
|
|
|
let caption_container_style = r#"
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 16px 8px;
|
|
"#;
|
|
|
|
let caption_style = r"
|
|
font-size: 32px;
|
|
margin: 0;
|
|
color: white;
|
|
text-align: center;
|
|
";
|
|
|
|
cx.render(rsx!(
|
|
div {
|
|
style: "{container_style}",
|
|
img {
|
|
src: "https://i.imgflip.com/2zh47r.jpg",
|
|
height: "500px",
|
|
},
|
|
div {
|
|
style: "{caption_container_style}",
|
|
p {
|
|
style: "{caption_style}",
|
|
"{caption}"
|
|
}
|
|
}
|
|
}
|
|
))
|
|
}
|
|
// ANCHOR_END: meme_component
|
|
|
|
// ANCHOR: caption_editor
|
|
#[inline_props]
|
|
fn CaptionEditor<'a>(
|
|
cx: Scope<'a>,
|
|
caption: &'a str,
|
|
on_input: EventHandler<'a, FormEvent>,
|
|
) -> Element<'a> {
|
|
let input_style = r"
|
|
border: none;
|
|
background: cornflowerblue;
|
|
padding: 8px 16px;
|
|
margin: 0;
|
|
border-radius: 4px;
|
|
color: white;
|
|
";
|
|
|
|
cx.render(rsx!(input {
|
|
style: "{input_style}",
|
|
value: "{caption}",
|
|
oninput: move |event| on_input.call(event),
|
|
}))
|
|
}
|
|
// ANCHOR_END: caption_editor
|
|
|
|
// ANCHOR_END: all
|