Update examples, add css

examples/optional_props.rs

@@ -1,8 +1,7 @@
-#![allow(non_snake_case)]
-
-//! Example: README.md showcase
+//! Optional props
 //!
-//! The example from the README.md.
+//! This example demonstrates how to use optional props in your components. The `Button` component has several props,
+//! and we use a variety of attributes to set them.
 
 use dioxus::prelude::*;
 
@@ -12,19 +11,27 @@ fn main() {
 
 fn app() -> Element {
     rsx! {
+        // We can set some of the props, and the rest will be filled with their default values
+        // By default `c` can take a `None` value, but `d` is required to wrap a `Some` value
         Button {
             a: "asd".to_string(),
+            // b can be omitted, and it will be filled with its default value
             c: "asd".to_string(),
             d: Some("asd".to_string()),
             e: Some("asd".to_string()),
         }
+
         Button {
             a: "asd".to_string(),
             b: "asd".to_string(),
+
+            // We can omit the `Some` on `c` since Dioxus automatically transforms Option<T> into optional
             c: "asd".to_string(),
             d: Some("asd".to_string()),
             e: "asd".to_string(),
         }
+
+        // `b` and `e` are ommitted
         Button {
             a: "asd".to_string(),
             c: "asd".to_string(),
@@ -51,6 +58,7 @@ struct ButtonProps {
 
 type SthElse<T> = Option<T>;
 
+#[allow(non_snake_casea)]
 fn Button(props: ButtonProps) -> Element {
     rsx! {
         button {