adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 08:34:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: breadcrumb style

Browse source
This commit is contained in:
luoxiao 2023-11-07 22:28:02 +08:00
parent cf26965f66
commit 7326c4ba95
7 changed files with 113 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
demo/gh-pages Submodule

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

44
demo/src/pages/breadcrumb/mod.rs
View file

@ -10,18 +10,9 @@ pub fn BreadcrumbPage() -> impl IntoView {
<h1>"Breadcrumb"</h1>
<Demo>
<Breadcrumb>
<BreadcrumbItem>
"Rust"
</BreadcrumbItem>
<BreadcrumbItem>
"Leptos"
</BreadcrumbItem>
<BreadcrumbItem>
"UI"
</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>

25
src/breadcrumb/breadcrumb.css
View file

@ -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);
}

4
src/breadcrumb/breadcrumb_item.rs
View file

@ -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">
{children()}
</span>
<span class="thaw-breadcrumb-item__link">{children()}</span>
<span class="thaw-breadcrumb-item__separator">
{move || breadcrumb_separator.0.get()}
</span>

30
src/breadcrumb/mod.rs
View file

@ -1,9 +1,10 @@
mod breadcrumb_item;
mod theme;
use crate::{mount_style, use_theme, Theme};
pub use breadcrumb_item::BreadcrumbItem;
use leptos::*;
use crate::mount_style;
pub use theme::BreadcrumbTheme;
#[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">
<ul>
{children()}
</ul>
<nav class="thaw-breadcrumb" style=move || css_vars.get()>
<ul>{children()}</ul>
</nav>
}
}

26
src/breadcrumb/theme.rs Normal file
View file

@ -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(),
}
}
}

9
src/theme/mod.rs
View file

@ -3,9 +3,9 @@ mod common;
use self::common::CommonTheme;
use crate::{
mobile::{NavBarTheme, TabbarTheme},
AlertTheme, AutoCompleteTheme, AvatarTheme, ButtonTheme, ColorPickerTheme, InputTheme,
MenuTheme, MessageTheme, SelectTheme, SkeletionTheme, SliderTheme, SwitchTheme, TableTheme,
TagTheme, UploadTheme,
AlertTheme, AutoCompleteTheme, AvatarTheme, BreadcrumbTheme, ButtonTheme, ColorPickerTheme,
InputTheme, MenuTheme, MessageTheme, SelectTheme, SkeletionTheme, SliderTheme, SwitchTheme,
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(),
}
}
}