Descripción general de Web Components Toast

    El Web Components Toast es un componente emergente súper ligero y pequeño que se utiliza para mostrar el contenido de un mensaje, notificando a los usuarios finales sobre el estado de un registro modificado. Puede colocar y mostrar fácilmente Web Components notificaciones del sistema en la parte inferior o en cualquier otra área especificada de la pantalla. O también puedes descartarlos de una manera sencilla y fácil.

    El componente Web Components Toast se utiliza principalmente para la mensajería del sistema, las notificaciones push, los mensajes de advertencia y la información. No puede ser descartado por el usuario. Este control tiene diferentes características como efectos de animación, propiedad de tiempo de visualización para configurar cuánto tiempo está visible el componente de notificación del sistema, estilo y otros.

    Web Components Toast Example

    Echa un vistazo al ejemplo sencillo de Ignite UI for Web Components Toast a continuación. El mensaje de notificación animado aparece después de hacer clic en el botón.

    How To Use Ignite UI for Web Components Toast Notification

    En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

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

defineComponents(IgcToastComponent);

    Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

    La forma más sencilla de mostrar el componente tostado es usar sushow método y llamarlo con un clic de botón.

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

    Examples

    Properties

    Usa ladisplayTime propiedad para configurar cuánto tiempo permanece visible el componente tostado. Por defecto, está configurado en 4000 milisegundos.

    Por defecto, el componente tostado se oculta automáticamente tras un periodo especificado por eldisplayTime. Puedes usarkeepOpen la propiedad para cambiar este comportamiento. De este modo, el brindis seguirá siendo visible.

    <igc-button onclick="toast.toggle()" variant="contained">Toggle Toast</igc-button>
<igc-button onclick="toast.keepOpen = !toast.keepOpen" variant="contained">Toggle keepOpen property</igc-button>
<igc-button onclick="toast.displayTime = 8000" variant="contained">Set DisplayTime to 8000</igc-button>

<igc-toast id="toast">Toast Message</igc-toast>

    Styling

    Puedes estilizar las notificaciones de Web ComponentsIgcToastComponent directamente usando su selector de etiquetas:

    igc-toast {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}

    API References

    Additional Resources