
Toast Lightweight Popup
Provides a lightweight toast popup
Component usage introduction:
1. Inject service ToastService
@inject ToastService ToastService
[Inject]
[NotNull]
private ToastService? ToastService { get; set; }
2. Call its instance api
await ToastService.Success("Title", "Content", autoHide: true);
When the user operates, the lower right corner will give appropriate prompt information
Demo
It will not close automatically, you need to manually click the close button
Demo
Set ShowHeader="false"
remove Header
Demo
set HeaderTemplate
custom the header content
Demo
Provides settings where the Toast popup appears
Demo
Set the location where the popup appears by setting the Placement
value of the Toast
component. The default value is BottomEnd
. upper right corner
pay attention
This component provides functions in the form of injection services, and the user experience is very comfortable when used, and can be called anytime, anywhere
The injection service provides the following shortcut invocation methods:
- Success()
- Error()
- Information()
- Warning()
Examples are as follows:
ToastService?.Success("Successfully saved", "Save data successfully, automatically close after 4 seconds");
private void OnInfoClick()
{
ToastService.Show(new ToastOption()
{
// Notification category
Category = ToastCategory.Information,
// Notification box Title value
Title = "notification",
// Notification body content
Content = "The system adds new components, it will automatically shut down after 4 seconds"
});
}
Configured through the configuration file appsetting.json
file, suitable for Server-Side App
"BootstrapBlazorOptions": {
"ToastDelay": 4000,
"MessageDelay": 4000,
"SwalDelay": 4000
}
Configured via the ConfigureServices
method in the Startup
file for Server-Side App
and WebAssembly App
public void ConfigureServices(IServiceCollection services)
{
// Uniformly set the automatic disappearance time of the Toast component
services.Configure<BootstrapBlazorOptions>(options =>
{
options.ToastDelay = 4000;
});
}
Server-Side App
onlypublic void ConfigureServices(IServiceCollection services)
{
// Add BootstrapBlazor component
services.AddBootstrapBlazor(options =>
{
// Uniformly set the automatic disappearance time of the Toast component
options.ToastDelay = 4000;
});
}
Attributes
B station related video link
交流群