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.

    Ignite UI for Blazor Snackbar Example

    Este ejemplo demuestra cómo crearIgbSnackbar componentes.

    Usage

    Before using the IgbSnackbar, you need to register it as follows:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbSnackbarModule));

    You will also need to link an additional CSS file to apply the styling to the IgbSnackbar component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

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

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

    The simplest way to display the snackbar component is to use its Show method and call it on a button click.

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

    Examples

    Display Time

    Use the DisplayTime property to configure how long the snackbar component is visible. By default, it's set to 4000 milliseconds.

    Action Text

    By default, the snackbar component is hidden automatically after a period specified by the DisplayTime. You can use KeepOpen property to change this behavior. In this way, the snackbar will remain visible. Using the snackbar ActionText you can display an action button inside the component.

    Styling

    The IgbSnackbar component exposes several CSS parts to give you full control over its styling:

    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