mirror of
https://github.com/cloud-shuttle/leptos-shadcn-ui.git
synced 2026-05-18 12:30:42 +00:00
141 lines
2.7 KiB
Markdown
141 lines
2.7 KiB
Markdown
# Collapsible Component API
|
|
|
|
A component that can show/hide content with animation.
|
|
|
|
---
|
|
|
|
## Installation
|
|
|
|
```toml
|
|
# Cargo.toml
|
|
[dependencies]
|
|
shadcn-ui-leptos-collapsible = "0.7"
|
|
```
|
|
|
|
```rust
|
|
use shadcn_ui_leptos_collapsible::Collapsible;
|
|
```
|
|
|
|
---
|
|
|
|
## Import
|
|
|
|
```rust
|
|
use shadcn_ui_leptos_collapsible::{
|
|
Collapsible,
|
|
CollapsibleTrigger,
|
|
CollapsibleContent
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## Component API
|
|
|
|
### Collapsible
|
|
|
|
Root component managing collapsible state.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `open` | `Signal<bool>` | **Required** | Open state |
|
|
| `on_open_change` | `Option<Callback<bool>>` | `None` | Change handler |
|
|
| `disabled` | `Signal<bool>` | `false` | Disable collapsible |
|
|
|
|
### CollapsibleTrigger
|
|
|
|
Element that toggles the collapsible.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `class` | `MaybeProp<String>` | `None` | Additional CSS classes |
|
|
|
|
### CollapsibleContent
|
|
|
|
Collapsible content container.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `class` | `MaybeProp<String>` | `None` | Additional CSS classes |
|
|
|
|
---
|
|
|
|
## Usage Examples
|
|
|
|
### Basic Collapsible
|
|
|
|
```rust
|
|
use leptos::prelude::*;
|
|
use shadcn_ui_leptos_collapsible::*;
|
|
|
|
#[component]
|
|
pub fn MyComponent() -> impl IntoView {
|
|
let (open, set_open) = signal(false);
|
|
|
|
view! {
|
|
<Collapsible
|
|
open=open.into()
|
|
on_open_change=Some(Callback::new(move |v| set_open.set(v)))
|
|
>
|
|
<CollapsibleTrigger>
|
|
<button>"Toggle"</button>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<div class="p-4">
|
|
"Hidden content that can be shown/hidden"
|
|
</div>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## CSS Classes
|
|
|
|
```css
|
|
.collapsible-content {
|
|
overflow-hidden transition-all
|
|
}
|
|
|
|
.collapsible-content[data-state=open] {
|
|
animate-collapsible-down
|
|
}
|
|
|
|
.collapsible-content[data-state=closed] {
|
|
animate-collapsible-up
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Accessibility
|
|
|
|
### Keyboard Navigation
|
|
|
|
| Key | Action |
|
|
|-----|--------|
|
|
| **Enter/Space** | Toggle collapsible |
|
|
|
|
---
|
|
|
|
## TypeScript API
|
|
|
|
```typescript
|
|
interface CollapsibleProps {
|
|
open: boolean;
|
|
onOpenChange?: (open: boolean) => void;
|
|
disabled?: boolean;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export const Collapsible: React.FC<CollapsibleProps>;
|
|
export const CollapsibleTrigger: React.FC<ComponentProps>;
|
|
export const CollapsibleContent: React.FC<ComponentProps>;
|
|
```
|
|
|
|
---
|
|
|
|
*Source: [packages/leptos/collapsible/src/default.rs](https://github.com/yourusername/leptos-shadcn-ui/blob/main/packages/leptos/collapsible/src/default.rs)*
|