Descripción general de la barra de navegación Blazor
La Ignite UI for Blazor Navbar 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 buscar o favoritos, lo que ayuda a los usuarios a navegar sin problemas a través de una aplicación sin intentar moverse a rutas o estados no válidos. La barra se encuentra en la parte superior del contenedor en el que se coloca.
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 obtener una introducción completa a Ignite UI for Blazor, lea el tema Introducción.
También deberá vincular un archivo CSS adicional para aplicar el estilo al componente IgbNavbar. Es necesario colocar lo siguiente en el archivo wwwroot/index.html de un proyecto Blazor Web Assembly 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 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 agregar algunos elementos IgbIcon usando las ranuras Start y End a IgbNavbar como se muestra en el siguiente ejemplo:
Styling
El componente Barra de navegación expone varias partes CSS (base, start, middle y end) para brindarle control total sobre su estilo.
igc-icon {
color: currentColor;
}
igc-navbar {
background-color: #232121
}
igc-navbar::part(start) {
color: #f23269;
}
igc-navbar::part(middle) {
font-family: Titillium Web,sans-serif;
color: #e9e8ea
}
igc-navbar::part(end) {
color: #e9e8ea
}
Si todo ha ido bien deberías ver lo siguiente en tu navegador: