Skip to main content

yggdrasil/components/post/
breadcrumbs.rs

1//! 面包屑组件
2//!
3//! 在文章详情页展示从首页到当前文章标题的导航路径。
4
5use dioxus::prelude::*;
6use dioxus::router::components::Link;
7
8use crate::router::Route;
9
10/// 面包屑导航组件。
11///
12/// Props:
13/// - `title`:当前文章标题
14///
15/// 渲染 `Home > 当前标题` 的面包屑路径。
16#[component]
17pub fn Breadcrumbs(title: String) -> Element {
18    rsx! {
19        nav {
20            class: "breadcrumbs",
21            role: "navigation",
22            aria_label: "Breadcrumb",
23            Link { to: Route::Home {}, "Home" }
24            svg {
25                xmlns: "http://www.w3.org/2000/svg",
26                view_box: "0 0 24 24",
27                fill: "none",
28                stroke: "currentColor",
29                stroke_width: "2",
30                stroke_linecap: "round",
31                stroke_linejoin: "round",
32                class: "feather feather-chevron-right",
33                width: "16",
34                height: "16",
35                polyline { points: "9 18 15 12 9 6" }
36            }
37            span { "{title}" }
38        }
39    }
40}