vertigo_forms/
popup.rs

1use vertigo::{AttrGroup, Computed, Css, DomNode, bind, component, css, dom};
2
3#[derive(Clone, Default)]
4pub struct PopupParams {
5    pub css: Css,
6}
7
8fn popup_css() -> Css {
9    css! {"
10        visibility: hidden;
11        position: absolute;
12        z-index: 1;
13    "}
14}
15
16fn operator_css() -> Css {
17    css! {"
18        position: relative;
19        display: inline-block;
20    "}
21}
22
23#[component]
24pub fn Popup(
25    visible: Computed<bool>,
26    content: DomNode,
27    params: PopupParams,
28    /// Additional attributes for the container
29    c: AttrGroup,
30    /// Additional attributes for the popup
31    p: AttrGroup,
32) {
33    let popup_css = popup_css();
34
35    let container_css = bind!(
36        popup_css,
37        params,
38        visible.map(move |enabled| {
39            let base_css = operator_css();
40
41            if enabled {
42                base_css + css! {"[popup_css] { visibility: visible; }"}
43            } else {
44                base_css
45            }
46        })
47    );
48
49    dom! {
50        <div css={container_css} {..c}>
51            <div css={popup_css + params.css} {..p}>
52                {content}
53            </div>
54        </div>
55    }
56}
57
58#[component]
59pub fn PopupOnHover(
60    element: DomNode,
61    content: DomNode,
62    params: PopupParams,
63    /// Additional attributes for the container
64    c: AttrGroup,
65    /// Additional attributes for the popup
66    p: AttrGroup,
67) {
68    let popup_css = popup_css();
69
70    let operator_css = operator_css() + css! {":hover [popup_css] { visibility: visible; }"};
71
72    dom! {
73        <div css={operator_css} {..c}>
74            {element}
75            <div css={popup_css + params.css} {..p}>
76                {content}
77            </div>
78        </div>
79    }
80}
vertigo_forms/popup.rs

vertigo_forms/
popup.rs
