Bar de aperitivos Blazor

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

    Ejemplo de Ignite UI for Blazor Snackbar

    Este ejemplo demuestra cómo crear el componente IgbSnackbar.

    EXAMPLE
    MODULES
    RAZOR
    CSS

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

    Uso

    Antes de utilizar IgbSnackbar, debe registrarlo de la siguiente manera:

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(typeof(IgbSnackbarModule));
    razor

    También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbSnackbar componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto de Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
    razor

    Para obtener una introducción completa a la Ignite UI for Blazor, 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.

    <div class="container vertical">
        <IgbButton onclick="snackbar.show()">Show Snackbar</IgbButton>
        <IgbSnackbar id="snackbar"> Snackbar Message </IgbSnackbar>
    </div>
    razor

    Ejemplos

    Tiempo de visualización

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

    EXAMPLE
    MODULES
    RAZOR
    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 la barra de bocadillos ActionText puede mostrar un botón de acción dentro del componente.

    EXAMPLE
    MODULES
    RAZOR
    CSS

    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
    MODULES
    RAZOR
    CSS

    Referencias de API

    Recursos adicionales