first commit
This commit is contained in:
@@ -0,0 +1,259 @@
|
||||
# SbToastHost
|
||||
|
||||
A container component that manages and displays toast notifications. Handles positioning, stacking, auto-dismissal, and animations for multiple toasts. Place one instance in your layout to enable toast notifications throughout your application.
|
||||
|
||||
## Parameters
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|-----------|------|---------|-------------|
|
||||
| Position | SbToastPosition | TopRight | Position of the toast container |
|
||||
| DefaultDuration | int | 5000 | Default auto-dismiss duration in milliseconds |
|
||||
| MaxToasts | int | 5 | Maximum number of toasts to display simultaneously |
|
||||
| Class | string? | null | Additional CSS classes |
|
||||
|
||||
## Position Options
|
||||
|
||||
| Value | Description |
|
||||
|-------|-------------|
|
||||
| TopLeft | Top-left corner |
|
||||
| TopCenter | Top-center |
|
||||
| TopRight | Top-right corner (default) |
|
||||
| BottomLeft | Bottom-left corner |
|
||||
| BottomCenter | Bottom-center |
|
||||
| BottomRight | Bottom-right corner |
|
||||
|
||||
## Methods
|
||||
|
||||
| Method | Parameters | Description |
|
||||
|--------|------------|-------------|
|
||||
| ShowAsync | message, severity?, title?, duration? | Shows a toast with specified options |
|
||||
| ShowInfoAsync | message, title? | Shows an info toast |
|
||||
| ShowSuccessAsync | message, title? | Shows a success toast |
|
||||
| ShowWarningAsync | message, title? | Shows a warning toast |
|
||||
| ShowErrorAsync | message, title? | Shows an error toast |
|
||||
| Clear | - | Removes all active toasts |
|
||||
|
||||
## CSS Classes
|
||||
|
||||
- `sb-toast-host` - Base class
|
||||
- `sb-toast-host--top-left` - Top-left position
|
||||
- `sb-toast-host--top-center` - Top-center position
|
||||
- `sb-toast-host--top-right` - Top-right position
|
||||
- `sb-toast-host--bottom-left` - Bottom-left position
|
||||
- `sb-toast-host--bottom-center` - Bottom-center position
|
||||
- `sb-toast-host--bottom-right` - Bottom-right position
|
||||
- `sb-toast-host__item` - Individual toast wrapper
|
||||
- `sb-toast-host__item--entering` - Toast entering animation
|
||||
- `sb-toast-host__item--leaving` - Toast leaving animation
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Setup
|
||||
|
||||
Place the toast host in your main layout (e.g., `MainLayout.razor`):
|
||||
|
||||
```razor
|
||||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="page">
|
||||
<SbToastHost @ref="ToastHost" Position="SbToastPosition.TopRight" />
|
||||
|
||||
@Body
|
||||
</div>
|
||||
|
||||
@code {
|
||||
public SbToastHost? ToastHost { get; set; }
|
||||
}
|
||||
```
|
||||
|
||||
### Show Different Toast Types
|
||||
|
||||
```razor
|
||||
<SbButton OnClick="ShowInfo">Info</SbButton>
|
||||
<SbButton OnClick="ShowSuccess">Success</SbButton>
|
||||
<SbButton OnClick="ShowWarning">Warning</SbButton>
|
||||
<SbButton OnClick="ShowError">Error</SbButton>
|
||||
|
||||
@code {
|
||||
[CascadingParameter]
|
||||
public MainLayout? Layout { get; set; }
|
||||
|
||||
private SbToastHost? ToastHost => Layout?.ToastHost;
|
||||
|
||||
private async Task ShowInfo()
|
||||
{
|
||||
await ToastHost!.ShowInfoAsync("This is an informational message.");
|
||||
}
|
||||
|
||||
private async Task ShowSuccess()
|
||||
{
|
||||
await ToastHost!.ShowSuccessAsync("Operation completed successfully!", "Success");
|
||||
}
|
||||
|
||||
private async Task ShowWarning()
|
||||
{
|
||||
await ToastHost!.ShowWarningAsync("Please review your changes.", "Warning");
|
||||
}
|
||||
|
||||
private async Task ShowError()
|
||||
{
|
||||
await ToastHost!.ShowErrorAsync("An error occurred. Please try again.", "Error");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Custom Duration
|
||||
|
||||
```razor
|
||||
@* Toast that stays for 10 seconds *@
|
||||
await ToastHost.ShowAsync(
|
||||
"This toast will stay longer.",
|
||||
SbToastSeverity.Info,
|
||||
"Notice",
|
||||
duration: 10000
|
||||
);
|
||||
|
||||
@* Toast that doesn't auto-dismiss (duration = 0) *@
|
||||
await ToastHost.ShowAsync(
|
||||
"This toast won't auto-dismiss.",
|
||||
SbToastSeverity.Warning,
|
||||
"Manual Close Required",
|
||||
duration: 0
|
||||
);
|
||||
```
|
||||
|
||||
### Different Positions
|
||||
|
||||
```razor
|
||||
@* Top-left *@
|
||||
<SbToastHost Position="SbToastPosition.TopLeft" />
|
||||
|
||||
@* Bottom-center *@
|
||||
<SbToastHost Position="SbToastPosition.BottomCenter" />
|
||||
|
||||
@* Bottom-right *@
|
||||
<SbToastHost Position="SbToastPosition.BottomRight" />
|
||||
```
|
||||
|
||||
### Configuration Options
|
||||
|
||||
```razor
|
||||
<SbToastHost @ref="toastHost"
|
||||
Position="SbToastPosition.TopRight"
|
||||
DefaultDuration="3000"
|
||||
MaxToasts="3" />
|
||||
```
|
||||
|
||||
### Using with a Toast Service
|
||||
|
||||
For a more scalable approach, create a toast service:
|
||||
|
||||
```csharp
|
||||
// IToastService.cs
|
||||
public interface IToastService
|
||||
{
|
||||
event Func<string, SbToastSeverity, string?, int?, Task>? OnShow;
|
||||
Task ShowAsync(string message, SbToastSeverity severity = SbToastSeverity.Info,
|
||||
string? title = null, int? duration = null);
|
||||
Task ShowInfoAsync(string message, string? title = null);
|
||||
Task ShowSuccessAsync(string message, string? title = null);
|
||||
Task ShowWarningAsync(string message, string? title = null);
|
||||
Task ShowErrorAsync(string message, string? title = null);
|
||||
}
|
||||
|
||||
// ToastService.cs
|
||||
public class ToastService : IToastService
|
||||
{
|
||||
public event Func<string, SbToastSeverity, string?, int?, Task>? OnShow;
|
||||
|
||||
public Task ShowAsync(string message, SbToastSeverity severity = SbToastSeverity.Info,
|
||||
string? title = null, int? duration = null)
|
||||
=> OnShow?.Invoke(message, severity, title, duration) ?? Task.CompletedTask;
|
||||
|
||||
public Task ShowInfoAsync(string message, string? title = null)
|
||||
=> ShowAsync(message, SbToastSeverity.Info, title);
|
||||
|
||||
public Task ShowSuccessAsync(string message, string? title = null)
|
||||
=> ShowAsync(message, SbToastSeverity.Success, title);
|
||||
|
||||
public Task ShowWarningAsync(string message, string? title = null)
|
||||
=> ShowAsync(message, SbToastSeverity.Warning, title);
|
||||
|
||||
public Task ShowErrorAsync(string message, string? title = null)
|
||||
=> ShowAsync(message, SbToastSeverity.Error, title);
|
||||
}
|
||||
```
|
||||
|
||||
Register in DI:
|
||||
|
||||
```csharp
|
||||
builder.Services.AddScoped<IToastService, ToastService>();
|
||||
```
|
||||
|
||||
Connect in layout:
|
||||
|
||||
```razor
|
||||
@inject IToastService ToastService
|
||||
|
||||
<SbToastHost @ref="toastHost" />
|
||||
|
||||
@code {
|
||||
private SbToastHost? toastHost;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
ToastService.OnShow += async (msg, sev, title, dur) =>
|
||||
{
|
||||
await toastHost!.ShowAsync(msg, sev, title, dur);
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Use anywhere:
|
||||
|
||||
```razor
|
||||
@inject IToastService ToastService
|
||||
|
||||
<SbButton OnClick="SaveData">Save</SbButton>
|
||||
|
||||
@code {
|
||||
private async Task SaveData()
|
||||
{
|
||||
// ... save logic ...
|
||||
await ToastService.ShowSuccessAsync("Data saved successfully!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Clear All Toasts
|
||||
|
||||
```razor
|
||||
<SbButton OnClick="() => toastHost?.Clear()">Clear All Toasts</SbButton>
|
||||
```
|
||||
|
||||
### Form Submission Example
|
||||
|
||||
```razor
|
||||
<SbForm OnValidSubmit="HandleSubmit">
|
||||
<SbTextField @bind-Value="name" Label="Name" Required="true" />
|
||||
<SbButton Type="submit">Submit</SbButton>
|
||||
</SbForm>
|
||||
|
||||
@code {
|
||||
private string name = "";
|
||||
|
||||
private async Task HandleSubmit()
|
||||
{
|
||||
try
|
||||
{
|
||||
await SaveAsync();
|
||||
await ToastHost!.ShowSuccessAsync("Form submitted successfully!");
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
await ToastHost!.ShowErrorAsync($"Error: {ex.Message}", "Submission Failed");
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user