dioxus_bootstrap_css/
collapse.rs

1use dioxus::prelude::*;
2
3/// Bootstrap Collapse component — signal-driven, no JavaScript.
4///
5/// ```rust
6/// let expanded = use_signal(|| false);
7/// rsx! {
8///     Button { onclick: move |_| expanded.toggle(), "Toggle Content" }
9///     Collapse { expanded: expanded,
10///         Card { body: rsx! { "Collapsible content here." } }
11///     }
12/// }
13/// ```
14#[derive(Clone, PartialEq, Props)]
15pub struct CollapseProps {
16    /// Signal controlling expanded/collapsed state.
17    pub expanded: Signal<bool>,
18    /// Use horizontal collapse instead of vertical.
19    #[props(default)]
20    pub horizontal: bool,
21    /// Additional CSS classes.
22    #[props(default)]
23    pub class: String,
24    /// Child elements.
25    pub children: Element,
26}
27
28#[component]
29pub fn Collapse(props: CollapseProps) -> Element {
30    let is_expanded = *props.expanded.read();
31
32    let horizontal = if props.horizontal {
33        " collapse-horizontal"
34    } else {
35        ""
36    };
37
38    let show = if is_expanded { " show" } else { "" };
39
40    let full_class = if props.class.is_empty() {
41        format!("collapse{horizontal}{show}")
42    } else {
43        format!("collapse{horizontal}{show} {}", props.class)
44    };
45
46    rsx! {
47        div { class: "{full_class}",
48            {props.children}
49        }
50    }
51}
dioxus_bootstrap_css/collapse.rs

dioxus_bootstrap_css/
collapse.rs
