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

    Em seguida, você precisará importar o e seu IgrNavbar CSS necessário da seguinte forma:

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

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

    Content

    Você pode aprimorar o IgrNavbar componente adicionando IgrIcon ou outros componentes na posição inicial ou final como conteúdo, permitindo que os usuários naveguem para posições-chave diretamente da barra:

     <IgrNavbar>
    <div slot="start">
        <IgrIcon name="home" collection="material" />
    </div>
    <h2>Sample App</h2>
    <div slot="end">
        <IgrIcon name="search" collection="material" />
    </div>
    ...
</IgrNavbar>

    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