From 1c0aadfa7a9bce35b5335351cd0649f7aaf606de Mon Sep 17 00:00:00 2001 From: marc2332 Date: Sun, 14 Apr 2024 13:22:33 +0200 Subject: [PATCH] improvements --- website/src/content/blog/0.2.md | 34 ++++++++++++++++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/website/src/content/blog/0.2.md b/website/src/content/blog/0.2.md index ee89228c1..3faaa5ac9 100644 --- a/website/src/content/blog/0.2.md +++ b/website/src/content/blog/0.2.md @@ -213,9 +213,41 @@ rsx!( See [X (Twitter) 🎥](https://x.com/mkenzo_8/status/1757766554102415496) +### 📱 NativeRouter +NativeRouter is a opt-in component to be used in combination with `dioxus-router`, it provides navigation with the `back` and `foward` buttons of the mouse, like a web browsers and some apps. + +You really just need to put it inside a `Router` and then put your components inside of it, and it will just work. + +Example +```rust +#[derive(Routable, Clone, PartialEq)] +#[rustfmt::skip] +pub enum Route { + #[layout(Layout)] + #[route("/")] + Home, + #[end_layout] + #[route("/..route")] + PageNotFound { }, +} + +// Because this component is used as layout for all the other routes +// Using the back and forward buttons will work in all of them. +#[component] +fn Layout() -> Element { + rsx!( + NativeRouter { + Outlet:: { } + } + ) +} +``` + ### 🧱 Sidebar -`Sidebar` is a new component to let you have have a menu in the left side and content in the right side, this is specially useful when used in combination with `dioxus-router`. It also supports navigating with the mouse back and forward buttons. +`Sidebar` is a new component to let you have have a menu in the left side and content in the right side, this is specially useful when used in combination with `dioxus-router` and [`NativeRouter`](#-nativerouter). + +[Example Code](https://github.com/marc2332/freya/blob/main/examples/router.rs) ![image](/blog/0.2/sidebar.png)