Mirrors/dioxus
2
0
Fork 0
mirror of https://github.com/DioxusLabs/dioxus synced 2024-09-20 06:11:57 +00:00
Code Issues Projects Releases Packages Wiki Activity

update router examples

Browse source
This commit is contained in:
Adrian Wannenmacher 2022-12-16 11:55:20 +01:00
parent 58611e8d34
commit 5c1915990b
No known key found for this signature in database
GPG key ID: 19D986ECB1E492D5
5 changed files with 344 additions and 173 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

277
examples/crm.rs
View file

@ -1,11 +1,13 @@
/*
Tiny CRM: A port of the Yew CRM example to Dioxus.
*/
//! Tiny CRM: A port of the Yew CRM example to Dioxus.
#![allow(non_snake_case)]
use std::sync::{Arc, Mutex};
use dioxus::prelude::*;
use dioxus_router::{Link, Route, Router};
use dioxus_router::prelude::*;
fn main() {
dioxus_desktop::launch(app);
dioxus_desktop::launch(App);
}
#[derive(Clone, Debug, Default)]
@ -15,92 +17,185 @@ pub struct Client {
pub description: String,
}
fn app(cx: Scope) -> Element {
let clients = use_ref(cx, || vec![] as Vec<Client>);
let firstname = use_state(cx, String::new);
let lastname = use_state(cx, String::new);
let description = use_state(cx, String::new);
type ClientContext = Arc<Mutex<Vec<Client>>>;
cx.render(rsx!(
body {
margin_left: "35%",
link {
rel: "stylesheet",
href: "https://unpkg.com/purecss@2.0.6/build/pure-min.css",
integrity: "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5",
crossorigin: "anonymous",
}
h1 {"Dioxus CRM Example"}
Router {
Route { to: "/",
div { class: "crm",
h2 { margin_bottom: "10px", "List of clients" }
div { class: "clients", margin_left: "10px",
clients.read().iter().map(|client| rsx!(
div { class: "client", style: "margin-bottom: 50px",
p { "First Name: {client.first_name}" }
p { "Last Name: {client.last_name}" }
p {"Description: {client.description}"}
})
)
}
Link { to: "/new", class: "pure-button pure-button-primary", "Add New" }
Link { to: "/new", class: "pure-button", "Settings" }
}
}
Route { to: "/new",
div { class: "crm",
h2 { margin_bottom: "10px", "Add new client" }
form { class: "pure-form",
input {
class: "new-client firstname",
placeholder: "First name",
value: "{firstname}",
oninput: move |e| firstname.set(e.value.clone())
}
input {
class: "new-client lastname",
placeholder: "Last name",
value: "{lastname}",
oninput: move |e| lastname.set(e.value.clone())
}
textarea {
class: "new-client description",
placeholder: "Description",
value: "{description}",
oninput: move |e| description.set(e.value.clone())
}
}
button {
class: "pure-button pure-button-primary",
onclick: move |_| {
clients.write().push(Client {
description: description.to_string(),
first_name: firstname.to_string(),
last_name: lastname.to_string(),
});
description.set(String::new());
firstname.set(String::new());
lastname.set(String::new());
},
"Add New"
}
Link { to: "/", class: "pure-button", "Go Back" }
}
}
Route { to: "/settings",
div {
h2 { margin_bottom: "10px", "Settings" }
button {
background: "rgb(202, 60, 60)",
class: "pure-button pure-button-primary",
onclick: move |_| clients.write().clear(),
"Remove all clients"
}
Link { to: "/", class: "pure-button pure-button-primary", "Go Back" }
}
}
}
fn App(cx: Scope) -> Element {
use_router(cx, &|| RouterConfiguration::default(), &|| {
Segment::content(comp(ClientList))
.fixed(
"new",
Route::content(comp(ClientAdd)).name::<ClientAddName>(),
)
.fixed(
"settings",
Route::content(comp(Settings)).name::<SettingsName>(),
)
});
use_context_provider::<ClientContext>(&cx, Default::default);
render! {
link {
rel: "stylesheet",
href: "https://unpkg.com/purecss@2.0.6/build/pure-min.css",
integrity: "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5",
crossorigin: "anonymous",
}
))
style { "
.red {{
background-color: rgb(202, 60, 60) !important;
}}
" }
h1 {"Dioxus CRM Example"}
Outlet { }
}
}
fn ClientList(cx: Scope) -> Element {
let clients = use_context::<ClientContext>(cx).unwrap();
cx.render(rsx! {
h2 { "List of Clients" }
Link {
target: named::<ClientAddName>(),
class: "pure-button pure-button-primary",
"Add Client"
}
Link {
target: named::<SettingsName>(),
class: "pure-button",
"Settings"
}
clients.lock().unwrap().iter().map(|client| rsx! {
div {
class: "client",
style: "margin-bottom: 50px",
p { "Name: {client.first_name} {client.last_name}" }
p { "Description: {client.description}" }
}
})
})
}
struct ClientAddName;
fn ClientAdd(cx: Scope) -> Element {
let clients = use_context::<ClientContext>(cx).unwrap();
let first_name = use_state(&cx, String::new);
let last_name = use_state(&cx, String::new);
let description = use_state(&cx, String::new);
let navigator = use_navigate(&cx).unwrap();
cx.render(rsx! {
h2 { "Add new Client" }
form {
class: "pure-form pure-form-aligned",
onsubmit: move |_| {
let mut clients = clients.lock().unwrap();
clients.push(Client {
first_name: first_name.to_string(),
last_name: last_name.to_string(),
description: description.to_string(),
});
navigator.push(named::<RootIndex>());
},
fieldset {
div {
class: "pure-control-group",
label {
"for": "first_name",
"First Name"
}
input {
id: "first_name",
"type": "text",
placeholder: "First Name…",
required: "",
value: "{first_name}",
oninput: move |e| first_name.set(e.value.clone())
}
}
div {
class: "pure-control-group",
label {
"for": "last_name",
"Last Name"
}
input {
id: "last_name",
"type": "text",
placeholder: "Last Name…",
required: "",
value: "{last_name}",
oninput: move |e| last_name.set(e.value.clone())
}
}
div {
class: "pure-control-group",
label {
"for": "description",
"Description"
}
textarea {
id: "description",
placeholder: "Description…",
value: "{description}",
oninput: move |e| description.set(e.value.clone())
}
}
div {
class: "pure-controls",
button {
"type": "submit",
class: "pure-button pure-button-primary",
"Save"
}
Link {
target: named::<RootIndex>(),
class: "pure-button pure-button-primary red",
"Cancel"
}
}
}
}
})
}
struct SettingsName;
fn Settings(cx: Scope) -> Element {
let clients = use_context::<ClientContext>(&cx).unwrap();
cx.render(rsx! {
h2 { "Settings" }
button {
class: "pure-button pure-button-primary red",
onclick: move |_| {
let mut clients = clients.lock().unwrap();
clients.clear();
},
"Remove all Clients"
}
Link {
target: named::<RootIndex>(),
class: "pure-button",
"Go back"
}
})
}

57
examples/flat_router.rs
View file

@ -1,6 +1,8 @@
#![allow(non_snake_case)]
use dioxus::prelude::*;
use dioxus_desktop::{tao::dpi::LogicalSize, Config, WindowBuilder};
use dioxus_router::{Link, Route, Router};
use dioxus_router::prelude::*;
fn main() {
env_logger::init();
@ -16,24 +18,43 @@ fn main() {
}
fn app(cx: Scope) -> Element {
cx.render(rsx! {
Router {
Route { to: "/", "Home" }
Route { to: "/games", "Games" }
Route { to: "/play", "Play" }
Route { to: "/settings", "Settings" }
use_router(cx, &|| RouterConfiguration::default(), &|| {
Segment::content(comp(Home))
.fixed("games", comp(Games))
.fixed("play", comp(Play))
.fixed("settings", comp(Settings))
});
p {
"----"
}
nav {
ul {
Link { to: "/", li { "Home" } }
Link { to: "/games", li { "Games" } }
Link { to: "/play", li { "Play" } }
Link { to: "/settings", li { "Settings" } }
}
render! {
Outlet { }
p {
"----"
}
nav {
ul {
li { Link { target: "/", "Home" } }
li { Link { target: "/games", "Games" } }
li { Link { target: "/play", "Play" } }
li { Link { target: "/settings", "Settings" } }
}
}
})
}
}
fn Home(cx: Scope) -> Element {
render!("Home")
}
fn Games(cx: Scope) -> Element {
render!("Games")
}
fn Play(cx: Scope) -> Element {
render!("Play")
}
fn Settings(cx: Scope) -> Element {
render!("Settings")
}

29
examples/link.rs
View file

@ -1,11 +1,17 @@
#![allow(non_snake_case)]
use dioxus::prelude::*;
use dioxus_router::{Link, Route, Router};
use dioxus_router::prelude::*;
fn main() {
dioxus_desktop::launch(app);
}
fn app(cx: Scope) -> Element {
use_router(cx, &|| RouterConfiguration::default(), &|| {
Segment::content(comp(Home)).fixed("settings", comp(Settings))
});
cx.render(rsx! (
div {
p {
@ -21,15 +27,20 @@ fn app(cx: Scope) -> Element {
}
}
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" } },
}
Outlet { }
p { "----"}
ul {
Link { target: "/", li { "Router link to home" } },
Link { target: "/settings", li { "Router link to settings" } },
}
}
))
}
fn Home(cx: Scope) -> Element {
render!(h1 { "Home" })
}
fn Settings(cx: Scope) -> Element {
render!(h1 { "Settings" })
}

89
examples/router.rs
View file

@ -1,36 +1,58 @@
#![allow(non_snake_case)]
use dioxus::prelude::*;
use dioxus_router::{Link, Route, Router};
use serde::Deserialize;
use dioxus_router::prelude::*;
fn main() {
dioxus_desktop::launch(app);
}
fn app(cx: Scope) -> Element {
cx.render(rsx! {
Router {
ul {
Link { to: "/", li { "Go home!" } }
Link { to: "/users", li { "List all users" } }
Link { to: "/blog", li { "Blog posts" } }
use_router(cx, &|| RouterConfiguration::default(), &|| {
Segment::content(comp(Home))
.fixed(
"users",
Route::empty()
.nested(Segment::content(comp(UserList)).catch_all((comp(User), UserId { }))),
)
.fixed(
"blog",
Route::empty().nested(
Segment::content(comp(BlogList)).catch_all((comp(BlogPost), PostId { })),
),
)
.fallback(comp(E404))
});
Link { to: "/users/bill", li { "List all users" } }
Link { to: "/blog/5", li { "Blog post 5" } }
}
Route { to: "/", "Home" }
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" }
cx.render(rsx! {
ul {
li { Link { target: "/", "Go home!" } }
li { Link { target: "/users", "List all users" } }
li { Link { target: "/blog", "Blog posts" }}
}
Outlet { }
})
}
fn Home(cx: Scope) -> Element {
render!(h1 { "Home" })
}
fn BlogList(cx: Scope) -> Element {
render! {
h1 { "Blog Posts" }
ul {
li { Link { target: "/blog/1", "First blog post" } }
li { Link { target: "/blog/2", "Second blog post" } }
li { Link { target: "/blog/3", "Third blog post" } }
}
}
}
struct PostId;
fn BlogPost(cx: Scope) -> Element {
let post = dioxus_router::use_route(cx).last_segment().unwrap();
let post = use_route(cx)?.parameter::<PostId>().unwrap();
cx.render(rsx! {
div {
@ -40,24 +62,31 @@ fn BlogPost(cx: Scope) -> Element {
})
}
#[derive(Deserialize)]
struct Query {
bold: bool,
fn UserList(cx: Scope) -> Element {
render! {
h1 { "Users" }
ul {
li { Link { target: "/users/bill", "Bill" } }
li { Link { target: "/users/jeremy", "Jeremy" } }
li { Link { target: "/users/adrian", "Adrian" } }
}
}
}
struct UserId;
fn User(cx: Scope) -> Element {
let post = dioxus_router::use_route(cx).last_segment().unwrap();
let state = use_route(cx)?;
let query = dioxus_router::use_route(cx)
.query::<Query>()
.unwrap_or(Query { bold: false });
let user = state.parameter::<UserId>().unwrap();
let query = state.query.as_ref().map(|q| q.clone()).unwrap_or_default();
let bold = query.contains("bold") && !query.contains("bold=false");
cx.render(rsx! {
div {
h1 { "Reading blog post: {post}" }
p { "example blog post" }
h1 { "Showing user: {user}" }
if query.bold {
if bold {
rsx!{ b { "bold" } }
} else {
rsx!{ i { "italic" } }
@ -65,3 +94,7 @@ fn User(cx: Scope) -> Element {
}
})
}
fn E404(cx: Scope) -> Element {
render!(h1 { "Error 404 - Page not Found" })
}

65
examples/simple_desktop.rs
View file

@ -1,5 +1,7 @@
#![allow(non_snake_case)]
use dioxus::prelude::*;
use dioxus_router::*;
use dioxus_router::prelude::*;
fn main() {
simple_logger::SimpleLogger::new()
@ -12,49 +14,58 @@ fn main() {
}
fn app(cx: Scope) -> Element {
cx.render(rsx! {
Router {
h1 { "Your app here" }
ul {
Link { to: "/", li { "home" } }
Link { to: "/blog", li { "blog" } }
Link { to: "/blog/tim", li { "tims' blog" } }
Link { to: "/blog/bill", li { "bills' blog" } }
Link { to: "/blog/james",
li { "james amazing' blog" }
}
Link { to: "/apples", li { "go to apples" } }
}
Route { to: "/", Home {} }
Route { to: "/blog/", BlogList {} }
Route { to: "/blog/:id/", BlogPost {} }
Route { to: "/oranges", "Oranges are not apples!" }
Redirect { from: "/apples", to: "/oranges" }
use_router(cx, &|| RouterConfiguration::default(), &|| {
Segment::content(comp(Home))
.fixed(
"blog",
Route::empty().nested(
Segment::content(comp(BlogList)).catch_all((comp(BlogPost), PostId {})),
),
)
.fixed("oranges", comp(Oranges))
.fixed("apples", "/oranges")
});
render! {
h1 { "Your app here" }
ul {
li { Link { target: "/", "home" } }
li { Link { target: "/blog", "blog" } }
li { Link { target: "/blog/tim", "tims' blog" } }
li { Link { target: "/blog/bill", "bills' blog" } }
li { Link { target: "/blog/james", "james amazing' blog" } }
li { Link { target: "/apples", "go to apples" } }
}
})
Outlet { }
}
}
fn Home(cx: Scope) -> Element {
log::debug!("rendering home {:?}", cx.scope_id());
cx.render(rsx! { h1 { "Home" } })
render! { h1 { "Home" } }
}
fn BlogList(cx: Scope) -> Element {
log::debug!("rendering blog list {:?}", cx.scope_id());
cx.render(rsx! { div { "Blog List" } })
render! { div { "Blog List" } }
}
struct PostId;
fn BlogPost(cx: Scope) -> Element {
let Some(id) = use_route(cx).segment("id") else {
return cx.render(rsx! { div { "No blog post id" } })
let Some(id) = use_route(cx)?.parameter::<PostId>() else {
return render!(div { "No blog post id" });
};
log::debug!("rendering blog post {}", id);
cx.render(rsx! {
render! {
div {
h3 { "blog post: {id:?}" }
Link { to: "/blog/", "back to blog list" }
Link { target: "/blog/", "back to blog list" }
}
})
}
}
fn Oranges(cx: Scope) -> Element {
render!("Oranges are not apples!")
}