dioxus_element_plug/components/
popover.rs

1use dioxus::prelude::*;
2
3/// Popover props
4#[derive(Props, Clone, PartialEq)]
5pub struct PopoverProps {
6    #[props(default)]
7    pub children: Element,
8
9    #[props(default)]
10    pub title: Option<String>,
11
12    #[props(default)]
13    pub content: Option<String>,
14
15    #[props(default = "bottom".to_string())]
16    pub placement: String,
17
18    #[props(default = "hover".to_string())]
19    pub trigger: String,
20
21    #[props(default = "dark".to_string())]
22    pub effect: String,
23
24    #[props(default = 200)]
25    pub width: u32,
26
27    #[props(default = false)]
28    pub disabled: bool,
29
30    #[props(default = false)]
31    pub visible: bool,
32
33    #[props(default)]
34    pub class: Option<String>,
35}
36
37/// Popover component for rich content tooltips
38#[component]
39pub fn Popover(props: PopoverProps) -> Element {
40    if props.disabled {
41        return rsx! { {props.children} };
42    }
43
44    rsx! {
45        span {
46            class: "el-popover__trigger",
47            style: "display: inline-block; position: relative;",
48            {props.children}
49            if props.visible {
50                div {
51                    class: "el-popover el-popper is-{props.effect}",
52                    style: "position: absolute; z-index: 3000; width: {props.width}px;",
53                    if let Some(ref title) = props.title {
54                        div { class: "el-popover__title", "{title}" }
55                    }
56                    if let Some(ref content) = props.content {
57                        div { class: "el-popover__content", "{content}" }
58                    }
59                }
60            }
61        }
62    }
63}
dioxus_element_plug/components/popover.rs

dioxus_element_plug/components/
popover.rs
