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

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

    Name Description
    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