Web Components Toast es un componente emergente pequeño y súper liviano que se utiliza para mostrar el contenido de un mensaje y notificar a los usuarios finales sobre el estado de un registro modificado. Puede colocar y mostrar fácilmente las notificaciones del sistema Web Components en la parte inferior o en cualquier otra área especificada de la pantalla. O también puedes descartarlos de una forma sencilla y fácil.
El componente Web Components Toast se utiliza principalmente para mensajes del sistema, notificaciones push, mensajes de advertencia e 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 del sistema, estilo y otras.
Ejemplo de brindis Web Components
Eche un vistazo al ejemplo sencillo 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.
<!DOCTYPE html><html><head><title>Toast Overview</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-buttononclick="toast.show()"variant="contained">Show Toast</igc-button><igc-toastid="toast">Toast Message</igc-toast></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Web Components y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Cómo utilizar Ignite UI for Web Components
Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:
Utilice la propiedad displayTime para configurar durante cuánto tiempo estará visible el componente del sistema. De forma predeterminada, está configurado en 4000 milisegundos.
De forma predeterminada, el componente del sistema se oculta automáticamente después de un período especificado por displayTime. Puede utilizar la propiedad keepOpen para cambiar este comportamiento. De esta forma, la tostada quedará visible.
<!DOCTYPE html><html><head><title>Toast Properties</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><divclass="button-container"><igc-buttononclick="toast.toggle()"variant="contained">Toggle Toast</igc-button><igc-buttononclick="toast.keepOpen = !toast.keepOpen"variant="contained">Toggle keepOpen property</igc-button><igc-buttononclick="toast.displayTime = 8000"variant="contained">Set DisplayTime to 8000</igc-button></div><igc-toastid="toast">Toast Message</igc-toast></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
<!DOCTYPE html><html><head><title>Styled Toast</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-buttononclick="toast.show()"variant="contained">Show Styled Toast</igc-button><igc-toastid="toast">Styled Toast</igc-toast></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css