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 criarIgbSnackbar componentes.

    Usage

    Antes de usá-losIgbSnackbar, você precisa registrá-los 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 aoIgbSnackbar componente. O seguinte deve 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 ao Ignite UI for Blazor, leia o tópico Comecando.

    A maneira mais simples de exibir o componente de lanche é usar seuShow método 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 aDisplayTime propriedade para configurar por quanto tempo o componente de lanche fica visível. Por padrão, está configurado para 4000 milissegundos.

    Action Text

    Por padrão, o componente de lanche é ocultado automaticamente após um período especificado peloDisplayTime. Você pode usarKeepOpen a propriedade para mudar esse comportamento. Dessa forma, o lanches permanecerá visível. Usando a barraActionText de lanche, você pode exibir um botão de ação dentro do componente.

    Styling

    OIgbSnackbar componente expõe várias partes CSS para te dar 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