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

A continuación, tendrás que importar el IgrBanner y el CSS necesario, de la siguiente manera:

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 de banner, utilice su show método y llámelo 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. Por lo general, 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

El IgrBanner componente permite crear plantillas de su contenido sin dejar de ceñirse lo más posible a las directrices del banner de diseño de materiales.

Changing the banner message

Configurar el mensaje que se muestra en el banner es fácil: simplemente cambie el contenido que está pasando a la IgrBanner etiqueta. El texto se mostrará en el área del banner especificada y el banner utilizará 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

An IgrIcon se puede mostrar en el banner utilizando la ranura del prefix banner. El icono siempre se colocará al principio del mensaje de 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 un IgrIcon a tu banner, usa la prefix 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 desea utilizar un IgrIcon mensaje en su banner, simplemente insértelo 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>

Expone IgrBanner la actions ranura para crear plantillas de los botones de banner. Esto le permite anular el botón de banner predeterminado (OK) y agregar 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 de banner emite los Closing eventos y Closed cuando se cierra. El Closing evento es cancelable: utiliza la CustomEvent interfaz y el objeto emitido tiene su cancelable propiedad establecida en true. Si cancelamos el evento, la acción final y el Closing evento correspondientes no se activarán: el banner no se cerrará y el Closed evento no se emitirá.

To cancel the closing event, call the preventDefault method.

<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 descartar la notificación y otro para activar la conexión. Podemos pasar controladores de acciones personalizados usando la actions 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>

De acuerdo con las directrices de diseño de materiales de Google, un banner debe tener un máximo de 2 botones presentes. No IgrBanner limita explícitamente el número de elementos debajo de la actions ranura, pero se recomienda encarecidamente usar hasta 2 si desea cumplir con las pautas de diseño de materiales.

La opción dismiss (Continuar sin conexión) no necesita más lógica, por lo que puede llamar simplemente hide al método. La acción de confirmación (Activar Wifi), sin embargo, requiere alguna lógica adicional, por lo que tenemos que definirla en el componente. Luego, agregaremos un detector de eventos para el click evento. El último paso es llamar refreshBanner() al método en cada cambio, que alternará el banner en función de la wifiState.

La barra de navegación tendrá un icono de Wifi y también agregaremos un oyente de eventos para su click evento. A medida que se llama al refreshBanner() método en cada cambio, el icono no solo alternará el banner, sino que cambiará 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>
    </>
);

Finalmente, agregaremos un IgrToast, mostrando un mensaje sobre el estado de WiFi. Los resultados del banner con plantilla se pueden ver en la demostración a continuación:

Styling

El IgrBanner componente expone varias partes CSS que le 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