adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-23 14:29:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions
thaw/demo_markdown/docs/accordion/mod.md
luoxiao 5dc62c8244 feat: AccordionItem adds icon
2024-07-18 21:54:13 +08:00

1.7 KiB
Raw Blame History

Accordion

view! {
    <Accordion>
        <AccordionItem value="leptos">
            <AccordionHeader slot>
                "Leptos"
            </AccordionHeader>
            "Build fast web applications with Rust."
        </AccordionItem>
        <AccordionItem  value="thaw">
            <AccordionHeader slot>
                "Thaw"
            </AccordionHeader>
            "An easy to use leptos component library"
        </AccordionItem>
    </Accordion>
}

Collapsible

An accordion can have multiple panels collapsed at the same time.

view! {
    <Accordion collapsible=true>
        <AccordionItem value="leptos">
            <AccordionHeader slot>
                "Leptos"
            </AccordionHeader>
            "Build fast web applications with Rust."
        </AccordionItem>
        <AccordionItem  value="thaw">
            <AccordionHeader slot>
                "Thaw"
            </AccordionHeader>
            "An easy to use leptos component library"
        </AccordionItem>
    </Accordion>
}

Multiple

An accordion supports multiple panels expanded simultaneously. Since it's not simple to determine which panel will be opened by default, multiple will also be collapsed by default on the first render.

view! {
    <Accordion multiple=true>
        <AccordionItem value="leptos">
            <AccordionHeader slot>
                "Leptos"
            </AccordionHeader>
            "Build fast web applications with Rust."
        </AccordionItem>
        <AccordionItem  value="thaw">
            <AccordionHeader slot>
                "Thaw"
            </AccordionHeader>
            "An easy to use leptos component library"
        </AccordionItem>
    </Accordion>
}