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.
Ejemplo de cajón de navegación Blazor
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
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。
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
Integración de la barra de navegación
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
Minivariante
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
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Diseñar el cajón de navegación
El componente del cajón de navegación expone varias partes CSS: base, main y mini. El componente del elemento del cajón de navegación también expone tres partes CSS: base, icon y content, lo que le brinda control total sobre su estilo.
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