Web Components Banner | Infragistics

El componente Ignite UI for Web Components Banner proporciona una manera de mostrar fácilmente un mensaje destacado a los usuarios de la aplicación de una manera que es menos transitoria que una barra de aperitivos y menos intrusiva que un cuadro de diálogo. También puede indicar las acciones que se deben realizar en función del contexto del mensaje.

Usage

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

npm install igniteui-webcomponents

Luego tendrás que importar elIgcBannerComponent CSS necesario y registrar su módulo, así:

import { defineComponents, IgcBannerComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcBannerComponent);

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

Para mostrar el componente banner, utiliza sushow método y llámalo con un clic de botón. El banner aparece en relación con el lugar donde se insertó el elemento en la plantilla de página, moviendo todo el resto del contenido. Normalmente muestra contenido no intrusivo que requiere una interacción mínima del usuario para ser descartado.

<igc-button onclick="banner.show()">Show Banner</igc-button>

<igc-banner id="banner">
    You are currently offline.
</igc-banner>

[!NOTE] The IgcBannerComponent includes a default action button OK, which closes the banner.

Examples

ElIgcBannerComponent componente permite plantar su contenido sin dejar de seguir lo más fielmente posible las directrices del banner de diseño de materiales.

Changing the banner message

Configurar el mensaje que aparece en el banner es sencillo: solo tienes que cambiar el contenido que pasas a laigc-banner etiqueta. El texto aparecerá en el área del banner especificada y el banner usará su plantilla predeterminada al mostrarlo. A continuación, cambiaremos el contenido de nuestro banner de muestra para que sea un poco más descriptivo:

<igc-banner id="banner">
    You have lost connection to the internet. This app is offline.
</igc-banner>

Adding an icon

AnIgcIconComponent puede mostrarse en la pancarta usando la ranuraprefix de la pancarta. El icono siempre estará situado al principio del mensaje del banner.

[!NOTE] If several IgcIconComponent elements are inserted, the banner will try to position all of them at the beginning. It is strongly advised to pass only one IgcIconComponent directly to the banner.

Para pasar unIgcIconComponent a tu banner, usa laprefix ranura:

<igc-banner id="banner">
    <igc-icon slot="prefix" name="signal_wifi_off"></igc-icon>
    You have lost connection to the internet. This app is offline.
</igc-banner>

Si quieres usar unIgcIconComponent en tu mensaje del banner, simplemente insértalo en el contenido del banner:

<igc-banner id="banner">
    You have lost connection to the internet. This app is offline.
    <igc-icon name="signal_wifi_off"></igc-icon>
</igc-banner>

EsoIgcBannerComponent deja al descubierto laactions ranura para plantar los botones de la bandera. Esto te permite anular el botón de banner predeterminado (OK) y añadir acciones personalizadas definidas por el usuario.

<igc-banner id="banner">
    <igc-icon slot="prefix" name="signal_wifi_off"></igc-icon>
    You have lost connection to the internet. This app is offline.
    <div slot="actions">
        <igc-button onclick="banner.toggle()">
            <igc-ripple></igc-ripple>
            Toggle Banner
        </igc-button>
    </div>
</igc-banner>

Binding to events

El componente banner emite losClosing eventos yClosed cuando está cerrado. ElClosing evento es cancelable: utiliza laCustomEvent interfaz y el objeto emitido tienecancelable su propiedad configurada como verdadera. Si cancelamos elClosing evento, la acción final y el evento correspondientes no se activarán: el banner no se cerrará ni elClosed evento se emitirá.

Para cancelar el evento de cierre, llama alpreventDefault método.

<igc-banner id="banner">
    ...
</igc-banner>

const banner = document.getElementById('banner') as IgcBannerComponent;

banner.addEventListener('igcClosing', (event) => {
  event.preventDefault();
});

[!NOTE] If the changes above are applied, the banner will never close, as the closing event is always cancelled.

