Update examples, add css

examples/link.rs

@@ -1,24 +1,21 @@
+//! How to use links in Dioxus
+//!
+//! The `router` crate gives us a `Link` component which is a much more powerful version of the standard HTML link.
+//! However, you can use the traditional `<a>` tag if you want to build your own `Link` component.
+//!
+//! The `Link` component integrates with the Router and is smart enough to detect if the link is internal or external.
+//! It also allows taking any `Route` as a target, making your links typesafe
+
 use dioxus::prelude::*;
 
 fn main() {
-    launch_desktop(App);
+    launch_desktop(app);
 }
 
-#[component]
-fn App() -> Element {
+fn app() -> Element {
     rsx! (
-        div {
-            p { a { href: "http://dioxuslabs.com/", "Default link - links outside of your app" } }
-            p {
-                a {
-                    href: "http://dioxuslabs.com/",
-                    prevent_default: "onclick",
-                    onclick: |_| println!("Hello Dioxus"),
-                    "Custom event link - links inside of your app"
-                }
-            }
-        }
-        div { Router::<Route> {} }
+        style { {include_str!("./assets/links.css")} }
+        Router::<Route> {}
     )
 }
 
@@ -28,6 +25,10 @@ enum Route {
     #[layout(Header)]
         #[route("/")]
         Home {},
+
+        #[route("/default-links")]
+        DefaultLinks {},
+
         #[route("/settings")]
         Settings {},
 }
@@ -36,13 +37,10 @@ enum Route {
 fn Header() -> Element {
     rsx! {
         h1 { "Your app here" }
-        ul {
-            li {
-                Link { to: Route::Home {}, "home" }
-            }
-            li {
-                Link { to: Route::Settings {}, "settings" }
-            }
+        nav { id: "nav",
+            Link { to: Route::Home {}, "home" }
+            Link { to: Route::DefaultLinks {}, "default links" }
+            Link { to: Route::Settings {}, "settings" }
         }
         Outlet::<Route> {}
     }
@@ -57,3 +55,23 @@ fn Home() -> Element {
 fn Settings() -> Element {
     rsx!( h1 { "Settings" } )
 }
+
+#[component]
+fn DefaultLinks() -> Element {
+    rsx! {
+        // Just some default links
+        div { id: "external-links",
+            // This link will open in a webbrowser
+            a { href: "http://dioxuslabs.com/", "Default link - links outside of your app" }
+
+            // This link will do nothing - we're preventing the default behavior
+            // It will just log "Hello Dioxus" to the console
+            a {
+                href: "http://dioxuslabs.com/",
+                prevent_default: "onclick",
+                onclick: |_| println!("Hello Dioxus"),
+                "Custom event link - links inside of your app"
+            }
+        }
+    }
+}