mirror of
https://github.com/cloud-shuttle/leptos-shadcn-ui.git
synced 2026-05-27 17:00:47 +00:00
180 lines
3.8 KiB
Markdown
180 lines
3.8 KiB
Markdown
# Accordion Component API
|
|
|
|
A vertically collapsible component for organizing content into expandable sections.
|
|
|
|
---
|
|
|
|
## Installation
|
|
|
|
```toml
|
|
# Cargo.toml
|
|
[dependencies]
|
|
shadcn-ui-leptos-accordion = "0.7"
|
|
```
|
|
|
|
```rust
|
|
use shadcn_ui_leptos_accordion::Accordion;
|
|
```
|
|
|
|
---
|
|
|
|
## Import
|
|
|
|
```rust
|
|
use shadcn_ui_leptos_accordion::{
|
|
Accordion,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
AccordionContent
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## Component API
|
|
|
|
### Accordion
|
|
|
|
Root container managing accordion state.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `value` | `Signal<String>` | **Required** | Currently open item |
|
|
| `on_change` | `Option<Callback<String>>` | `None` | Change handler |
|
|
| `multiple` | `Signal<bool>` | `false` | Allow multiple open |
|
|
| `collapsible` | `Signal<bool>` | `true` | Allow collapsing all |
|
|
| `class` | `MaybeProp<String>` | `None` | Additional CSS classes |
|
|
|
|
### AccordionItem
|
|
|
|
Individual accordion section.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `value` | `String` | **Required** | Item identifier |
|
|
| `disabled` | `Signal<bool>` | `false` | Disable item |
|
|
|
|
### AccordionTrigger
|
|
|
|
Clickable header for accordion item.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `class` | `MaybeProp<String>` | `None` | Additional CSS classes |
|
|
|
|
### AccordionContent
|
|
|
|
Collapsible content area.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `class` | `MaybeProp<String>` | `None` | Additional CSS classes |
|
|
|
|
---
|
|
|
|
## Usage Examples
|
|
|
|
### Basic Accordion
|
|
|
|
```rust
|
|
use leptos::prelude::*;
|
|
use shadcn_ui_leptos_accordion::*;
|
|
|
|
#[component]
|
|
pub fn MyComponent() -> impl IntoView {
|
|
let (value, set_value) = signal("item-1".to_string());
|
|
|
|
view! {
|
|
<Accordion
|
|
value=value.into()
|
|
on_change=Some(Callback::new(move |v| set_value.set(v)))
|
|
>
|
|
<AccordionItem value="item-1">
|
|
<AccordionTrigger>"Is it accessible?"</AccordionTrigger>
|
|
<AccordionContent>
|
|
"Yes. It adheres to the WAI-ARIA design pattern."
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
|
|
<AccordionItem value="item-2">
|
|
<AccordionTrigger>"Is it styled?"</AccordionTrigger>
|
|
<AccordionContent>
|
|
"Yes. It comes with default styles."
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## CSS Classes
|
|
|
|
```css
|
|
.accordion {
|
|
border-b
|
|
}
|
|
|
|
.accordion-item {
|
|
border-b
|
|
}
|
|
|
|
.accordion-trigger {
|
|
flex flex-1 items-center justify-between
|
|
py-4 font-medium transition-all
|
|
hover:underline [&[data-state=open]>svg]:rotate-180
|
|
}
|
|
|
|
.accordion-content {
|
|
overflow-hidden text-sm transition-all
|
|
}
|
|
|
|
.accordion-content[data-state=closed] {
|
|
animate-accordion-up
|
|
}
|
|
|
|
.accordion-content[data-state=open] {
|
|
animate-accordion-down
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Accessibility
|
|
|
|
### Keyboard Navigation
|
|
|
|
| Key | Action |
|
|
|-----|--------|
|
|
| **Tab** | Navigate accordion |
|
|
| **Enter/Space** | Toggle section |
|
|
| **Arrow Down** | Next section |
|
|
| **Arrow Up** | Previous section |
|
|
| **Home** | First section |
|
|
| **End** | Last section |
|
|
|
|
---
|
|
|
|
## TypeScript API
|
|
|
|
```typescript
|
|
interface AccordionProps {
|
|
value: string;
|
|
onChange?: (value: string) => void;
|
|
multiple?: boolean;
|
|
collapsible?: boolean;
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export const Accordion: React.FC<AccordionProps>;
|
|
export const AccordionItem: React.FC<{ value: string; disabled?: boolean }>;
|
|
export const AccordionTrigger: React.FC<ComponentProps>;
|
|
export const AccordionContent: React.FC<ComponentProps>;
|
|
```
|
|
|
|
---
|
|
|
|
*Source: [packages/leptos/accordion/src/default.rs](https://github.com/yourusername/leptos-shadcn-ui/blob/main/packages/leptos/accordion/src/default.rs)*
|