Advanced Example

Vamos a crear un banner con dos botones personalizados: uno para cancelar la notificación y otro para activar la conexión. Podemos pasar manejadores de acciones personalizados usando laactions ranura:

<igc-banner id="banner">
    <igc-icon slot="prefix" name="signal_wifi_off"></igc-icon>
    You have lost connection to the internet. This app is offline.
    <div slot="actions">
        <igc-button onclick="banner.hide()">
            <igc-ripple></igc-ripple>
            Continue Offline
        </igc-button>
        <igc-button id="button">
            <igc-ripple></igc-ripple>
            Turn On Wifi
        </igc-button>
    </div>
</igc-banner>

Según las directrices de Diseño de Materiales de Google, un banner debe tener un máximo de 2 botones presentes. NoIgcBannerComponent limita explícitamente el número de elementos bajo laactions ranura, pero se recomienda encarecidamente usar hasta 2 si quieres seguir las directrices de diseño del material.

La opción de despedida (Continuar desconectado) no necesita más lógica, así que puede simplemente llamar alhide método. Sin embargo, la acción de confirmar (Encender Wifi) requiere algo de lógica adicional, así que tenemos que definirla en el componente. Luego, añadiremos un oyente para elclick evento. El último paso es llamar alrefreshBanner() método en cada cambio, lo que cambiará el banner dependiendo de elwifiState.

La barra de navegación tendrá un icono de Wifi y añadiremos un oyente paraclick el evento también. A medida que se llama elrefreshBanner() método en cada cambio, el icono no solo desactiva el banner, sino que también cambia según el estado de la conexión:

<igc-navbar>
  <h1>Gallery</h1>
  <igc-icon id="icon" slot="end" name="signal_wifi_off"></igc-icon>
</igc-navbar>

<igc-banner id="banner">
    ...
    <div slot="actions">
        ...
        <igc-button id="button">
            <igc-ripple></igc-ripple>
            Turn On Wifi
        </igc-button>
    </div>
</igc-banner>

private banner: IgcBannerComponent;
private icon: IgcIconComponent;
private button: IgcButtonComponent;

private wifiState: boolean = false;

constructor() {
    this.banner = document.getElementById('banner') as IgcBannerComponent;
    this.icon = document.getElementById('icon') as IgcIconComponent;
    this.button = document.getElementById('button') as IgcButtonComponent;

    this.icon.addEventListener('click', () => this.refreshBanner());
    this.button.addEventListener('click', () => this.refreshBanner());
}

public refreshBanner() {
    if (!this.wifiState) {
        this.icon.name = 'signal_wifi_4_bar';
        this.banner.hide();
    } else {
        this.icon.name = 'signal_wifi_off';
        this.banner.show();
    }
    this.wifiState = !this.wifiState;
}

Por último, añadiremos unIgcToastComponent mensaje mostrando un mensaje sobre el estado del WiFi. Los resultados del banner con plantilla pueden verse en la demo a continuación:

Styling

ElIgcBannerComponent componente expone varias partes CSS que te dan control total sobre su estilo:

Nombre	Descripción
`base`	El contenedor base del componente de banner.
`spacer`	El envoltorio interior que establece el espacio alrededor del banner.
`message`	La parte que contiene el texto y la ilustración.
`illustration`	La parte que contiene el icono/ilustración del banner.
`content`	La parte que contiene el contenido del texto del banner.
`actions`	La parte que contiene los botones de acción del banner.

igc-banner::part(spacer) {
  background: var(--ig-surface-600);
}

igc-banner::part(illustration) {
  color: var(--ig-surface-600-contrast);
}

igc-banner::part(content) {
  color: var(--ig-gray-900);
}

Web Components Descripción general del banner

Ignite UI for Web Components Banner Example

Usage

Show Banner

Examples

Changing the banner message

Adding an icon

Changing the banner button

Binding to events

Advanced Example

Styling

API References

Additional Resources