Descripción general del control deslizante y del control deslizante de rango Blazor
Los componentes Blazor Slider y Range Slider permiten la selección en un rango determinado moviendo el pulgar a lo largo de la pista. La pista se puede definir como continua o escalonada y puede elegir entre un control deslizante simple o de rango.
Blazor Slider & Range Slider Example
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(IgbSliderModule),
typeof(IgbRangeSliderModule)
);
await builder.Build().RunAsync();
}
}
}cs
La principal diferencia entre los componentes Control deslizante y Control deslizante de rango es que el componente Control deslizante tiene un solo pulgar, mientras que el componente Control deslizante de rango tiene dos pulgares. El pulgar único del componente Control deslizante muestra su propiedad Value. Los dos pulgares del componente Control deslizante de rango muestran sus propiedades de valor Lower y Upper.
Ambos controles deslizantes emiten dos eventos cuando se cambia cualquiera de los valores. El evento IgbInput se emite cada vez que se cambia un valor usando el teclado o la interacción de arrastre, mientras que el evento igcChange se emite cuando el cambio de valor se confirma al final del arrastre o la interacción del teclado.
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(IgbSliderModule),
typeof(IgbRangeSliderModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Mientras arrastra el pulgar del control deslizante, muestra su valor en una información sobre herramientas. Puede ocultar esta información sobre herramientas utilizando la propiedad HideTooltip.
Disabled
Puede utilizar la propiedad Disabled de los controles deslizantes para desactivar las interacciones de sus usuarios.
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(IgbSliderModule));
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Constraints
La pista de los controles deslizantes tiene valores mínimo y máximo que se configuran utilizando las propiedades Min y Max. Además, puede restringir el arrastre con el pulgar utilizando las propiedades LowerBound y UpperBound.
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(IgbSliderModule));
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Step
La propiedad Step especifica la granularidad del control deslizante que debe cumplir el valor. De forma predeterminada, la pista del control deslizante parece continua. Establecer la propiedad DiscreteTrack del control deslizante en verdadero hará que se muestren los pasos en la pista.
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(IgbSliderModule));
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Si la propiedad Step se establece en 0, no se implica ningún paso y se permite cualquier valor en el rango del control deslizante. En este caso, el control deslizante parecerá continuo incluso si DiscreteTrack está configurado en verdadero.
Tick Marks
Los componentes del control deslizante podrían mostrar marcas y etiquetas. Los componentes del control deslizante admiten dos tipos de marcas: primaria y secundaria. Para mostrar las marcas de graduación principales, debe establecer la propiedad PrimaryTicks en un valor mayor que 1. El número de ticks primarios se distribuirá uniformemente en la pista. Para mostrar las marcas secundarias, debe establecer la propiedad SecondaryTicks en un valor mayor que 0. El valor de SecondaryTicks especifica el número de ticks secundarios entre cada dos ticks primarios.
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(IgbSliderModule));
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Además, puede configurar la orientación de las marcas utilizando la propiedad TickOrientation. De forma predeterminada, el valor TickOrientation es end, lo que muestra las marcas debajo de la pista del control deslizante. Puede configurarlo para que start, lo que los muestra encima de la pista, y mirror, que refleja las marcas encima y debajo de la pista.
De forma predeterminada, las marcas de verificación muestran etiquetas con sus valores. Puede modificar la rotación de las etiquetas de marca utilizando la propiedad TickLabelRotation. Además, puede ocultar las etiquetas de las marcas primarias y secundarias utilizando las propiedades HidePrimaryLabels y HideSecondaryLabels.
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(IgbSliderModule));
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Value Format
Si desea formatear los valores de las etiquetas de pulgar y marca, el control deslizante proporciona las propiedades ValueFormat, ValueFormatOptions y Locale. Las ValueFormatOptions le permiten especificar el número de fracciones y dígitos significativos, el estilo (decimal, moneda, porcentaje, unidad), notación y otros teniendo en cuenta la Locale especificada. ValueFormat es una cadena que puede contener el identificador {0} que será reemplazado por el valor con las opciones de formato aplicadas.
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(IgbSliderModule),
typeof(IgbNumberFormatSpecifierModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<style>
igc-slider {
padding: 30px50px;
}
</style><divclass="container sample center"><IgbSlider @ref="SliderRef"PrimaryTicks="3"SecondaryTicks="4"></IgbSlider><IgbSlider @ref="SliderRef2"ValueFormat="Storage: {0} GB"></IgbSlider></div>@code {public IgbNumberFormatSpecifier formatSpecifier;
public IgbNumberFormatSpecifier formatSpecifier2;
private IgbSlider _slider;
public IgbSlider SliderRef
{
get
{
return _slider;
}
set
{
_slider = value;
formatSpecifier = new IgbNumberFormatSpecifier();
formatSpecifier.Style = "currency";
formatSpecifier.Currency = "USD";
_slider.ValueFormatOptions = formatSpecifier;
StateHasChanged();
}
}
private IgbSlider _slider2;
public IgbSlider SliderRef2
{
get
{
return _slider2;
}
set
{
_slider2 = value;
formatSpecifier2 = new IgbNumberFormatSpecifier();
formatSpecifier2.MinimumFractionDigits = 1;
_slider2.ValueFormatOptions = formatSpecifier2;
StateHasChanged();
}
}
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Labels
En algunos casos, querrá formatear los valores del control deslizante como valores de cadena, es decir, asignar los valores [0, 1, 2] a ['Bajo', 'Medio', 'Alto']. Para este escenario, el control deslizante le permite definir elementos IgbSliderLabel dentro de él. El contenido de texto de las etiquetas del control deslizante se utilizará para las etiquetas de pulgar y marca. Tenga en cuenta que cuando se proporcionan etiquetas de control deslizante, las propiedades Min, Max y Step se calculan automáticamente para que no permitan valores que no se correspondan con las etiquetas proporcionadas. En el caso de las etiquetas 'Bajo', 'Medio' y 'Alto', Min se establece en 0, Max se establece en 2 y Step se establece en 1.
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(IgbSliderModule),
typeof(IgbSliderLabelModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Styling
Los componentes del control deslizante exponen partes CSS para sus elementos internos. La siguiente tabla enumera todas las partes CSS:
Nombre
Descripción
base
La envoltura base del control deslizante.
garrapatas
El contenedor de garrapatas.
grupo de garrapatas
El contenedor del grupo de garrapatas.
garrapata
El elemento garrapata.
etiqueta de marca
El elemento de etiqueta de marca.
etiqueta-de-garrapata-interior
El elemento interior de la etiqueta de marca.
pulgares
El contenedor de los pulgares.
pulgar
El elemento del pulgar.
etiqueta del pulgar
El contenedor de etiquetas de la información sobre herramientas del pulgar.
etiqueta-pulgar-interior
El elemento de etiqueta de la información sobre herramientas del pulgar.
pista
El contenedor de pistas.
pasos
El elemento de pasos de pista.
inactivo
El elemento inactivo de la pista.
llenar
La parte llena de la pista.
El siguiente ejemplo demuestra cómo aplicar estilo al relleno de la pista y a las partes del pulgar:
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(IgbSliderModule),
typeof(IgbRangeSliderModule)
);
await builder.Build().RunAsync();
}
}
}cs