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 Ejemplo de tostadas

    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.

    EXAMPLE
    TS
    HTML
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Cómo usar Ignite UI for Web Components notificación del sistema

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

    npm install igniteui-webcomponents
    cmd
    import { defineComponents, IgcToastComponent } from 'igniteui-webcomponents';
    
    defineComponents(IgcToastComponent);
    ts

    Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.

    La forma más sencilla de mostrar el componente del sistema es usar su método show y llamarlo al hacer clic en un botón.

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

    Ejemplos

    Propiedades

    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.

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

    EXAMPLE
    TS
    HTML
    ButtonOverviewStyle.css
    index.css

    Ignite UI for Web Components | CTA Banner

    Estilo

    Puede diseñar las notificaciones de Web Components IgcToastComponent directamente usando su selector de etiquetas:

    igc-toast {
        background: #011627;
        color: #ECAA53;
        outline-color: #ECAA53;
    }
    css

    EXAMPLE
    TS
    HTML
    index.css
    ToastStyling.css

    Referencias de API

    Recursos adicionales