React Navbar Overview

    A barra de navegação do Ignite UI for React informa o usuário sobre sua posição atual em um aplicativo. A Barra de Navegação também pode fornecer links para ações rápidas, como pesquisa ou favorito, ajudando os usuários a navegar sem problemas por um aplicativo sem tentar mover para rotas ou estados inválidos. A barra fica no topo do recipiente em que é colocada.

    React Navbar Example

    O exemplo a seguir representa um com ícones e cabeçalho IgrNavbar de texto:

    Usage

    Antes de usar o IgrNavbar, você precisa registrá-lo da seguinte forma:

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

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

    npm install igniteui-react

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

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

IgrNavbarModule.register();

    <IgrNavbar>
    <span>Navigation Title</span>
</IgrNavbar>

    Content

    Você pode adicionar alguns IgrIcon elementos usando os Start slots e End ao IgrNavbar como é mostrado no exemplo a seguir:

    Styling

    O NavBar componente expõe várias partes CSS, dando a você controle total sobre seu estilo:

    Nome Descrição
    base O wrapper base da barra de navegação.
    start O contêiner de ícone alinhado à esquerda.
    middle O contêiner de título da barra de navegação.
    end O contêiner de ícones de ação alinhado à direita. 
    igc-icon {
  color: var(--ig-primary-500);
}

igc-navbar {
  background-color: var(--ig-secondary-200);
}

igc-navbar::part(middle) {
  font-family: Titillium Web, sans-serif;
  color: var(--ig-primary-500);;
}

    Se tudo correr bem, você deverá ver o seguinte no seu navegador:

    API References

    Additional Resources