MudBlazor - Blazor Component Library

Note

The Snackbar is dependant on ISnackbar service and MudSnackbarProvider.

Check the Installation page for instructions regarding default setup.

To statically embed an important message in a page see Alert

Usage

This is the simplest way of using the Snackbar. It provides the user with a brief floating message.
It'll hide after some time unless the mouse is over it or it's the last thing touched on a touchscreen.

@inject ISnackbar Snackbar

<MudButton Variant="Variant.Filled" Color="Color.Primary" @onclick="@(() => Snackbar.Add("Simple Snackbar"))">
    Open Snackbar
</MudButton>

Html in messages

Snackbar messages can be rendered as HTML using MarkupString.

@inject ISnackbar Snackbar

<MudButton Variant="Variant.Filled" Color="Color.Primary" @onclick="@(() => Snackbar.Add(new MarkupString($"<ul><li>Item {++count}</li><li>Item {++count}</li></ul>")))">
    Open Snackbar
</MudButton>

@code
{
    private int count = 0;
}

RenderFragment messages

In addition to setting the Snackbar message with a string, you can also use RenderFragments to create Snackbars with more complex content.

@inject ISnackbar SnackbarService

<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@OnClick">Show a RenderFragment snackbar</MudButton>

@code {
    private void OnClick()
    {
        SnackbarService.Add
        (
            @<div>
                <h3>Hi from a RenderFragment</h3>
                <ul>
                    <li>Here's a regular item</li>
                    <li>Here's a <strong>bold item</strong></li>
                    <li>Here's an <em>italicized item</em></li>
                </ul>
            </div>
        );
    }
}