dioxus_element_plug/components/
page_header.rs

1use dioxus::prelude::*;
2
3/// PageHeader props
4#[derive(Props, Clone, PartialEq)]
5pub struct PageHeaderProps {
6    #[props(default)]
7    pub children: Option<Element>,
8
9    /// Page title
10    pub title: String,
11
12    /// Page subtitle/icon text
13    #[props(default)]
14    pub content: Option<String>,
15
16    /// Icon CSS class
17    #[props(default)]
18    pub icon: Option<String>,
19
20    /// Back button visibility
21    #[props(default = true)]
22    pub show_back: bool,
23
24    #[props(default)]
25    pub on_back: Option<EventHandler<()>>,
26
27    #[props(default)]
28    pub class: Option<String>,
29
30    #[props(default)]
31    pub style: Option<String>,
32}
33
34/// PageHeader component for page header navigation
35#[component]
36pub fn PageHeader(props: PageHeaderProps) -> Element {
37    let mut class_names = vec!["el-page-header".to_string()];
38    if let Some(ref c) = props.class { class_names.push(c.clone()); }
39
40    rsx! {
41        div {
42            class: "{class_names.join(\" \")}",
43            style: props.style.clone().unwrap_or_default(),
44            if props.show_back {
45                div {
46                    class: "el-page-header__back",
47                    onclick: move |_| {
48                        if let Some(handler) = props.on_back {
49                            handler.call(());
50                        }
51                    },
52                    i { class: "el-icon-arrow-left" }
53                    span { class: "el-page-header__icon", "Back" }
54                }
55            }
56            div {
57                class: "el-page-header__left",
58                if let Some(ref icon) = props.icon {
59                    i { class: "{icon} el-page-header__icon" }
60                }
61                span { class: "el-page-header__title", "{props.title}" }
62            }
63            div {
64                class: "el-page-header__content",
65                if let Some(ref content) = props.content {
66                    "{content}"
67                }
68                {props.children}
69            }
70        }
71    }
72}
dioxus_element_plug/components/page_header.rs

dioxus_element_plug/components/
page_header.rs
