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

    This sample demonstrates how to create IgrSnackbar component.

    Usage

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

    npm install igniteui-react

    You will then need to import the IgrSnackbar and its necessary CSS, like so:

    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.

    The simplest way to display the snackbar component is to use its show method and call it on a button click.

    <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 the displayTime property to configure how long the snackbar component is visible. By default, it's set to 4000 milliseconds.

    Action Text

    By default, the snackbar component is hidden automatically after a period specified by the displayTime. You can use keepOpen property to change this behavior. In this way, the snackbar will remain visible. Using the snackbar actionText you can display an action button inside the component.

    Styling

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

    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