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

    O IgbSnackbar componente expõe várias partes CSS para dar a você controle total sobre seu estilo:

    Nome Descrição
    base O invólucro base do componente snackbar.
    message A mensagem da lanchonete.
    action O botão de ação padrão da barra de lanches.
    action-container A área que contém as ações. 
    igc-snackbar::part(base) {
  background: var(--ig-primary-500);
  border-color: var(--ig-primary-800);
  color: white;
}

    API References

    Additional Resources