El Blazor Tabs es un componente ligero y fácil de usar que organiza el contenido correspondiente en un formato de pestaña o en una colección de pestañas normalmente colocadas horizontalmente. La pestaña Blazor permite a los usuarios finales hacer clic fácilmente y mostrar diferentes vistas. Hay varias funciones y opciones de personalización como orientación de pestañas, plantillas, estilos de encabezado incorporados, animación, botones de desplazamiento y más.
El Ignite UI for Blazor Tabs organiza y cambia entre conjuntos de datos similares. Las pestañas se colocan en la parte superior del contenido de los datos. Cuando se selecciona una pestaña, se muestra el panel con el id correspondiente. El componente se puede usar solo con pestañas definidas (sin paneles).
Blazor Tabs Example
El siguiente ejemplo de pestañas Blazor muestra tres pestañas diferentes alineadas en una sola línea para que pueda navegar por cada una de ellas de manera rápida y sencilla.
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(IgbTabsModule),
typeof(IgbIconModule)
);
await builder.Build().RunAsync();
}
}
}cs
IgbTabs emite un evento Change cuando el usuario selecciona un elemento presionando una tecla o haciendo clic. El método Select le permite seleccionar una pestaña especificando su panel como valor de cadena.
Si la pestaña seleccionada no se especifica en la carga inicial, se seleccionará la primera pestaña que no esté deshabilitada.
El comportamiento predeterminado, que selecciona una pestaña cuando el usuario navega con las teclas de flecha, podría modificarse mediante la propiedad Activation. Configurarlo en Manual enfocará la pestaña siguiente/anterior al presionar la tecla de flecha, pero la pestaña se seleccionará solo después de presionar Espacio o Enter
Disabled Tab
Una pestaña se desactiva estableciendo el atributo Disabled:
<IgbTabPanel="first"Disabled>Tab 1</IgbTab>razor
Alignment
La Alignment propiedad controla la posición de Blazor pestañas. Acepta los siguientes valores:
Start (predeterminado): el ancho de la pestaña depende del contenido (etiqueta, ícono, ambos) y todas las pestañas tienen el mismo relleno. La primera pestaña está alineada con el lado izquierdo del contenedor de pestañas.
Center: el ancho de la pestaña depende del contenido y ocupa el centro del contenedor de pestañas.
End: el ancho de la pestaña depende del contenido y todas las pestañas tienen el mismo relleno. La última pestaña está alineada con el lado derecho del contenedor de pestañas.
Justify: todas las pestañas tienen el mismo ancho y se ajustan completamente al contenedor de pestañas.
Si el espacio no es suficiente para todas las pestañas, se muestran los botones de desplazamiento.
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(IgbTabsModule),
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
Scrolling
Los botones de desplazamiento se muestran cuando el espacio disponible no es suficiente para mostrar todas las pestañas Blazor. El botón de inicio de desplazamiento está deshabilitado si la primera pestaña está a la vista. Respectivamente, cuando la última pestaña está a la vista, el botón de fin de desplazamiento está deshabilitado. Al presionar uno de los botones de desplazamiento, las pestañas se desplazan de modo que la pestaña en esa dirección sea completamente visible o, si ya está visible, se muestra la pestaña anterior/siguiente en esa dirección.
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(IgbTabsModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Keyboard Navigation
Llaves
Descripción
←
Selecciona la pestaña anterior (siguiente en modo de derecha a izquierda). SiActivation se establece enManual solo enfoca la pestaña. Se desplaza hasta el final si está en la primera pestaña.
→
Selecciona la pestaña siguiente (anterior en modo de derecha a izquierda). SiActivation se establece enManual solo enfoca la pestaña. Se desplaza para comenzar si está en la última pestaña.
Hogar
Selecciona la primera pestaña.
Fin
Selecciona la última pestaña.
Entrar / Espacio
Selecciona la pestaña enfocada cuandoActivation esManual
Prefix / Suffix
Cada pestaña tiene una ranura predeterminada para mostrar información: icono, texto o ambos, y ranuras prefix y suffix para mostrar contenido adicional al principio y/o al final.
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(IgbTabsModule),
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/
*/.size-small {
--ig-size: var(--ig-size-small);
}
css
Styling
El IgbTabs componente expone varias partes CSS, lo que le proporciona un control total sobre su estilo:
Nombre
Descripción
headers
El contenedor que incluye las pestañas y los botones de desplazamiento.
headers-content
El contenedor de las pestañas que representa el espacio disponible para la representación de las pestañas.
headers-wrapper
El contenedor de las pestañas y el indicador seleccionado.
headers-scroll
El contenedor para las pestañas.
selected-indicator
El indicador seleccionado.
start-scroll-button
El botón de inicio de desplazamiento se muestra cuando las pestañas se desbordan.
end-scroll-button
El botón de finalizar desplazamiento se muestra cuando las pestañas se desbordan.
content
El contenedor del contenido donde se muestran los datos.
El componente IgbTab expone las siguientes partes CSS:
