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: add breadcrumb component

Browse source
This commit is contained in:
luoxiao 2023-11-07 17:43:28 +08:00
parent f0e56c065f
commit cf26965f66
8 changed files with 128 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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/>

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

@ -0,0 +1,54 @@
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>
"Rust"
</BreadcrumbItem>
<BreadcrumbItem>
"Leptos"
</BreadcrumbItem>
<BreadcrumbItem>
"UI"
</BreadcrumbItem>
<BreadcrumbItem>
"Thaw"
</BreadcrumbItem>
</Breadcrumb>
<DemoCode
slot
html=highlight_str!(
r#"
<Breadcrumb>
<BreadcrumbItem>
"Rust"
</BreadcrumbItem>
<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::*;

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

@ -0,0 +1,18 @@
.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;
}
.thaw-breadcrumb-item__separator:last-child {
display: none;
}

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

@ -0,0 +1,17 @@
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>
}
}

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

@ -0,0 +1,29 @@
mod breadcrumb_item;
pub use breadcrumb_item::BreadcrumbItem;
use leptos::*;
use crate::mount_style;
#[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"));
provide_context(BreadcrumbSeparatorInjection(separator));
view! {
<nav class="thaw-breadcrumb">
<ul>
{children()}
</ul>
</nav>
}
}
#[derive(Clone)]
pub(crate) struct BreadcrumbSeparatorInjection(MaybeSignal<String>);
pub(crate) fn use_breadcrumb_separator() -> BreadcrumbSeparatorInjection {
expect_context()
}

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::*;