Visão geral da barra de navegação Web Components

    A Ignite UI for Web Components Navbar 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 favoritos, ajudando os usuários a navegar suavemente por um aplicativo sem tentar mover para rotas ou estados inválidos. A barra fica no topo do contêiner em que é colocada.

    Web Components Navbar Example

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

    Usage

    Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents

    import { defineComponents, IgcNavbarComponent } from 'igniteui-webcomponents';

defineComponents(IgcNavbarComponent);

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

    Então, no modelo de IgcNavbarComponent, você pode adicionar o seguinte código para mostrar um IgcNavbarComponent básico apenas com um título:

    <igc-navbar>Navigation Title</igc-navbar>

    Content

    Você pode aprimorar o IgcNavbarComponent componente adicionando IgcIconComponent 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:

    <igc-navbar>
    <igc-icon name="home" slot="start"></igc-icon>
    <h2>Sample App</h2>
    <igc-icon name="search" slot="end"></igc-icon>
    ...
</igc-navbar>

    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