mirror of
https://github.com/cloud-shuttle/leptos-shadcn-ui.git
synced 2026-05-20 13:30:41 +00:00
151 lines
2.9 KiB
Markdown
151 lines
2.9 KiB
Markdown
# Toast Component API
|
|
|
|
A temporary notification component for displaying brief messages.
|
|
|
|
---
|
|
|
|
## Installation
|
|
|
|
```toml
|
|
# Cargo.toml
|
|
[dependencies]
|
|
shadcn-ui-leptos-toast = "0.7"
|
|
```
|
|
|
|
```rust
|
|
use shadcn_ui_leptos_toast::Toast;
|
|
```
|
|
|
|
---
|
|
|
|
## Import
|
|
|
|
```rust
|
|
use shadcn_ui_leptos_toast::{
|
|
Toast,
|
|
ToastProvider,
|
|
ToastTitle,
|
|
ToastDescription,
|
|
ToastAction,
|
|
ToastClose,
|
|
ToastVariant
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## Component API
|
|
|
|
### ToastProvider
|
|
|
|
Context provider for toast notifications.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `children` | `Option<Children>` | `None` | App content |
|
|
|
|
### Toast
|
|
|
|
Individual toast notification.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `variant` | `MaybeProp<ToastVariant>` | `Default` | Toast style |
|
|
| `title` | `MaybeProp<String>` | `None` | Toast title |
|
|
| `description` | `MaybeProp<String>` | `None` | Toast description |
|
|
| `duration` | `MaybeProp<u64>` | `5000` | Auto-close duration (ms) |
|
|
| `on_close` | `Option<Callback<()>>` | `None` | Close callback |
|
|
|
|
### ToastVariant
|
|
|
|
```rust
|
|
pub enum ToastVariant {
|
|
Default, // Neutral styling
|
|
Destructive, // Red for errors
|
|
Success, // Green for success
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Usage Examples
|
|
|
|
### Basic Toast
|
|
|
|
```rust
|
|
use leptos::prelude::*;
|
|
use shadcn_ui_leptos_toast::*;
|
|
|
|
#[component]
|
|
pub fn MyComponent() -> impl IntoView {
|
|
view! {
|
|
<ToastProvider>
|
|
<div>
|
|
<button on:click=move |_| {
|
|
// Show toast
|
|
}>"Show Toast"</button>
|
|
</div>
|
|
</ToastProvider>
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## CSS Classes
|
|
|
|
```css
|
|
.toast {
|
|
group pointer-events-auto relative flex w-full
|
|
items-center justify-between space-x-4 overflow-hidden
|
|
rounded-md border p-6 pr-8 shadow-lg transition-all
|
|
}
|
|
|
|
.toast-default {
|
|
border bg-background text-foreground
|
|
}
|
|
|
|
.toast-destructive {
|
|
border-destructive bg-destructive text-destructive-foreground
|
|
}
|
|
|
|
.toast-success {
|
|
border-success bg-success text-success-foreground
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Accessibility
|
|
|
|
### ARIA Attributes
|
|
|
|
- `role="status"` - Status role
|
|
- `aria-live="polite"` - Polite announcements
|
|
- `aria-atomic="true"` - Complete content reading
|
|
|
|
---
|
|
|
|
## TypeScript API
|
|
|
|
```typescript
|
|
interface ToastProps {
|
|
variant?: 'default' | 'destructive' | 'success';
|
|
title?: string;
|
|
description?: string;
|
|
duration?: number;
|
|
onClose?: () => void;
|
|
}
|
|
|
|
export const Toast: React.FC<ToastProps>;
|
|
export const ToastProvider: React.FC<{ children: React.ReactNode }>;
|
|
export const ToastTitle: React.FC<ComponentProps>;
|
|
export const ToastDescription: React.FC<ComponentProps>;
|
|
export const ToastAction: React.FC<ButtonProps>;
|
|
export const ToastClose: React.FC<ButtonProps>;
|
|
```
|
|
|
|
---
|
|
|
|
*Source: [packages/leptos/toast/src/default.rs](https://github.com/yourusername/leptos-shadcn-ui/blob/main/packages/leptos/toast/src/default.rs)*
|