Visão geral do banner React

    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.

    Ignite UI for React Banner Example

    Usage

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

    npm install igniteui-react

    Você precisará importar o IgrBanner CSS necessário e registrar seu módulo, assim:

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

IgrBannerModule.register();

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

    Show Banner

    Para exibir o componente de banner, use seu show método e chame-o com um clique de botão. O banner aparece em relação ao local onde o elemento foi inserido no modelo de página, movendo todo o outro conteúdo. Normalmente, ele mostra algum conteúdo não intrusivo que requer interação mínima do usuário para ser descartado.

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

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

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

    Examples

    O IgrBanner componente permite a modelagem de seu conteúdo enquanto ainda segue o mais próximo possível das diretrizes de banner do Material Design.

    Changing the banner message

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

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

    Adding an icon

    Um IgrIcon pode ser exibido no banner usando o slot do prefix banner. O ícone sempre será 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 um IgrIcon para o seu banner, use o prefix slot:

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

    Se você quiser usar um IgrIcon em sua mensagem de banner, basta inseri-lo no conteúdo do banner:

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

    Changing the banner button

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

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

    Binding to events

    O componente banner emite os igcClosing eventos and igcClosed ao ser fechado. O igcClosing evento é cancelável - ele usa a CustomEvent interface e o objeto emitido tem sua cancelable propriedade definida como true. Se cancelarmos o igcClosing evento, a ação final e o evento correspondentes não serão acionados - o banner não será fechado e o igcClosed evento não será emitido.

    To cancel the closing event, call the preventDefault method.

    <IgrBanner ref={bannerRef}>
    ...
</IgrBanner>

const bannerRef = useRef<IgrBanner>(null);

useEffect(() => {
    bannerRef.current.nativeElement.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 criar um banner com dois botões personalizados - um para descartar a notificação e outro para ativar a conexão. Podemos passar manipuladores de ação personalizados usando o actions slot:

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

    De acordo com as diretrizes de Material Design do Google, um banner deve ter no máximo 2 botões presentes. O IgrBanner não limita explicitamente o número de elementos sob o actions slot, mas é altamente recomendável usar até 2 se você quiser aderir às diretrizes de design de material.

    A opção de dispensar (Continuar offline) não precisa de mais lógica, portanto, pode apenas chamar o hide método. A ação de confirmação (Ativar Wifi), no entanto, requer alguma lógica adicional, então temos que defini-la no componente. Em seguida, adicionaremos um ouvinte de evento para o click evento. A última etapa é chamar o refreshBanner() método em cada alteração, o que alternará o banner dependendo do wifiState.

    A barra de navegação terá um ícone Wifi e adicionaremos um ouvinte de evento para seu click evento também. À medida que o refreshBanner() método é chamado em cada alteração, o ícone não apenas alternará o banner, mas mudará de acordo com o estado da conexão:

    <IgrNavbar>
    <h1 key="header">Gallery</h1>
    <IgrIcon ref={iconRef} key="icon" name="signal_wifi_off" slot="end" onClick={() => refreshBanner()}></IgrIcon>
</IgrNavbar>

<IgrBanner ref={bannerRef}>
    ...
    <div key="actions" slot="actions">
        ...
        <IgrButton key="button-wifi" variant="flat" clicked={() => refreshBanner()}>
            <IgrRipple key="ripple-wifi" />
            <span key="action-wifi">Turn On Wifi</span>
        </IgrButton>
    </div>
</IgrBanner>

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

const [wifiState, setWifiState] = useState(false);

function refreshBanner() {
    if (!wifiState) {
        iconRef.current.name = 'signal_wifi_4_bar';
        bannerRef.current.hide();
    } else {
        iconRef.current.name = 'signal_wifi_off';
        bannerRef.current.show();
    }
    setWifiState(current => !current);
}

    Por fim, adicionaremos um IgrToast, exibindo uma mensagem sobre o estado do WiFi. Os resultados do banner modelo podem ser vistos na demonstração abaixo:

    Styling

    O IgrBanner componente expõe várias partes CSS que oferecem 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);
}

    API References

    Additional Resources