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 Exemplo de barra de navegação

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

    Uso

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

    // in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbNavbarModule));

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

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo ao componente IgbNavbar. O seguinte precisa 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" />

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

    <IgbNavbar>Navigation Title</IgbNavbar>

    Conteúdo

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

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

    Estilização

    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:

    Referências de API

    Recursos adicionais