Skip to main content

fc_dioxus/components/
disclosure.rs

1//! Native show/hide sections, from disclosure.css.
2use crate::{
3    core::{assets, attrs::component_attributes},
4    prelude::*,
5    theme::use_stylesheets,
6};
7const BEM: Bem = Bem::new("fc-disclosure");
8fc_modifier! { enum DisclosureFrame for BEM { Plain => None, Boxed => "boxed" } }
9
10/// A `<details>` section. The platform owns opening and closing, keyboard included;
11/// `open` sets the initial state and `ontoggle` reports changes.
12#[component]
13pub fn Disclosure(
14    summary: Element,
15    #[props(default)] open: bool,
16    #[props(default)] boxed: bool,
17    #[props(default)] ontoggle: Option<EventHandler<()>>,
18    #[props(default)] class: Option<String>,
19    #[props(extends = GlobalAttributes)] attributes: Vec<Attribute>,
20    children: Element,
21) -> Element {
22    let attributes = component_attributes(
23        attributes,
24        ClassList::new(BEM.block())
25            .with_modifier(
26                BEM,
27                if boxed {
28                    DisclosureFrame::Boxed
29                } else {
30                    DisclosureFrame::Plain
31                },
32            )
33            .extend(class.as_deref()),
34        &["open"],
35    );
36    rsx! {
37        if use_stylesheets() { document::Stylesheet { href: assets::COMPONENTS_DISCLOSURE_CSS } }
38        details { open, ontoggle: move |_| if let Some(ontoggle) = ontoggle { ontoggle.call(()); }, ..attributes,
39            summary { class: BEM.element("summary"), {summary} }
40            div { class: BEM.element("content"), {children} }
41        }
42    }
43}