Visão geral da barra de navegação Blazor

    A Ignite UI for Blazor 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.

    Blazor Navbar Example

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

    Usage

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

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbNavbarModule));

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

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo aoIgbNavbar componente. O seguinte deve ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    Depois, no modelo de,IgbNavbar você pode adicionar o seguinte código para mostrar um básicoIgbNavbar apenas com título:

    <IgbNavbar>Navigation Title</IgbNavbar>

    Content

    Você pode aprimorar oIgbNavbar componente adicionandoIgbIcon 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:

    <IgbNavbar>
    <IgbIcon @ref="@HomeIcon" slot="start" IconName="home" Collection="material" />
    <h3>Sample App</h3>
    <IgbIcon @ref="@SearchIcon" slot="end" IconName="search" Collection="material" />
    ...
</IgbNavbar>

    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