Blazor Snackbar
The Ignite UI for Blazor Snackbar component is used to provide feedback about an operation by showing a brief message at the bottom of the screen.
Ignite UI for Blazor Snackbar Example
This sample demonstrates how to create IgbSnackbar component.
Usage
Before using the IgbSnackbar, you need to register it as follows:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbSnackbarModule));You will also need to link an additional CSS file to apply the styling to the IgbSnackbar component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />For a complete introduction to the Ignite UI for Blazor, read the Getting Started topic.
The simplest way to display the snackbar component is to use its Show method and call it on a button click.
<div class="container vertical">
<IgbButton onclick="snackbar.show()">Show Snackbar</IgbButton>
<IgbSnackbar id="snackbar"> Snackbar Message </IgbSnackbar>
</div>Examples
Display Time
Use the DisplayTime property to configure how long the snackbar component is visible. By default, it’s set to 4000 milliseconds.
Action Text
By default, the snackbar component is hidden automatically after a period specified by the DisplayTime. You can use KeepOpen property to change this behavior. In this way, the snackbar will remain visible. Using the snackbar ActionText you can display an action button inside the component.
Styling
The IgbSnackbar component exposes several CSS parts to give you full control over its styling:
| Name | Description |
|---|---|
base | The base wrapper of the snackbar component. |
message | The snackbar message. |
action | The default snackbar action button. |
action-container | The area holding the actions. |
igc-snackbar::part(base) {
background: var(--ig-primary-500);
border-color: var(--ig-primary-800);
color: white;
}