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 umIgrNavbar com ícones e cabeçalho de texto:

    Usage

    Antes de usá-losIgrNavbar, você precisa registrá-los da seguinte forma:

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

    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 oIgrNavbar CSS necessário assim:

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

    Then in the template of IgrNavbar, you can add the following code to show a basic IgrNavbar with a title only:

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

    Content

    Você pode aprimorar oIgrNavbar componente adicionandoIgrIcon outros componentes na posição inicial ou final como conteúdo, permitindo que os usuários naveguem diretamente para posições-chave a partir 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

    ONavBar componente expõe várias partes do CSS, dando 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