Web Components Snackbar

    El componente Ignite UI for Web Components Snackbar se utiliza para proporcionar comentarios sobre una operación mostrando un breve mensaje en la parte inferior de la pantalla.

    Ignite UI for Web Components Ejemplo de Snackbar

    Este ejemplo demuestra cómo crear el componente IgcSnackbarComponent.

    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.

    Uso

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

    npm install igniteui-webcomponents
    cmd
    import { defineComponents, IgcSnackbarComponent } from 'igniteui-webcomponents';
    
    defineComponents(IgcSnackbarComponent);
    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 snackbar es utilizar su método show y llamarlo haciendo clic en un botón.

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

    Ejemplos

    Tiempo de visualización

    Utilice la propiedad displayTime para configurar durante cuánto tiempo estará visible el componente snackbar. De forma predeterminada, está configurado en 4000 milisegundos.

    EXAMPLE
    TS
    HTML
    CSS

    Texto de acción

    De forma predeterminada, el componente snackbar 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 cafetería quedará visible. Usando el actionText de la barra de bocadillos, puede mostrar un botón de acción dentro del componente.

    EXAMPLE
    TS
    HTML
    CSS

    Ignite UI for Web Components | CTA Banner

    Estilo

    El componente snackbar expone varias partes CSS (base, message y action) para brindarle control total sobre su estilo.

    igc-snackbar::part(base) {
        background: #0d6efd;
        border-color: #0d6efd;
        color: white;
    }
    css

    EXAMPLE
    TS
    HTML
    index.css
    SnackbarStyling.css

    Referencias de API

    Recursos adicionales