Ignite UI for Blazor 하면 사용자가 평가 결과를 보고 피드백을 제공할 수 있습니다.
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.
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbRatingModule));
razor
IgbRating 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일이나 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.
이렇게 하면 데이터를 입력하고 읽는 데 사용할 수 있는 별 5개 등급 구성 요소가 생성됩니다.
Using Custom Symbols
IgbRating 구성요소를 사용하면 기본 별표 기호 대신 사용자 정의 기호를 사용할 수 있습니다. SVG, 아이콘 또는 다른 유니코드 기호와 같은 다른 기호를 사용하려면 IgbRating의 여는 괄호와 닫는 괄호 사이에 IgbRatingSymbol 구성요소를 배치해야 합니다.
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
등급 구성요소의 여는 괄호와 닫는 괄호 사이의 등급 기호 수에 따라 최대값이 결정됩니다.
最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。
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
step 속성은 단일 선택 모드에서는 작동하지 않습니다.
Empty & Selected
Ignite UI for Blazor 하면 사용자가 단일 평가 값의 비어 있는 상태와 선택된 상태에 대해 다른 아이콘/요소를 사용할 수 있습니다. 심볼을 선언할 때 각 슬롯(비어 있음 및 가득 찬 상태)에 대해 두 개의 아이콘을 제공하는 것은 필수이며, 두 아이콘이 같더라도 마찬가지입니다. 예를 들어:
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 시각적 모드를 켭니다. 피드백 이모티콘 얼굴과 같이 고유한 값을 전달하는 기호를 사용할 때 유용합니다.
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
