dioxus_element_plug/components/
collapse.rs

1use dioxus::prelude::*;
2
3/// Collapse props
4#[derive(Props, Clone, PartialEq)]
5pub struct CollapseProps {
6    #[props(default)]
7    pub children: Element,
8
9    /// Currently expanded item values
10    #[props(default)]
11    pub active_names: Vec<String>,
12
13    /// Whether to allow multiple expanded items
14    #[props(default = false)]
15    pub accordion: bool,
16
17    #[props(default)]
18    pub on_change: Option<EventHandler<Vec<String>>>,
19
20    #[props(default)]
21    pub class: Option<String>,
22
23    #[props(default)]
24    pub style: Option<String>,
25}
26
27/// Collapse component for collapsible panels
28#[component]
29pub fn Collapse(props: CollapseProps) -> Element {
30    let mut class_names = vec!["el-collapse".to_string()];
31    if let Some(ref c) = props.class { class_names.push(c.clone()); }
32    let class_string = class_names.join(" ");
33
34    rsx! {
35        div {
36            class: "{class_string}",
37            style: props.style.clone().unwrap_or_default(),
38            role: "tablist",
39            {props.children}
40        }
41    }
42}
43
44/// CollapseItem props
45#[derive(Props, Clone, PartialEq)]
46pub struct CollapseItemProps {
47    #[props(default)]
48    pub children: Element,
49
50    /// Unique name for this item
51    pub name: String,
52
53    /// Title text
54    pub title: String,
55
56    /// Whether this item is disabled
57    #[props(default = false)]
58    pub disabled: bool,
59
60    #[props(default)]
61    pub on_click: Option<EventHandler<String>>,
62
63    #[props(default)]
64    pub class: Option<String>,
65
66    #[props(default)]
67    pub style: Option<String>,
68}
69
70/// CollapseItem component for individual collapsible sections
71#[component]
72pub fn CollapseItem(props: CollapseItemProps) -> Element {
73    let name_clone = props.name.clone();
74    rsx! {
75        div {
76            class: "el-collapse-item",
77            style: props.style.clone().unwrap_or_default(),
78            div {
79                class: "el-collapse-item__header",
80                role: "tab",
81                onclick: move |_| {
82                    if !props.disabled {
83                        if let Some(handler) = props.on_click {
84                            handler.call(name_clone.clone());
85                        }
86                    }
87                },
88                "{props.title}"
89                i { class: "el-collapse-item__arrow el-icon-arrow-right" }
90            }
91            div {
92                class: "el-collapse-item__wrap",
93                div {
94                    class: "el-collapse-item__content",
95                    {props.children}
96                }
97            }
98        }
99    }
100}
dioxus_element_plug/components/collapse.rs

dioxus_element_plug/components/
collapse.rs
