Descripción general de la barra de navegación Blazor

    La barra de navegación Ignite UI for Blazor informa al usuario de su posición actual en una aplicación. La barra de navegación también puede proporcionar enlaces a acciones rápidas, como búsqueda o favoritos, lo que ayuda a los usuarios a navegar sin problemas por una aplicación sin intentar pasar a rutas o estados no válidos. La barra se encuentra en la parte superior del contenedor en el que se encuentra.

    Blazor Navbar Example

    El siguiente ejemplo representa unIgbNavbar con iconos y encabezado de texto:

    Usage

    Antes de usarlosIgbNavbar, debes registrarlo de la siguiente manera:

    // in Program.cs file

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

    Para una introducción completa al Ignite UI for Blazor, lee el tema Empezar.

    También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbNavbar componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:

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

    Luego, en la plantilla deIgbNavbar, puedes añadir el siguiente código para mostrar un básicoIgbNavbar solo con título:

    <IgbNavbar>Navigation Title</IgbNavbar>

    Content

    Puedes mejorar elIgbNavbar componente añadiendoIgbIcon otros componentes en la posición inicial o final como contenido, permitiendo a los usuarios navegar directamente desde la barra a las posiciones clave:

    <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

    ElNavBar componente expone varias partes CSS, dándote control total sobre su estilo:

    Nombre Descripción
    base El contenedor base de la barra de navegación.
    start El contenedor de iconos alineado a la izquierda.
    middle El contenedor de título de la barra de navegación.
    end El contenedor de iconos de acción alineados a la derecha. 
    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);;
}

    Si todo ha ido bien deberías ver lo siguiente en tu navegador:

    API References

    Additional Resources