Accordion builder

A stack of disclosure sections.

A builder is RenderOnce. Construct and mount it in one expression.

The verified accordion scene in studio-dark

use gpui_kit::navigation::Accordion;

Reviewed in accordion.

Also drawn by motion-state reading-direction, which arranges components rather than reviewing them.

Construct

new(ident: impl Into<Ident>) -> Self

Options

Chain onto the value.

section(section: AccordionSection) -> Self
sections(sections: impl IntoIterator<Item = AccordionSection>) -> Self
expanded(ids: impl IntoIterator<Item = SharedString>) -> Self
expanded_ids<S: AsRef<str>>(ids: &[S]) -> Self
exclusive(exclusive: bool) -> Self
on_toggle(handler: impl Fn(SharedString, bool, &mut Window, &mut App) + 'static) -> Self

Example · accordion

fn accordion(_window: &mut Window, cx: &mut App) -> AnyElement {
    let theme = cx.theme().clone();
    stack(&theme)
        .w(px(520.0))
        .child(
            Accordion::new("scene.accordion.settings")
                .expanded_ids(&["network"])
                .on_toggle(|_, _, _, _| {})
                .section(
                    AccordionSection::new("network", "Network")
                        .description("How this machine reaches a host")
                        .body(crate::foundation::text(
                            &theme,
                            TypeScale::Body,
                            "Requests go out over the system proxy.",
                        )),
                )
                .section(
                    AccordionSection::new("storage", "Storage")
                        .description("Where verified results are kept")
                        .body(crate::foundation::text(
                            &theme,
                            TypeScale::Body,
                            "Nothing is written outside the workspace.",
                        )),
                )
                .section(
                    AccordionSection::new("policy", "Managed by policy")
                        .description("This machine cannot change these")
                        .disabled(true)
                        .body(crate::foundation::text(
                            &theme,
                            TypeScale::Body,
                            "Set by the administrator.",
                        )),
                ),
        )
        // The open section is the last one, which is the case where the body
        // meets the card's rounded corners.
        .child(
            Accordion::new("scene.accordion.release")
                .expanded_ids(&["publish"])
                .on_toggle(|_, _, _, _| {})
                .section(
                    AccordionSection::new("build", "Build")
                        .description("What the last run produced"),
                )
                .section(
                    AccordionSection::new("publish", "Publish")
                        .description("Where the signed bundle goes")
                        .body(crate::foundation::text(
                            &theme,
                            TypeScale::Body,
                            "The bundle is published to the workspace channel.",
                        )),
                ),
        )
        .into_any_element()
}

Source: crates/gpui-kit/src/navigation/accordion.rs