zino_dioxus/navigation/
dropdown.rs

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
use crate::class::Class;
use dioxus::prelude::*;
use zino_core::SharedString;

/// An interactive dropdown menu for discoverable content.
pub fn Dropdown(props: DropdownProps) -> Element {
    let title = props.title;
    rsx! {
        div {
            class: "{props.class}",
            class: if props.hoverable { "is-hoverable" },
            class: if props.dropup { "is-up" },
            class: if props.align == "right" { "is-right" },
            div {
                class: props.trigger_class,
                title: if !title.is_empty() { "{title}" },
                { props.trigger }
            }
            div {
                class: props.menu_class,
                div {
                    class: props.content_class,
                    for item in props.items.iter() {
                        { item }
                    }
                }
            }
        }
    }
}

/// The [`Dropdown`] properties struct for the configuration of the component.
#[derive(Clone, PartialEq, Props)]
pub struct DropdownProps {
    /// The class attribute for the component.
    #[props(into, default = "dropdown")]
    pub class: Class,
    /// A class to apply to the trigger button.
    #[props(into, default = "dropdown-trigger")]
    pub trigger_class: Class,
    /// A class to apply to the menu.
    #[props(into, default = "dropdown-menu")]
    pub menu_class: Class,
    /// A class to apply to the menu content.
    #[props(into, default = "dropdown-content")]
    pub content_class: Class,
    /// A flag to indicate whether the dropdown will show up when hovering.
    #[props(default)]
    pub hoverable: bool,
    /// A flag to indicate whether the dropdown menu will appear above the trigger button.
    #[props(default)]
    pub dropup: bool,
    /// The alignment of the dropdown: `left` | `right`.
    #[props(into, default)]
    pub align: SharedString,
    /// The title for the trigger button.
    #[props(into, default)]
    pub title: SharedString,
    /// The trigger button to be rendered.
    pub trigger: Element,
    /// The menu items to be rendered.
    #[props(into)]
    pub items: Vec<Element>,
}