dioxus-bootstrap-css 0.3.1

Bootstrap 5.3 components for Dioxus — type-safe RSX wrappers powered by Bootstrap CSS
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

use dioxus::prelude::*;

/// Popover placement.
#[derive(Clone, Copy, Debug, Default, PartialEq)]
pub enum PopoverPlacement {
    #[default]
    Top,
    Bottom,
    Start,
    End,
}

/// Bootstrap Popover component — CSS-positioned, no JavaScript.
///
/// Shows a popover with title and body on click. Click outside to close.
///
/// # Bootstrap HTML → Dioxus
///
/// ```html
/// <!-- Bootstrap HTML (requires JavaScript + Popper.js) -->
/// <button data-bs-toggle="popover" title="Title" data-bs-content="Content">Click</button>
/// ```
///
/// ```rust,no_run
/// // Dioxus equivalent — no JavaScript needed
/// rsx! {
///     Popover {
///         title: "Popover Title",
///         body: rsx! { p { "Rich content here." } },
///         placement: PopoverPlacement::Top,
///         Button { color: Color::Info, "Click for details" }
///     }
/// }
/// ```
///
/// # Props
///
/// - `title` — popover header text
/// - `body` — popover body content (Element)
/// - `placement` — `PopoverPlacement::Top`, `Bottom`, `Start`, `End`
#[derive(Clone, PartialEq, Props)]
pub struct PopoverProps {
    /// Popover title (header).
    #[props(default)]
    pub title: String,
    /// Popover body content.
    pub body: Element,
    /// Popover placement relative to the trigger element.
    #[props(default)]
    pub placement: PopoverPlacement,
    /// Additional CSS classes for the popover.
    #[props(default)]
    pub class: String,
    /// Child element (the trigger).
    pub children: Element,
}

#[component]
pub fn Popover(props: PopoverProps) -> Element {
    let open = use_signal(|| false);
    let is_open = *open.read();
    let mut open_signal = open;

    let placement_class = match props.placement {
        PopoverPlacement::Top => "bs-popover-top",
        PopoverPlacement::Bottom => "bs-popover-bottom",
        PopoverPlacement::Start => "bs-popover-start",
        PopoverPlacement::End => "bs-popover-end",
    };

    let popover_class = if props.class.is_empty() {
        format!("popover fade {placement_class} show")
    } else {
        format!("popover fade {placement_class} show {}", props.class)
    };

    let position_style = match props.placement {
        PopoverPlacement::Top => {
            "position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 0.5rem;"
        }
        PopoverPlacement::Bottom => {
            "position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 0.5rem;"
        }
        PopoverPlacement::Start => {
            "position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 0.5rem;"
        }
        PopoverPlacement::End => {
            "position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 0.5rem;"
        }
    };

    let arrow_placement = match props.placement {
        PopoverPlacement::Top => {
            "bottom: calc(-0.5rem - 1px); left: 50%; transform: translateX(-50%);"
        }
        PopoverPlacement::Bottom => {
            "top: calc(-0.5rem - 1px); left: 50%; transform: translateX(-50%);"
        }
        PopoverPlacement::Start => {
            "right: calc(-0.5rem - 1px); top: 50%; transform: translateY(-50%);"
        }
        PopoverPlacement::End => {
            "left: calc(-0.5rem - 1px); top: 50%; transform: translateY(-50%);"
        }
    };

    rsx! {
        // Overlay to close on outside click
        if is_open {
            div {
                style: "position: fixed; inset: 0; z-index: 1069;",
                onclick: move |_| open_signal.set(false),
            }
        }
        div {
            style: if is_open { "position: relative; display: inline-block; z-index: 1070;" } else { "position: relative; display: inline-block;" },
            onclick: move |evt| {
                evt.stop_propagation();
                open_signal.set(!is_open);
            },
            {props.children}
            if is_open {
                div {
                    class: "{popover_class}",
                    role: "tooltip",
                    style: "{position_style} z-index: 1070; min-width: 200px;",
                    onclick: move |evt| evt.stop_propagation(),
                    div { class: "popover-arrow", style: "position: absolute; {arrow_placement}" }
                    if !props.title.is_empty() {
                        h3 { class: "popover-header", "{props.title}" }
                    }
                    div { class: "popover-body", {props.body} }
                }
            }
        }
    }
}