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 Snackbar Example

    Este ejemplo demuestra cómo crearIgcSnackbarComponent componentes.

    Usage

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

    npm install igniteui-webcomponents

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

defineComponents(IgcSnackbarComponent);

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

    La forma más sencilla de mostrar el componente de la barra de snacks es usar sushow método y llamarlo con un clic.

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

    Examples

    Display Time

    Usa ladisplayTime propiedad para configurar cuánto tiempo está visible el componente de la barra de aperitivos. Por defecto, está configurado en 4000 milisegundos.

    Action Text

    Por defecto, el componente de la barra de snacks se oculta automáticamente tras un periodo especificado por eldisplayTime. Puedes usarkeepOpen la propiedad para cambiar este comportamiento. De este modo, la barra de aperitivos seguirá siendo visible. Usando la barraactionText de snacks puedes mostrar un botón de acción dentro del componente.

    Styling

    ElIgcSnackbarComponent componente expone varias partes CSS para darte control total sobre su estilo:

    Nombre Descripción
    base El envoltorio base del componente de la barra de aperitivos.
    message El mensaje de la cafetería.
    action El botón de acción predeterminado de la barra de aperitivos.
    action-container El área que contiene las acciones. 
    igc-snackbar::part(base) {
  background: var(--ig-primary-500);
  border-color: var(--ig-primary-800);
  color: white;
}

    API References

    Additional Resources