El componente de calificación de Ignite UI for Blazor permite a los usuarios ver y brindar comentarios.
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;
// required for registering IgniteUIBlazorusing IgniteUI.Blazor.Controls;
namespaceInfragistics.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 Infragistics Blazor
builder.Services.AddIgniteUIBlazor(typeof(IgbRatingModule));
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<style>/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/.size-large {
--ig-size: var(--ig-size-large);
}
</style><divclass="container sample center"><IgbRatingclass="size-large"Label="Rate Experience"Max="5"Step=".5"HoverPreview></IgbRating></div>@code {}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/.size-large {
--ig-size: var(--ig-size-large);
}css
Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.
Antes de utilizar IgbRating, debe registrarlo de la siguiente manera:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbRatingModule));
razor
También deberá vincular un archivo CSS adicional para aplicar el estilo al componente IgbRating. Lo siguiente debe colocarse en el archivo wwwroot/index.html en un proyecto Blazor Web Assembly o en el archivo Pages/_Host.cshtml en un proyecto Blazor Server:
La forma más sencilla de empezar a utilizar IgbRating es la siguiente:
<IgbRating></IgbRating>razor
Esto creará un componente de calificación de cinco estrellas que se puede utilizar para ingresar y leer datos.
Using Custom Symbols
El componente IgbRating le permite utilizar símbolos personalizados en lugar de los símbolos de estrella predeterminados. Si desea utilizar un símbolo diferente, como SVG, icono u otro símbolo Unicode, debe colocar los componentes IgbRatingSymbol entre los corchetes de apertura y cierre de IgbRating:
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;
// required for registering IgniteUIBlazorusing IgniteUI.Blazor.Controls;
namespaceInfragistics.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 Infragistics Blazor
builder.Services.AddIgniteUIBlazor(
typeof(IgbRatingModule),
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-large {
--ig-size: var(--ig-size-large);
}css
El número de símbolos de clasificación entre los corchetes de apertura y cierre del componente de clasificación determina el valor máximo.
最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。
El componente de calificación Ignite UI for Blazor tiene un único modo de selección que permite a los usuarios proporcionar diferentes íconos o elementos para los distintos valores de calificación. En este caso, solo se puede seleccionar uno de los íconos o elementos y reflejar la retroalimentación proporcionada por el usuario.
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;
// required for registering IgniteUIBlazorusing IgniteUI.Blazor.Controls;
namespaceInfragistics.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 Infragistics Blazor
builder.Services.AddIgniteUIBlazor(
typeof(IgbRatingModule),
typeof(IgbIconModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<style>/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/.size-large {
--ig-size: var(--ig-size-large);
}
</style><divclass="container sample center"><IgbRatingclass="size-large"Label="Rate Experience"Single><IgbRatingSymbol><div>😣</div><divslot="empty">😣</div></IgbRatingSymbol><IgbRatingSymbol><div>😔</div><divslot="empty">😔</div></IgbRatingSymbol><IgbRatingSymbol><div>😐</div><divslot="empty">😐</div></IgbRatingSymbol><IgbRatingSymbol><div>🙂</div><divslot="empty">🙂</div></IgbRatingSymbol><IgbRatingSymbol><div>😆</div><divslot="empty">😆</div></IgbRatingSymbol></IgbRating></div>@code {}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/.size-large {
--ig-size: var(--ig-size-large);
}css
Tenga en cuenta que el atributo step no funciona con el modo de selección única.
Empty & Selected
La Ignite UI for Blazor permite a los usuarios usar diferentes íconos/elementos para el estado vacío y seleccionado de un único valor de calificación. Es obligatorio proporcionar 2 íconos para cada espacio (vacío y lleno) al declarar un símbolo, incluso si son iguales. Por ejemplo:
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;
// required for registering IgniteUIBlazorusing IgniteUI.Blazor.Controls;
namespaceInfragistics.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 Infragistics Blazor
builder.Services.AddIgniteUIBlazor(
typeof(IgbRatingModule),
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-large {
--ig-size: var(--ig-size-large);
}css
Configuration
Soltero
Activa el modo visual Single para la calificación. Útil cuando se utilizan símbolos que comunican valores únicos, como caras emoji de retroalimentación.
Valor
El atributo Value establece el valor actual del componente.
Etiqueta
El atributo Label permite configurar el valor de la etiqueta del componente de calificación.
Formato de valor
Una cadena de formato que establece aria-valuetext. Todas las instancias del mismo serán reemplazadas con el valor actual del control. Importante para lectores de pantalla y útil para localización.
Valor máximo
El atributo Max establece el valor máximo permitido del componente de calificación.
Paso
El atributo Step establece la fracción permitida de pasos entre dos símbolos. Útil al dividir los símbolos de calificación por la mitad.
Vista previa al pasar el mouse
El atributo HoverPreview hace que el componente muestre el posible resultado de la selección del usuario al pasar el mouse. Es útil cuando desea brindar información instantánea sobre cuál podría ser el valor seleccionado.
Solo lectura
El ReadOnly atributo permite a los usuarios establecer el IgbRating en modo de solo lectura. Este atributo es útil cuando se desea utilizar el componente solo con fines informativos.
Desactivado
El atributo Disabled desactiva el componente, lo que hace imposible seleccionar un valor con el mouse o el teclado.
Methods
Aumentar
El método StepUp incrementa el valor del componente en n pasos. Determinado por el factor step.
Bajar
El método StepDown disminuye el valor del componente en n pasos. Determinado por el factor step.
Eventos
El componente IgbRating emite dos eventos separados: Hover y Change.
Evento de desplazamiento
El evento Hover se activa al pasar el cursor sobre un símbolo. Proporciona el valor del símbolo debajo del cursor del mouse. Útil para crear etiquetas y lecturas de valores personalizados.
Cambiar evento
El evento Change se activa cuando cambia el valor seleccionado.
Styling
El IgbRating componente expone partes CSS para casi todos sus elementos internos. En la tabla siguiente se enumeran todas las partes CSS expuestas:
Nombre
Descripción
base
El envoltorio principal que contiene todos los elementos de calificación.
label
La parte de la etiqueta.
value-label
La parte de la etiqueta de valor.
symbols
Un contenedor para todos los símbolos de clasificació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;
// required for registering IgniteUIBlazorusing IgniteUI.Blazor.Controls;
namespaceInfragistics.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 Infragistics Blazor
builder.Services.AddIgniteUIBlazor(
typeof(IgbRatingModule),
typeof(IgbIconModule)
);
await builder.Build().RunAsync();
}
}
}cs
