Descripción general del cajón de navegación de Blazor
El Ignite UI for Blazor panel lateral de navegación proporciona navegación lateral que se puede expandir o contraer dentro del contenido. Una versión mini proporciona un acceso rápido a la navegación incluso cuando está cerrada. Su contenido es completamente personalizable y, al mismo tiempo, proporciona un estilo de elemento de menú predeterminado.
Blazor Navigation Drawer Example
Este ejemplo demuestra cómo crear el componente IgbNavDrawer.
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(IgbNavDrawerModule),
typeof(IgbNavDrawerHeaderItemModule),
typeof(IgbIconModule)
);
await builder.Build().RunAsync();
}
}
}cs
Antes de utilizar IgbNavDrawer, debe registrarlo de la siguiente manera:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(
typeof(IgbNavDrawerModule),
typeof(IgbNavDrawerHeaderItemModule)
);
razor
También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbNavDrawer 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:
Si todo ha ido bien deberías ver lo siguiente en tu navegador:
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(IgbNavDrawerModule),
typeof(IgbNavDrawerHeaderItemModule),
typeof(IgbIconModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Navbar Integration
Si bien se puede proporcionar cualquier contenido en el cajón, IgbNavDrawerItem está disponible para aplicar estilos listos para usar a los elementos.
Para mejorar un poco nuestro componente, podemos usarlo junto con IgbNavbar. De esta forma podemos conseguir un look más completo y utilizar los métodos del cajón. Veamos cómo podemos usar esto en el siguiente ejemplo:
También agreguemos algunos botones de opción para mostrar todos los valores position. De esta manera cada vez que seleccionemos uno cambiaremos la posición del cajón.
Y finalmente, necesitamos una forma de abrir y cerrar nuestro cajón de navegación. Hay un par de formas de lograr esto, pero para este ejemplo haremos lo siguiente:
public void OnMenuIconClick()
{
if (this.NavDrawerRef != null)
{
this.NavDrawerRef.Show();
}
}
razor
Si todo va bien, su componente debería verse así:
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(IgbNavDrawerModule),
typeof(IgbNavDrawerHeaderItemModule),
typeof(IgbNavDrawerItemModule),
typeof(IgbIconModule),
typeof(IgbRadioGroupModule),
typeof(IgbRadioModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Mini Variant
Con la variante mini, el cajón de navegación cambia su ancho en lugar de cerrarse. Sirve para mantener una navegación rápida, disponible en todo momento, dejando sólo los iconos. Para lograrlo, sólo necesitas configurar la mini ranura del cajón.
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(IgbNavDrawerModule),
typeof(IgbNavDrawerHeaderItemModule),
typeof(IgbNavDrawerItemModule),
typeof(IgbIconModule),
typeof(IgbButtonModule)
);
await builder.Build().RunAsync();
}
}
}cs
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(IgbNavDrawerModule),
typeof(IgbNavDrawerItemModule),
typeof(IgbNavDrawerHeaderItemModule),
typeof(IgbIconModule)
);
await builder.Build().RunAsync();
}
}
}cs
