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:
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbNavbarModule),
typeof(IgbIconModule)
);
await builder.Build().RunAsync();
}
}
}cs
Antes de utilizar IgbNavbar, debe registrarlo de la siguiente manera:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbNavbarModule));
razor
Para obtener una introducción completa a la Ignite UI for Blazor, lea el tema Primeros pasos.
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:
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>razor
Content
Puede agregar algunos elementos IgbIcon usando las ranuras Start y End a IgbNavbar como se muestra en el siguiente ejemplo:
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbNavbarModule),
typeof(IgbIconModule)
);
await builder.Build().RunAsync();
}
}
}cs
Si todo ha ido bien deberías ver lo siguiente en tu navegador:
EXAMPLE
MODULES
RAZOR
index.css
NavbarStyling.css
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbNavbarModule),
typeof(IgbIconModule)
);
await builder.Build().RunAsync();
}
}
}cs
