fix: some examples

This commit is contained in:
Jonathan Kelley 2022-03-05 15:25:09 -05:00
parent f98c3f161f
commit 35b22923b2
7 changed files with 63 additions and 44 deletions

View file

@ -12,7 +12,7 @@ fn main() {
fn app(cx: Scope) -> Element {
cx.render(rsx!(
div {
h1 { "drag an file here" }
h1 { "drag a file here and check your console" }
}
))
}

View file

@ -104,7 +104,6 @@ fn app(cx: Scope) -> Element {
// elements with driven values will preventdefault automatically.
// you can disable this override with preventdefault: false
div {
input {
id: "pdf",
@ -121,8 +120,6 @@ fn app(cx: Scope) -> Element {
}
}
FIELDS.iter().map(|(field, value)| rsx!(
div {
input {

View file

@ -10,7 +10,7 @@ fn app(cx: Scope) -> Element {
p {
a {
href: "http://dioxuslabs.com/",
"default link"
"Default link - links outside of your app"
}
}
p {
@ -20,7 +20,19 @@ fn app(cx: Scope) -> Element {
onclick: |_| {
println!("Hello Dioxus");
},
"custom event link",
"Custom event link - links inside of your app",
}
}
}
div {
Router {
Route { to: "/", h1 { "Home" } },
Route { to: "/settings", h1 { "settings" } },
p { "----"}
ul {
Link { to: "/", li { "Router link to home" } },
Link { to: "/settings", li { "Router link to settings" } },
}
}
}

View file

@ -14,6 +14,8 @@ fn app(cx: Scope) -> Element {
cx.render(rsx! {
div {
onclick: move |_| println!("clicked! top"),
"- div"
button {
onclick: move |_| println!("clicked! bottom propoate"),
"Propogate"
@ -26,7 +28,7 @@ fn app(cx: Scope) -> Element {
"Dont propogate"
}
button {
"Does not handle clicks"
"Does not handle clicks - only propogate"
}
}
})

View file

@ -13,18 +13,17 @@ fn app(cx: Scope) -> Element {
Router {
ul {
Link { to: "/", li { "Go home!" } }
Link { to: "users", li { "List all users" } }
Link { to: "blog", li { "Blog posts" } }
Link { to: "/users", li { "List all users" } }
Link { to: "/blog", li { "Blog posts" } }
Link { to: "/users/bill", li { "List all users" } }
Link { to: "/blog/5", li { "Blog post 5" } }
}
Route { to: "/", "Home" }
Route { to: "users",
Route { to: "/", "User list" }
Route { to: ":name", User {} }
}
Route { to: "blog"
Route { to: "/", "Blog list" }
Route { to: ":post", BlogPost {} }
}
Route { to: "/users", "User list" }
Route { to: "/users/:name", User {} }
Route { to: "/blog", "Blog list" }
Route { to: "/blog/:post", BlogPost {} }
Route { to: "", "Err 404 Route Not Found" }
}
})

View file

@ -118,34 +118,43 @@ pub fn todo_entry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
let completed = if todo.checked { "completed" } else { "" };
let editing = if **is_editing { "editing" } else { "" };
rsx!(cx, li {
class: "{completed} {editing}",
div { class: "view",
input { class: "toggle", r#type: "checkbox", id: "cbg-{todo.id}", checked: "{todo.checked}",
onchange: move |evt| {
cx.props.todos.make_mut()[&cx.props.id].checked = evt.value.parse().unwrap();
cx.render(rsx!{
li {
class: "{completed} {editing}",
div { class: "view",
input {
class: "toggle",
r#type: "checkbox",
id: "cbg-{todo.id}",
checked: "{todo.checked}",
oninput: move |evt| {
cx.props.todos.make_mut()[&cx.props.id].checked = evt.value.parse().unwrap();
}
}
label {
r#for: "cbg-{todo.id}",
onclick: move |_| is_editing.set(true),
prevent_default: "onclick",
"{todo.contents}"
}
}
label {
r#for: "cbg-{todo.id}",
onclick: move |_| is_editing.set(true),
"{todo.contents}"
}
is_editing.then(|| rsx!{
input {
class: "edit",
value: "{todo.contents}",
oninput: move |evt| cx.props.todos.make_mut()[&cx.props.id].contents = evt.value.clone(),
autofocus: "true",
onfocusout: move |_| is_editing.set(false),
onkeydown: move |evt| {
match evt.key.as_str() {
"Enter" | "Escape" | "Tab" => is_editing.set(false),
_ => {}
}
},
}
})
}
is_editing.then(|| rsx!{
input {
class: "edit",
value: "{todo.contents}",
oninput: move |evt| cx.props.todos.make_mut()[&cx.props.id].contents = evt.value.clone(),
autofocus: "true",
onfocusout: move |_| is_editing.set(false),
onkeydown: move |evt| {
match evt.key.as_str() {
"Enter" | "Escape" | "Tab" => is_editing.set(false),
_ => {}
}
},
}
})
})
}

View file

@ -33,7 +33,7 @@ pub mod prelude {
pub use dioxus_html as dioxus_elements;
#[cfg(feature = "router")]
pub use dioxus_router::{use_route, use_router, Link, Redirect, Router, UseRoute};
pub use dioxus_router::{use_route, use_router, Link, Redirect, Router, UseRoute, Route};
#[cfg(feature = "fermi")]
pub use fermi::{use_atom_ref, use_init_atom_root, use_read, use_set, Atom, AtomRef};