mirror of
https://github.com/cloud-shuttle/leptos-shadcn-ui.git
synced 2026-05-14 10:30:41 +00:00
116 lines
2.0 KiB
Markdown
116 lines
2.0 KiB
Markdown
# Toggle Component API
|
|
|
|
A two-state button that can be on or off.
|
|
|
|
---
|
|
|
|
## Installation
|
|
|
|
```toml
|
|
# Cargo.toml
|
|
[dependencies]
|
|
shadcn-ui-leptos-toggle = "0.7"
|
|
```
|
|
|
|
```rust
|
|
use shadcn_ui_leptos_toggle::Toggle;
|
|
```
|
|
|
|
---
|
|
|
|
## Component API
|
|
|
|
### Toggle
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `pressed` | `Signal<bool>` | **Required** | Toggle state |
|
|
| `on_change` | `Option<Callback<bool>>` | `None` | Change handler |
|
|
| `disabled` | `Signal<bool>` | `false` | Disable toggle |
|
|
| `variant` | `MaybeProp<ToggleVariant>` | `Default` | Visual style |
|
|
| `class` | `MaybeProp<String>` | `None` | Additional CSS classes |
|
|
|
|
### ToggleVariant
|
|
|
|
```rust
|
|
pub enum ToggleVariant {
|
|
Default,
|
|
Outline,
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Usage Examples
|
|
|
|
### Basic Toggle
|
|
|
|
```rust
|
|
use leptos::prelude::*;
|
|
use shadcn_ui_leptos_toggle::Toggle;
|
|
|
|
#[component]
|
|
pub fn MyComponent() -> impl IntoView {
|
|
let (pressed, set_pressed) = signal(false);
|
|
|
|
view! {
|
|
<Toggle
|
|
pressed=pressed.into()
|
|
on_change=Some(Callback::new(move |v| set_pressed.set(v)))
|
|
>
|
|
"Toggle me"
|
|
</Toggle>
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## CSS Classes
|
|
|
|
```css
|
|
.toggle {
|
|
inline-flex items-center justify-center rounded-md
|
|
text-sm font-medium transition-colors
|
|
hover:bg-muted hover:text-muted-foreground
|
|
focus-visible:outline-none focus-visible:ring-2
|
|
focus-visible:ring-ring disabled:pointer-events-none
|
|
disabled:opacity-50
|
|
}
|
|
|
|
.toggle[data-state=on] {
|
|
bg-accent text-accent-foreground
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Accessibility
|
|
|
|
### Keyboard Navigation
|
|
|
|
| Key | Action |
|
|
|-----|--------|
|
|
| **Enter** | Toggle state |
|
|
| **Space** | Toggle state |
|
|
|
|
---
|
|
|
|
## TypeScript API
|
|
|
|
```typescript
|
|
interface ToggleProps {
|
|
pressed: boolean;
|
|
onChange?: (pressed: boolean) => void;
|
|
disabled?: boolean;
|
|
variant?: 'default' | 'outline';
|
|
className?: string;
|
|
}
|
|
|
|
export const Toggle: React.FC<ToggleProps>;
|
|
```
|
|
|
|
---
|
|
|
|
*Source: [packages/leptos/toggle/src/default.rs](https://github.com/yourusername/leptos-shadcn-ui/blob/main/packages/leptos/toggle/src/default.rs)*
|