+-----------------------------------------------------------+
|                  [Accordion Container]                    |  <-- `class` & `style`
|                                                           |
|   +-----------------------------------------------+       |  <-- `collapsed_class` & `collapsed_style`
|   |             [Collapsed Content]               |       |  <-- `collapsed`
|   +-----------------------------------------------+       |
|                                                           |
|   +-----------------------------------------------+       |  <-- `expanded_class` & `expanded_style`
|   |             [Expanded Content]                |       |  <-- `expanded`
|   +-----------------------------------------------+       |
|                                                           |
|   +-----------------------------------------------+       |  <-- `content_class` & `content_style`
|   |              [Accordion Content]              |       |  <-- `children`
|   +-----------------------------------------------+       |
|                                                           |
+-----------------------------------------------------------+

os add accordion-rs yew

Edit Component

🧬 Accordion RS Dioxus Usage

Adding Accordion RS to your project is simple:

1. Make sure your project is set up with Dioxus. Refer to the Dioxus Getting Started Guide for setup instructions.

2. Add the Accordion component to your dependencies by including it in your Cargo.toml file.

   cargo add accordion-rs --features=dio
   

3. Import the Accordion component into your Dioxus component and start using it in your app.

🛠️ Usage

Incorporating the Accordion component into your application is easy. Follow these steps:

1. Import the Accordion component into your Dioxus project:

   use dioxus::prelude::*;
   use accordion_rs::dioxus::Accordion;

2. Define the accordion sections and use the Accordion component in your Dioxus app:

   use accordion_rs::dioxus::{Accordion, Item, List};
   use accordion_rs::{Size, Align};
   use dioxus::prelude::*;
   
   pub fn app() -> Element {
       let expand = use_signal(|| false);
   
       rsx!(
           Accordion {
               expand: expand,
               size: Size::XLarge,
               expanded: rsx!(div { "Accordion Expanded" }),
               collapsed: rsx!(div { "Accordion Collapsed" }),
               class: "bg-gray-900 text-gray-300 border border-gray-700 p-4 rounded-lg",
               expanded_class: "text-white bg-gray-800",
               collapsed_class: "text-gray-400 bg-gray-800",
               List {
                   Item { align: Align::Left, "Item 1 - Left" }
                   Item { align: Align::Right, "Item 2 - Right" }
               }
           }
       )
   }

🔧 Props

Main Props

Styling Props

+-----------------------------------------------------------+
|                  [Accordion Container]                    |  <-- `class` & `style`
|                                                           |
|   +-----------------------------------------------+       |  <-- `collapsed_class` & `collapsed_style`
|   |             [Collapsed Content]               |       |  <-- `collapsed`
|   +-----------------------------------------------+       |
|                                                           |
|   +-----------------------------------------------+       |  <-- `expanded_class` & `expanded_style`
|   |             [Expanded Content]                |       |  <-- `expanded`
|   +-----------------------------------------------+       |
|                                                           |
|   +-----------------------------------------------+       |  <-- `content_class` & `content_style`
|   |              [Accordion Content]              |       |  <-- `children`
|   +-----------------------------------------------+       |
|                                                           |
+-----------------------------------------------------------+

Callback Props

A11Y Props

💡 Notes

• Use the expand prop to control the open/close state of the accordion programmatically.
• The size prop can be customized to adjust the width of the accordion.
• Callback props like will_open and did_close provide hooks to perform actions during the accordion's lifecycle.
• Custom classes and styles allow for extensive customization of the accordion's appearance and behavior.
• ARIA attributes can be enabled/disabled using the aria_enabled prop for better screen reader compatibility.

Usage

CLI Usage

You can import Accordion RS directly into your project to customize and modify it using the opensass cli:

os add accordion-rs dio

Edit Component

🌱 Leptos Accordion RS Usage

Adding Accordion RS to your Leptos project is simple:

1. Make sure your project is set up with Leptos. Refer to their Getting Started Guide for setup instructions.

2. Add accordion-rs to your dependencies:

   cargo add accordion-rs --features=lep
   

3. Import the Accordion component into your Leptos component and start using it in your app.

🛠️ Usage

Basic Example

The following is an example of using the Accordion in a Leptos project:

use leptos::prelude::*;
use accordion_rs::leptos::{Accordion, List, Item};
use accordion_rs::Align;

#[component]
pub fn App() -> impl IntoView {
    let expanded = signal(false);

    view! {
        <Accordion
            expand={expanded}
            expanded={Box::new(|| view! { <h3>{ "Accordion Expanded" }</h3> }.into_any())}
            collapsed={Box::new(|| view! { <h3>{ "Accordion Collapsed" }</h3> }.into_any())}
        >
            <List>
                <Item align={Align::Left}>{ "Item 1 - Left" }</Item>
                <Item align={Align::Right}>{ "Item 2 - Right" }</Item>
            </List>
        </Accordion>
    }
}

Accordion with Callbacks

You can also attach lifecycle callbacks to handle events during the accordion's state changes.

use leptos::prelude::*;
use leptos::logging::log;
use accordion_rs::leptos::{Accordion, List, Item};

#[component]
pub fn App() -> impl IntoView {
    let expanded = signal(false);

    let will_open = move || log!("Accordion will open.");
    let did_open = move || log!("Accordion has opened.");
    let will_close = move || log!("Accordion will close.");
    let did_close = move || log!("Accordion has closed.");

    view! {
        <Accordion
            expand={expanded}
            expanded={Box::new(|| view! { <p>"Expanded Content"</p> }.into_any())}
            collapsed={Box::new(|| view! { <p>"Collapsed Content"</p> }.into_any())}
            will_open={Callback::from(will_open)}
            did_open={Callback::from(did_open)}
            will_close={Callback::from(will_close)}
            did_close={Callback::from(did_close)}
        >
            <List>
                <Item>{ "Logging Accordion Lifecycle Events" }</Item>
            </List>
        </Accordion>
    }
}

🔧 Props

Main Props

Styling Props

Callback Props

Accessibility Props

💡 Tips

• Use the expand prop signal to control the open/close state of the accordion programmatically.
• The size prop can be customized to adjust the width of the accordion.
• Callback props like will_open and did_close provide hooks to perform actions during the accordion's lifecycle.
• Custom classes and styles allow for extensive customization of the accordion's appearance and behavior.
• ARIA attributes can be enabled/disabled using the aria_enabled prop for better screen reader compatibility.

Usage

CLI Usage

You can import Accordion RS directly into your project to customize and modify it using the opensass cli:

os add accordion-rs lep