mirror of
https://github.com/cloud-shuttle/leptos-shadcn-ui.git
synced 2026-05-16 19:40:40 +00:00
196 lines
3.8 KiB
Markdown
196 lines
3.8 KiB
Markdown
# Alert Component API
|
|
|
|
A component for displaying alert messages with different severity levels.
|
|
|
|
---
|
|
|
|
## Installation
|
|
|
|
```toml
|
|
# Cargo.toml
|
|
[dependencies]
|
|
shadcn-ui-leptos-alert = "0.7"
|
|
```
|
|
|
|
```rust
|
|
use shadcn_ui_leptos_alert::Alert;
|
|
```
|
|
|
|
---
|
|
|
|
## Import
|
|
|
|
```rust
|
|
use shadcn_ui_leptos_alert::{
|
|
Alert,
|
|
AlertTitle,
|
|
AlertDescription,
|
|
AlertVariant
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## Component API
|
|
|
|
### Alert
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `variant` | `MaybeProp<AlertVariant>` | `Default` | Alert style variant |
|
|
| `class` | `MaybeProp<String>` | `None` | Additional CSS classes |
|
|
| `children` | `Option<Children>` | `None` | Alert content |
|
|
|
|
### AlertVariant
|
|
|
|
```rust
|
|
pub enum AlertVariant {
|
|
Default, // Neutral styling
|
|
Destructive, // Red for errors
|
|
Warning, // Yellow for warnings
|
|
Info, // Blue for information
|
|
Success, // Green for success
|
|
}
|
|
```
|
|
|
|
### AlertTitle
|
|
|
|
Title text for the alert.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `class` | `MaybeProp<String>` | `None` | Additional CSS classes |
|
|
| `children` | `Option<Children>` | `None` | Title text |
|
|
|
|
### AlertDescription
|
|
|
|
Detailed description text.
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `class` | `MaybeProp<String>` | `None` | Additional CSS classes |
|
|
| `children` | `Option<Children>` | `None` | Description text |
|
|
|
|
---
|
|
|
|
## Usage Examples
|
|
|
|
### Basic Alert
|
|
|
|
```rust
|
|
use leptos::prelude::*;
|
|
use shadcn_ui_leptos_alert::*;
|
|
|
|
#[component]
|
|
pub fn MyComponent() -> impl IntoView {
|
|
view! {
|
|
<Alert variant=AlertVariant::Default>
|
|
<AlertTitle>"Heads up!"</AlertTitle>
|
|
<AlertDescription>
|
|
"You can add components to your app using the cli."
|
|
</AlertDescription>
|
|
</Alert>
|
|
}
|
|
}
|
|
```
|
|
|
|
### Alert Variants
|
|
|
|
```rust
|
|
view! {
|
|
<div class="space-y-4">
|
|
<Alert variant=AlertVariant::Default>
|
|
<AlertDescription>"Default alert"</AlertDescription>
|
|
</Alert>
|
|
|
|
<Alert variant=AlertVariant::Info>
|
|
<AlertDescription>"Information message"</AlertDescription>
|
|
</Alert>
|
|
|
|
<Alert variant=AlertVariant::Success>
|
|
<AlertDescription>"Success! Operation completed."</AlertDescription>
|
|
</Alert>
|
|
|
|
<Alert variant=AlertVariant::Warning>
|
|
<AlertDescription>"Warning! Please review."</AlertDescription>
|
|
</Alert>
|
|
|
|
<Alert variant=AlertVariant::Destructive>
|
|
<AlertDescription>"Error! Something went wrong."</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## CSS Classes
|
|
|
|
```css
|
|
.alert {
|
|
relative w-full rounded-lg border px-4 py-3 text-sm
|
|
}
|
|
|
|
.alert-default {
|
|
border-border bg-background text-foreground
|
|
}
|
|
|
|
.alert-destructive {
|
|
border-destructive/50 text-destructive
|
|
bg-destructive/10
|
|
}
|
|
|
|
.alert-warning {
|
|
border-warning/50 text-warning
|
|
bg-warning/10
|
|
}
|
|
|
|
.alert-success {
|
|
border-success/50 text-success
|
|
bg-success/10
|
|
}
|
|
|
|
.alert-info {
|
|
border-info/50 text-info
|
|
bg-info/10
|
|
}
|
|
|
|
.alert-title {
|
|
mb-1 font-medium leading-none tracking-tight
|
|
}
|
|
|
|
.alert-description {
|
|
text-sm opacity-90
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Accessibility
|
|
|
|
### ARIA Attributes
|
|
|
|
- `role="alert"` - Alert role for screen readers
|
|
- Semantic heading for title
|
|
- Descriptive text for context
|
|
|
|
---
|
|
|
|
## TypeScript API
|
|
|
|
```typescript
|
|
interface AlertProps {
|
|
variant?: 'default' | 'destructive' | 'warning' | 'info' | 'success';
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export const Alert: React.FC<AlertProps>;
|
|
export const AlertTitle: React.FC<ComponentProps>;
|
|
export const AlertDescription: React.FC<ComponentProps>;
|
|
```
|
|
|
|
---
|
|
|
|
*Source: [packages/leptos/alert/src/default.rs](https://github.com/yourusername/leptos-shadcn-ui/blob/main/packages/leptos/alert/src/default.rs)*
|