feat: breadcrumb style

demo/gh-pages

@@ -0,0 +1 @@
+Subproject commit faaa4dfa5547b4c3e117999f4ed4cf2332006f2b

demo/src/pages/breadcrumb/mod.rs

@@ -10,18 +10,9 @@ pub fn BreadcrumbPage() -> impl IntoView {
             <h1>"Breadcrumb"</h1>
             <Demo>
                 <Breadcrumb>
-                    <BreadcrumbItem>
+                    <BreadcrumbItem>"Leptos"</BreadcrumbItem>
-                        "Rust"
+                    <BreadcrumbItem>"UI"</BreadcrumbItem>
-                    </BreadcrumbItem>
+                    <BreadcrumbItem>"Thaw"</BreadcrumbItem>
-                    <BreadcrumbItem>
-                        "Leptos"
-                    </BreadcrumbItem>
-                    <BreadcrumbItem>
-                        "UI"
-                    </BreadcrumbItem>
-                    <BreadcrumbItem>
-                        "Thaw"
-                    </BreadcrumbItem>
                 </Breadcrumb>
                 <DemoCode
                     slot
@@ -29,8 +20,35 @@ pub fn BreadcrumbPage() -> impl IntoView {
                         r#"
                     <Breadcrumb>
                         <BreadcrumbItem>
-                            "Rust"
+                            "Leptos"
                         </BreadcrumbItem>
+                        <BreadcrumbItem>
+                            "UI"
+                        </BreadcrumbItem>
+                        <BreadcrumbItem>
+                            "Thaw"
+                        </BreadcrumbItem>
+                    </Breadcrumb>
+                "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                </DemoCode>
+            </Demo>
+            <h3>"Separator"</h3>
+            <Demo>
+                <Breadcrumb separator=">">
+                    <BreadcrumbItem>"Leptos"</BreadcrumbItem>
+                    <BreadcrumbItem>"UI"</BreadcrumbItem>
+                    <BreadcrumbItem>"Thaw"</BreadcrumbItem>
+                </Breadcrumb>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                    <Breadcrumb separator=">">
                         <BreadcrumbItem>
                             "Leptos"
                         </BreadcrumbItem>

src/breadcrumb/breadcrumb.css

@@ -11,8 +11,31 @@
 
 .thaw-breadcrumb-item__separator {
     margin: 0 8px;
+    color: var(--thaw-font-color);
 }
 
-.thaw-breadcrumb-item__separator:last-child {
+.thaw-breadcrumb
+    .thaw-breadcrumb-item:last-child
+    .thaw-breadcrumb-item__separator {
     display: none;
 }
+
+.thaw-breadcrumb-item__link {
+    padding: 4px;
+    border-radius: 3px;
+    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    color: var(--thaw-font-color);
+    cursor: pointer;
+}
+
+.thaw-breadcrumb
+    .thaw-breadcrumb-item:not(:last-child)
+    .thaw-breadcrumb-item__link:hover {
+    color: var(--thaw-font-color-hover);
+    background-color: var(--thaw-background-color-hover);
+}
+
+.thaw-breadcrumb .thaw-breadcrumb-item:last-child .thaw-breadcrumb-item__link {
+    color: var(--thaw-font-color-hover);
+}

src/breadcrumb/breadcrumb_item.rs

@@ -6,9 +6,7 @@ pub fn BreadcrumbItem(children: Children) -> impl IntoView {
     let breadcrumb_separator = use_breadcrumb_separator();
     view! {
         <li class="thaw-breadcrumb-item">
-            <span class="thaw-breadcrumb-item__link">
+            <span class="thaw-breadcrumb-item__link">{children()}</span>
-                {children()}
-            </span>
             <span class="thaw-breadcrumb-item__separator">
                 {move || breadcrumb_separator.0.get()}
             </span>

src/breadcrumb/mod.rs

@@ -1,9 +1,10 @@
 mod breadcrumb_item;
+mod theme;
 
+use crate::{mount_style, use_theme, Theme};
 pub use breadcrumb_item::BreadcrumbItem;
 use leptos::*;
-
+pub use theme::BreadcrumbTheme;
-use crate::mount_style;
 
 #[component]
 pub fn Breadcrumb(
@@ -11,12 +12,29 @@ pub fn Breadcrumb(
     children: Children,
 ) -> impl IntoView {
     mount_style("breadcrumb", include_str!("./breadcrumb.css"));
+    let theme = use_theme(Theme::light);
+    let css_vars = create_memo(move |_| {
+        let mut css_vars = String::new();
+        theme.with(|theme| {
+            css_vars.push_str(&format!(
+                "--thaw-font-color: {};",
+                theme.breadcrumb.item_font_color
+            ));
+            css_vars.push_str(&format!(
+                "--thaw-font-color-hover: {};",
+                theme.breadcrumb.item_font_color_hover
+            ));
+            css_vars.push_str(&format!(
+                "--thaw-background-color-hover: {};",
+                theme.breadcrumb.item_background_color_hover
+            ));
+        });
+        css_vars
+    });
     provide_context(BreadcrumbSeparatorInjection(separator));
     view! {
-        <nav class="thaw-breadcrumb">
+        <nav class="thaw-breadcrumb" style=move || css_vars.get()>
-            <ul>
+            <ul>{children()}</ul>
-                {children()}
-            </ul>
         </nav>
     }
 }

src/breadcrumb/theme.rs

@@ -0,0 +1,26 @@
+use crate::theme::ThemeMethod;
+
+#[derive(Clone)]
+pub struct BreadcrumbTheme {
+    pub item_font_color: String,
+    pub item_font_color_hover: String,
+    pub item_background_color_hover: String,
+}
+
+impl ThemeMethod for BreadcrumbTheme {
+    fn light() -> Self {
+        Self {
+            item_font_color: "#767c82".into(),
+            item_font_color_hover: "#333639".into(),
+            item_background_color_hover: "#2e333817".into(),
+        }
+    }
+
+    fn dark() -> Self {
+        Self {
+            item_font_color: "#ffffff85".into(),
+            item_font_color_hover: "#ffffffd1".into(),
+            item_background_color_hover: "#ffffff1f".into(),
+        }
+    }
+}

src/theme/mod.rs

@@ -3,9 +3,9 @@ mod common;
 use self::common::CommonTheme;
 use crate::{
     mobile::{NavBarTheme, TabbarTheme},
-    AlertTheme, AutoCompleteTheme, AvatarTheme, ButtonTheme, ColorPickerTheme, InputTheme,
+    AlertTheme, AutoCompleteTheme, AvatarTheme, BreadcrumbTheme, ButtonTheme, ColorPickerTheme,
-    MenuTheme, MessageTheme, SelectTheme, SkeletionTheme, SliderTheme, SwitchTheme, TableTheme,
+    InputTheme, MenuTheme, MessageTheme, SelectTheme, SkeletionTheme, SliderTheme, SwitchTheme,
-    TagTheme, UploadTheme,
+    TableTheme, TagTheme, UploadTheme,
 };
 use leptos::*;
 
@@ -35,6 +35,7 @@ pub struct Theme {
     pub tabbar: TabbarTheme,
     pub auto_complete: AutoCompleteTheme,
     pub color_picker: ColorPickerTheme,
+    pub breadcrumb: BreadcrumbTheme,
 }
 
 impl Theme {
@@ -59,6 +60,7 @@ impl Theme {
             tabbar: TabbarTheme::light(),
             auto_complete: AutoCompleteTheme::light(),
             color_picker: ColorPickerTheme::light(),
+            breadcrumb: BreadcrumbTheme::light(),
         }
     }
     pub fn dark() -> Self {
@@ -82,6 +84,7 @@ impl Theme {
             tabbar: TabbarTheme::dark(),
             auto_complete: AutoCompleteTheme::dark(),
             color_picker: ColorPickerTheme::dark(),
+            breadcrumb: BreadcrumbTheme::dark(),
         }
     }
 }