React Banner | Infragistics

O componente Banner Ignite UI for React fornece uma maneira de exibir facilmente uma mensagem proeminente para os usuários do aplicativo de uma maneira menos transitória do que uma lanchonete e menos intrusiva do que uma caixa de diálogo. Ele também pode indicar ações a serem executadas com base no contexto da mensagem.

Usage

Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

npm install igniteui-react

Você então precisará importar oIgrBanner CSS necessário e o necessário, assim:

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

Para uma introdução completa ao Ignite UI for React, leia o tópico Comecando.

Para exibir o componente banner, use seushow método e chame-o com um clique no botão. O banner aparece em relação ao local onde o elemento foi inserido no modelo da página, movendo todo o restante conteúdo. Normalmente, ele mostra algum conteúdo não intrusivo que requer mínima interação do usuário 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

OIgrBanner componente permite a modelação de seu conteúdo enquanto segue o mais fielmente possível as diretrizes do banner de design de material.

Changing the banner message

Configurar a mensagem exibida no banner é fácil – basta mudar o conteúdo que você está passando para aIgrBanner tag. O texto aparecerá na área do banner especificada e o banner usará seu template padrão ao exibi-lo. Abaixo, vamos mudar o conteúdo do nosso banner de exemplo para ser um pouco mais descritivo:

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

Adding an icon

AnIgrIcon pode ser exibido no banner usando o slot doprefix banner. O ícone sempre estará posicionado no início da mensagem do 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 passar umIgrIcon para o seu banner, use oprefix slot:

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

Se quiser usar umIgrIcon no seu banner, basta inseri-lo no conteúdo do banner:

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

IssoIgrBanner expõe oactions slot para plantar os botões do banner. Isso permite que você substitua o botão padrão do banner (OK) e adicione ações personalizadas definidas pelo usuário.

<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

O componente banner emite osClosing eventos eClosed quando está fechado. OClosing evento é cancelável – ele usa aCustomEvent interface e o objeto emitido tem suacancelable propriedade definida como true. Se cancelarmos oClosing evento, a ação final e o evento correspondentes não serão acionados – o banner não será fechado e oClosed evento não será emitido.

Para cancelar o evento de encerramento, chame opreventDefault 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 criar um banner com dois botões personalizados - um para dispensar a notificação e outro para ativar a conexão. Podemos passar manipuladores de ações personalizados usando oactions slot:

<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 acordo com as diretrizes de Design de Materiais do Google, um banner deve ter no máximo 2 botões presentes. EleIgrBanner não limita explicitamente o número de elementos sob aactions ranhura, mas é fortemente recomendado usar até 2 se você quiser seguir as diretrizes de design do material.

A opção de dispensar (Continuar offline) não precisa de mais lógica, então pode simplesmente chamar ohide método. A ação de confirmação (Ligar o Wi-Fi), no entanto, requer alguma lógica adicional, então precisamos defini-la no componente. Depois, adicionaremos um ouvinte para oclick evento. O último passo é chamar orefreshBanner() método a cada alteração, o que vai alternar o banner dependendo dowifiState

A barra de navegação terá um ícone de Wifi e também adicionaremos um ouvinte de evento para o eventoclick. À medida que orefreshBanner() método é chamado a cada alteração, o ícone não só alterna o banner, mas também muda de acordo com o estado da conexão:

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 fim, vamos adicionar umaIgrToast mensagem exibindo sobre o estado do WiFi. Os resultados do banner template podem ser vistos na demonstração abaixo:

Styling

OIgrBanner componente expõe várias partes CSS que te dão controle total sobre seu estilo:

Nome	Descrição
`base`	O wrapper base do componente de banner.
`spacer`	O invólucro interno que define o espaço ao redor do banner.
`message`	A parte que contém o texto e a ilustração.
`illustration`	A parte que contém o ícone/ilustração do banner.
`content`	A parte que contém o conteúdo do texto do banner.
`actions`	A parte que contém os botões de ação do 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);
}

Visão geral do banner React

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