Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.

Is it accessible?

Yes. It adheres to the WAI-ARIA design pattern.

Is it styled?

Yes. It comes with default styles that match the other components' aesthetic.

Is it animated?

Yes. It's animated by default.

use leptos::prelude::*;
use singlestage::accordion::*;

#[component]
pub fn AccordionExample() -> impl IntoView {
    view! {
        <Accordion class="w-full sm:w-sm md:w-md">
            <AccordionItem name="demo" open=false>
                <AccordionTrigger>"Is it accessible?"</AccordionTrigger>
                <AccordionContent>
                    "Yes. It adheres to the WAI-ARIA design pattern."
                </AccordionContent>
            </AccordionItem>
            <AccordionItem name="demo" open=true>
                <AccordionTrigger>"Is it styled?"</AccordionTrigger>
                <AccordionContent>
                    "Yes. It comes with default styles
                    that match the other components' aesthetic."
                </AccordionContent>
            </AccordionItem>
            <AccordionItem name="demo">
                <AccordionTrigger>"Is it animated?"</AccordionTrigger>
                <AccordionContent>"Yes. It's animated by default."</AccordionContent>
            </AccordionItem>
        </Accordion>
    }
}

Custom Icons

Triggers may use custom icons.

Custom icons

You can use your own custom icons.

Turn that frown upside down

Custom icons make me happy.

use leptos::prelude::*;
use singlestage::{accordion::*, icon};

#[component]
pub fn CustomIconExample() -> impl IntoView {
    view! {
        <Accordion class="w-xs sm:w-sm md:w-md">
            <AccordionItem name="icon_demo" open=true>
                <AccordionTrigger>
                    "Custom icons" <AccordionIcon slot>{icon!(icondata::LuSmile)}</AccordionIcon>
                </AccordionTrigger>
                <AccordionContent>"You can use your own custom icons."</AccordionContent>
            </AccordionItem>
            <AccordionItem name="icon_demo">
                <AccordionTrigger>
                    "Turn that frown upside down"
                    <AccordionIcon slot>{icon!(icondata::LuFrown)}</AccordionIcon>
                </AccordionTrigger>
                <AccordionContent>"Custom icons make me happy."</AccordionContent>
            </AccordionItem>
        </Accordion>
    }
}

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;
use singlestage::accordion::*;

#[component]
pub fn AccordionAnatomy() -> impl IntoView {
    view! {
        <Accordion>
            <AccordionItem>
                <AccordionTrigger
                    <AccordionIcon />
                <AccordionTrigger/>
                <AccordionContent />
            </AccordionItem>
        </Accordion>
    }
}

API Reference

Accordion

Contains all the parts of an accordion.

Implements global attributes.

AccordionContent

Contains all the collapsible content for an item. Implements HTML global attributes.

Implements global attributes.

AccordionIcon

Optional. Used to wrap content such as an icon to replace the default trigger icon.

Note: the slot attribute is required.

AccordionItem

Contains all the parts of a collapsible section. If all items have the same name then only one can be open at a time.

Implements global and details attributes.

AccordionTrigger

Toggles the collapsed state of its associated item. Also serves as the header. Implements HTML global attributes.

Implements global attributes.