Lanchonete Blazor

    O componente Ignite UI for Blazor Snackbar é usado para fornecer feedback sobre uma operação exibindo uma breve mensagem na parte inferior da tela.

    Ignite UI for Blazor Snackbar Example

    Este exemplo demonstra como criar o componente IgbSnackbar.

    Usage

    Antes de usar o IgbSnackbar, você precisa registrá-lo da seguinte forma:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbSnackbarModule));

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo ao componente IgbSnackbar. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    Para uma introdução completa à Ignite UI for Blazor, leia o tópico Introdução.

    A maneira mais simples de exibir o componente snackbar é usar seu método Show e chamá-lo com um clique de botão.

    <div class="container vertical">
    <IgbButton onclick="snackbar.show()">Show Snackbar</IgbButton>
    <IgbSnackbar id="snackbar"> Snackbar Message </IgbSnackbar>
</div>

    Examples

    Display Time

    Use a propriedade DisplayTime para configurar por quanto tempo o componente snackbar fica visível. Por padrão, é definido como 4000 milissegundos.

    Action Text

    Por padrão, o componente snackbar é ocultado automaticamente após um período especificado pelo DisplayTime. Você pode usar a propriedade KeepOpen para alterar esse comportamento. Dessa forma, o snackbar permanecerá visível. Usando o ActionText do snackbar você pode exibir um botão de ação dentro do componente.

    Styling

    The IgbSnackbar component exposes several CSS parts to give you full control over its styling:

    Nome Descrição
    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;
}

    API References

    Additional Resources