The Ignite UI for Blazor Rating component allows users to view and provide feedback.
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.
Before using the IgbRating, you need to register it as follows:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbRatingModule));
razor
You will also need to link an additional CSS file to apply the styling to the IgbRating component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:
The simplest way to start using the IgbRating is as follows:
<IgbRating></IgbRating>razor
This will create a five-star rating component that can be used to input and read data from.
Using Custom Symbols
The IgbRating component allows you to use custom symbols in place of the default star symbols. If you want to use a different symbol, like SVG, icon or another unicode symbol, you should place IgbRatingSymbol components between the opening and closing brackets of the 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
The number of rating symbols between the opening and closing brackets of the rating component determines the max value.
最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。
The Ignite UI for Blazor Rating component has a single selection mode that allows users to provide different icons/elements for the different rating values. In this case, only one of the icons/elements can be selected and reflect the feedback given by the user.
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
Keep in mind that the step attribute doesn't work with single selection mode.
Empty & Selected
The Ignite UI for Blazor Rating component allows users to use different icons/elements for the empty and the selected state of a single rating value. It is mandatory to provide 2 icons for each slot (empty and full) when declaring a symbol, even if they are the same. For instance:
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
Single
Turns on the Single visual mode for the rating. Useful when using symbols that communicate unique values, like feedback emoji faces.
Value
The Value attribute sets the current value of the component.
Label
The Label attribute allows setting the label value of the rating component.
Value Format
A format string which sets aria-valuetext. All instances of it will be replaced with the current value of the control. Important for screen-readers and useful for localization.
Max Value
The Max attribute sets the maximum allowed value of the rating component.
Step
The Step attribute sets the allowed fraction of steps between two symbols. Useful when splitting the rating symbols in halves.
Hover Preview
The HoverPreview attribute makes the component show the possible outcome of user selection on hover. It is useful when you want to give instant feedback about what the selected value could be.
Read-Only
The ReadOnly attribute allows the users to set the IgbRating in read-only mode. This attribute is useful when you want to use the component for information purposes only.
Disabled
The Disabled attribute disables the component, making it impossible to select a value using the mouse or keyboard.
Methods
Step Up
The StepUp method increments the value of the component by n steps. Determined by the step factor.
Step Down
The StepDown method decrements the value of the component by n steps. Determined by the step factor.
Events
The IgbRating component emits two separate events - Hover and Change.
Hover Event
The Hover event is fired when hovering over a symbol. It provides the value of the symbol under the mouse cursor. Useful for creating custom value labels and readouts.
Change Event
The Change event is fired when the selected value changes.
Styling
The IgbRating component provides base, label, value-label, symbols, and symbol that allow you to style the component symbols and its encompassing label.
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),
typeof(IgbIconModule)
);
await builder.Build().RunAsync();
}
}
}cs