React Banner | Infragistics

El componente Ignite UI for React 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

Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

npm install igniteui-react

Entonces tendrás que importar elIgrBanner CSS necesario y su contenido, así:

import { IgrBanner } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

Para una introducción completa al Ignite UI for React, 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.

<IgrButton onClick={() => bannerRef.current.show()}>
    <span>Show Banner</span>
</IgrButton>

<IgrBanner ref={bannerRef}>
    <span>You are currently offline.</span>
</IgrBanner>

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

Examples

ElIgrBanner 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 laIgrBanner 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:

<IgrBanner ref={bannerRef}>
    <span>You have lost connection to the internet. This app is offline.</span>
</IgrBanner>

Adding an icon

AnIgrIcon 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 IgrIcon elements are inserted, the banner will try to position all of them at the beginning. It is strongly advised to pass only one IgrIcon directly to the banner.

Para pasar unIgrIcon a tu banner, usa laprefix ranura:

<IgrBanner ref={bannerRef}>
    <IgrIcon slot="prefix" name="signal_wifi_off"></IgrIcon>
    <span>You have lost connection to the internet. This app is offline.</span>
</IgrBanner>

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

<IgrBanner ref={bannerRef}>
    <span>You have lost connection to the internet. This app is offline.</span>
    <IgrIcon name="signal_wifi_off"></IgrIcon>
</IgrBanner>

EsoIgrBanner 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.

<IgrBanner ref={bannerRef}>
    <IgrIcon slot="prefix" name="signal_wifi_off"></IgrIcon>
    <span>You have lost connection to the internet. This app is offline.</span>
    <div slot="actions">
        <IgrButton variant="flat" onClick={() => bannerRef.current.toggle()}>
            <IgrRipple />
            <span>Toggle Banner</span>
        </IgrButton>
    </div>
</IgrBanner>

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.

<IgrBanner onClosing={(event) => event.preventDefault()}>
    ...
</IgrBanner>

[!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:

<IgrBanner ref={bannerRef}>
    <IgrIcon slot="prefix" name="signal_wifi_off"></IgrIcon>
    <span>You have lost connection to the internet. This app is offline.</span>
    <div slot="actions">
        <IgrButton variant="flat" onClick={() => bannerRef.current.hide()}>
            <IgrRipple />
            <span>Continue Offline</span>
        </IgrButton>
        <IgrButton variant="flat" onClick={refreshBanner}>
            <IgrRipple />
            <span>Turn On Wifi</span>
        </IgrButton>
    </div>
</IgrBanner>

Según las directrices de Diseño de Materiales de Google, un banner debe tener un máximo de 2 botones presentes. NoIgrBanner 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:

const bannerRef = useRef<IgrBanner>(null);
const iconRef = useRef<IgrIcon>(null);

const [wifiState, setWifiState] = useState(false);
const [iconName, setIconName] = useState("signal_wifi_off");

const refreshBanner = () => {
    const nextWifiState = !wifiState;
    setWifiState(nextWifiState);
    setIconName(nextWifiState ? "signal_wifi_4_bar" : "signal_wifi_off");

    if (nextWifiState) {
        bannerRef.current.hide();
    } else {
        bannerRef.current.show();
    }
}

return(
    <>
        <IgrNavbar>
            <h1>Gallery</h1>
            <IgrIcon ref={iconRef} name={iconName} slot="end" onClick={refreshBanner}></IgrIcon>
        </IgrNavbar>

        <IgrBanner ref={bannerRef}>
            ...
            <div slot="actions">
                ...
                <IgrButton variant="flat" onClick={refreshBanner}>
                    <IgrRipple />
                    <span>Turn On Wifi</span>
                </IgrButton>
            </div>
        </IgrBanner>
    </>
);

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

Styling

ElIgrBanner 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);
}

React Descripción general del banner

Ignite UI for React 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