260 lines
6.8 KiB
Markdown
260 lines
6.8 KiB
Markdown
# 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");
|
|
}
|
|
}
|
|
}
|
|
```
|