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

Merge pull request #6 from thaw-ui/feat/breadcrumb

Browse source 
Feat/breadcrumb
This commit is contained in:
luoxiaozero 2023-11-07 22:28:53 +08:00 • committed by GitHub
commit 636dcf7613
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 218 additions and 4 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

1
demo/src/app.rs
View file

@ -75,6 +75,7 @@ fn TheRouter() -> impl IntoView {
<Route path="/tag" view=TagPage/>
<Route path="/upload" view=UploadPage/>
<Route path="/loading-bar" view=LoadingBarPage/>
<Route path="/breadcrumb" view=BreadcrumbPage/>
</Route>
<Route path="/mobile/tabbar" view=TabbarDemoPage/>
<Route path="/mobile/nav-bar" view=NavBarDemoPage/>

72
demo/src/pages/breadcrumb/mod.rs Normal file
View file

@ -0,0 +1,72 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn BreadcrumbPage() -> impl IntoView {
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Breadcrumb"</h1>
<Demo>
<Breadcrumb>
<BreadcrumbItem>"Leptos"</BreadcrumbItem>
<BreadcrumbItem>"UI"</BreadcrumbItem>
<BreadcrumbItem>"Thaw"</BreadcrumbItem>
</Breadcrumb>
<DemoCode
slot
html=highlight_str!(
r#"
<Breadcrumb>
<BreadcrumbItem>
"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>
<BreadcrumbItem>
"UI"
</BreadcrumbItem>
<BreadcrumbItem>
"Thaw"
</BreadcrumbItem>
</Breadcrumb>
"#,
"rust"
)
>
""
</DemoCode>
</Demo>
</div>
}
}

6
demo/src/pages/components.rs
View file

@ -52,7 +52,7 @@ impl IntoView for MenuGroupOption {
fn into_view(self) -> View {
let Self { label, children } = self;
view! {
<MenuGroup label>
<MenuGroup label=format!("{label} ({})", children.len())>
{
children.into_iter().map(|v| v.into_view()).collect_view()
}
@ -167,6 +167,10 @@ fn gen_menu_data() -> Vec<MenuGroupOption> {
MenuGroupOption {
label: "Navigation Components".into(),
children: vec![
MenuItemOption {
value: "breadcrumb".into(),
label: "Breadcrumb".into(),
},
MenuItemOption {
value: "loading-bar".into(),
label: "Loading Bar".into(),

2
demo/src/pages/mod.rs
View file

@ -2,6 +2,7 @@ mod alert;
mod auto_complete;
mod avatar;
mod badge;
mod breadcrumb;
mod button;
mod card;
mod checkbox;
@ -37,6 +38,7 @@ pub use alert::*;
pub use auto_complete::*;
pub use avatar::*;
pub use badge::*;
pub use breadcrumb::*;
pub use button::*;
pub use card::*;
pub use checkbox::*;

41
src/breadcrumb/breadcrumb.css Normal file
View file

@ -0,0 +1,41 @@
.thaw-breadcrumb > ul {
list-style: none;
padding: 0;
margin: 0;
}
.thaw-breadcrumb-item {
display: inline-flex;
align-items: center;
}
.thaw-breadcrumb-item__separator {
margin: 0 8px;
color: var(--thaw-font-color);
}
.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);
}

15
src/breadcrumb/breadcrumb_item.rs Normal file
View file

@ -0,0 +1,15 @@
use super::use_breadcrumb_separator;
use leptos::*;
#[component]
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__separator">
{move || breadcrumb_separator.0.get()}
</span>
</li>
}
}

47
src/breadcrumb/mod.rs Normal file
View file

@ -0,0 +1,47 @@
mod breadcrumb_item;
mod theme;
use crate::{mount_style, use_theme, Theme};
pub use breadcrumb_item::BreadcrumbItem;
use leptos::*;
pub use theme::BreadcrumbTheme;
#[component]
pub fn Breadcrumb(
#[prop(default = MaybeSignal::Static("/".to_string()),into)] separator: MaybeSignal<String>,
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" style=move || css_vars.get()>
<ul>{children()}</ul>
</nav>
}
}
#[derive(Clone)]
pub(crate) struct BreadcrumbSeparatorInjection(MaybeSignal<String>);
pub(crate) fn use_breadcrumb_separator() -> BreadcrumbSeparatorInjection {
expect_context()
}

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

2
src/lib.rs
View file

@ -2,6 +2,7 @@ mod alert;
mod auto_complete;
mod avatar;
mod badge;
mod breadcrumb;
mod button;
mod card;
mod checkbox;
@ -41,6 +42,7 @@ pub use alert::*;
pub use auto_complete::*;
pub use avatar::*;
pub use badge::*;
pub use breadcrumb::*;
pub use button::*;
pub use card::*;
pub use checkbox::*;

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