syncfusion-blazor-notifications

What this skill does

# Implementing Syncfusion Blazor Notifications

A comprehensive skill for implementing Toast, Message, and Skeleton components from Syncfusion Blazor Notifications. These components provide essential user feedback mechanisms including temporary notifications, inline messages, and content loading states.

## Component Overview

### SfToast
Lightweight, non-blocking notification popups that appear temporarily to provide feedback. Supports positioning, animations, action buttons, and templates.

**Key Features:**
- Configurable positions (top-left, top-center, top-right, bottom-left, bottom-center, bottom-right)
- Show/hide animations with customizable timing
- Auto-dismiss with timeout and progress bar
- Action buttons for user interaction
- Template support for custom content
- Event callbacks (OnOpen, OnClose, OnClick)
- Multiple toast stacking (newest on top/bottom)

### SfMessage
Inline alert component for displaying contextual feedback messages with different severity levels.

**Key Features:**
- Severity types (Normal, Info, Success, Warning, Error) with color-coded styling
- Variants (Text, Outlined, Filled) for different visual styles
- Built-in icons matching severity levels
- Optional close button for dismissible messages
- Content alignment (left, center, right)
- Visibility control and close event handling
- Custom CSS styling support

### SfSkeleton
Loading placeholder component that displays animated shapes to indicate content is loading.

**Key Features:**
- Shapes (Circle, Square, Rectangle, Text) for different content types
- Shimmer effects (Pulse, Wave, Fade, None) for visual feedback
- Configurable dimensions (width, height)
- Accessibility labels for screen readers
- Visibility toggle for showing/hiding
- CSS customization for styling

## Quick Start

### Toast - Basic Example

```razor
@page "/toast-demo"
@using Syncfusion.Blazor.Notifications
@using Syncfusion.Blazor.Buttons

<SfButton @onclick="ShowToast">Show Toast</SfButton>

<SfToast @ref="ToastObj" Title="Notification" Content="Your changes have been saved successfully!" />

@code {
    SfToast ToastObj;

    private async Task ShowToast()
    {
        await ToastObj.ShowAsync();
    }
}
```

### Message - Basic Example

```razor
@page "/message-demo"
@using Syncfusion.Blazor.Notifications

<SfMessage Severity="MessageSeverity.Success" ShowIcon="true" ShowCloseIcon="true">
    Your profile has been updated successfully!
</SfMessage>

<SfMessage Severity="MessageSeverity.Warning" ShowIcon="true">
    Your session will expire in 5 minutes.
</SfMessage>

<SfMessage Severity="MessageSeverity.Error" ShowIcon="true" ShowCloseIcon="true">
    Failed to save changes. Please try again.
</SfMessage>
```

### Skeleton - Basic Example

```razor
@page "/skeleton-demo"
@using Syncfusion.Blazor.Notifications

<div class="skeleton-container">
    <SfSkeleton Shape="SkeletonType.Circle" Width="60px" Height="60px" />
    <div class="skeleton-text">
        <SfSkeleton Shape="SkeletonType.Text" Width="80%" />
        <SfSkeleton Shape="SkeletonType.Text" Width="60%" />
    </div>
</div>

<style>
    .skeleton-container {
        display: flex;
        gap: 16px;
        padding: 16px;
    }
    .skeleton-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
</style>
```

## Documentation and Navigation Guide

### Toast Component

#### Getting Started with Toast
📄 **Read:** [references/toast-getting-started.md](references/toast-getting-started.md)
- Installation and NuGet package setup
- Service registration in Program.cs
- Basic toast implementation
- Showing and hiding toasts programmatically
- Position configuration basics
- Simple success/error notifications

#### Advanced Toast Features
📄 **Read:** [references/toast-features.md](references/toast-features.md)
- Position and alignment options (9 predefined positions)
- Animation settings (show/hide with effects and duration)
- Auto-dismiss with timeout and extended timeout
- Progress bar display and direction
- Action buttons with event handlers
- Title and content templates
- Multiple toast management and stacking order
- Event callbacks (OnOpen, OnClose, OnClick, BeforeOpen, BeforeClose)
- RTL (right-to-left) support
- Custom width, height, and CSS styling
- Target container specification

### Message Component

#### Message Implementation
📄 **Read:** [references/message-implementation.md](references/message-implementation.md)
- Getting started with Message component
- Severity types (Normal, Info, Success, Warning, Error)
- Variant styles (Text, Outlined, Filled)
- Icon configuration (built-in and custom)
- Close icon and dismissal handling
- Content alignment options
- Visibility control and two-way binding
- Close event handling
- Custom content with ChildContent
- CSS class customization
- Accessibility features
- Integration with forms and validation

### Skeleton Component

#### Skeleton Implementation
📄 **Read:** [references/skeleton-implementation.md](references/skeleton-implementation.md)
- Getting started with Skeleton component
- Skeleton shapes (Circle, Square, Rectangle, Text)
- Shimmer effects (Pulse, Wave, Fade, None)
- Width and height configuration
- Visibility toggle for loading states
- Accessibility labels for screen readers
- Multiple skeleton layouts (lists, cards, tables)
- Common loading patterns (profile, article, grid)
- CSS customization and theming
- Performance considerations

### Styling and Themes

#### Styling All Notification Components
📄 **Read:** [references/styling-and-themes.md](references/styling-and-themes.md)
- Theme integration (Bootstrap, Material, Fluent, Tailwind)
- Custom CSS classes for Toast
- Custom CSS classes for Message
- Custom CSS classes for Skeleton
- Dark mode support for all components
- Responsive design patterns
- Color customization
- Animation customization
- Component-specific styling techniques

### Use Cases and Examples

#### Real-World Implementation Examples
📄 **Read:** [references/use-cases-and-examples.md](references/use-cases-and-examples.md)
- Form submission feedback (Toast + Message)
- E-commerce cart notifications
- Dashboard data updates
- File upload progress and feedback
- User authentication feedback
- Data loading with Skeleton placeholders
- Error handling and recovery
- Multi-step process feedback
- Notification center/history
- Combining all three components effectively

## Common Patterns

### Pattern 1: Success/Error Feedback with Toast

```razor
@code {
    SfToast ToastObj;

    private async Task SaveData()
    {
        try
        {
            await DataService.SaveAsync();
            ToastObj.Title = "Success";
            ToastObj.Content = "Data saved successfully!";
            await ToastObj.ShowAsync();
        }
        catch (Exception ex)
        {
            ToastObj.Title = "Error";
            ToastObj.Content = $"Failed to save: {ex.Message}";
            await ToastObj.ShowAsync();
        }
    }
}
```

### Pattern 2: Form Validation with Message

```razor
<EditForm Model="@model" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    
    @if (!string.IsNullOrEmpty(errorMessage))
    {
        <SfMessage Severity="MessageSeverity.Error" 
                   ShowIcon="true" 
                   ShowCloseIcon="true"
                   Closed="@(() => errorMessage = null)">
            @errorMessage
        </SfMessage>
    }
    
    <!-- Form fields -->
</EditForm>
```

### Pattern 3: Loading State with Skeleton

```razor
@if (isLoading)
{
    <div class="product-card-skeleton">
        <SfSkeleton Shape="SkeletonType.Rectangle" Width="100%" Height="200px" />
        <SfSkeleton Shape="SkeletonType.Text" Width="80%" />
        <SfSkeleton Shape="SkeletonType.Text" Width="60%" />
    </div>
}
else
{
    <div class="product-card">
        <img src="@product.ImageUrl" alt="@product.Name" />
        <h3>@product.Name</h3>
        <p>@product.Description</p>
    </di