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 una IgbNavbar con iconos y encabezado de texto:
Usage
Antes de utilizar IgbNavbar, debe 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 deberá vincular un archivo CSS adicional para aplicar el estilo al IgbNavbar componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto de Blazor Server:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
Luego, en la plantilla de IgbNavbar, puede agregar el siguiente código para mostrar una IgbNavbar básica solo con un título:
<IgbNavbar>Navigation Title</IgbNavbar>
Content
Puede mejorar el IgbNavbar componente agregando IgbIcon u otros componentes en la posición inicial o final como contenido, lo que permite a los usuarios navegar a las posiciones clave directamente desde la 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
El NavBar componente expone varias partes CSS, lo que le proporciona un 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: