React Snackbar

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

    Ignite UI for React Snackbar Example

    Este exemplo demonstra como criar IgrSnackbar um componente.

    Usage

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

    Em seguida, você precisará importar o e seu IgrSnackbar CSS necessário, assim:

    import { IgrSnackbar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

    <IgrButton variant="contained" onClick={onShowButtonClicked}>
    <span>Show Snackbar</span>
</IgrButton>
<IgrSnackbar ref={snackbarRef}>
    <span>Snackbar Message</span>
</IgrSnackbar>

const snackbarRef = useRef<IgrSnackbar>(null);

const onShowButtonClicked = () => {
      if (snackbarRef) {
          snackbarRef.current.show();
      }
  }

    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 IgrSnackbar 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