Barra de lanches Web Components

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

    Ignite UI for Web Components Snackbar Example

    Este exemplo demonstra como criar o componente IgcSnackbarComponent.

    Usage

    Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents

    import { defineComponents, IgcSnackbarComponent } from 'igniteui-webcomponents';

defineComponents(IgcSnackbarComponent);

    Para uma introdução completa ao Ignite UI for Web Components, 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.

    <igc-button onclick="snackbar.show()" variant="contained">Show Snackbar</igc-button>
<igc-snackbar id="snackbar">Snackbar Message</igc-snackbar>

    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 snackbar actionText você pode exibir um botão de ação dentro do componente.

    Styling

    O IgcSnackbarComponent 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