Blazor Rating (評価) の概要
Ignite UI for Blazor 評価コンポーネントを使用すると、ユーザーはフィードバックを表示して提供できます。
IgbRating を使用する前に、次のように登録する必要があります:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbRatingModule));
また、IgbRating コンポーネントにスタイルを適用するために、追加の CSS ファイルをリンクする必要があります。以下は、Blazor WebAssembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
IgbRating の使用を開始する最も簡単な方法は次のとおりです:
<IgbRating></IgbRating>
これにより、データの入力と読み取りに使用できる 5 つ星の評価コンポーネントが作成されます。
カスタム シンボルの使用
IgbRating コンポーネントを使用すると、デフォルトの星シンボルの代わりにカスタム シンボルを使用できます。SVG、アイコン、または別の Unicode シンボルなどの別のシンボルを使用する場合は、IgbRating の開く括弧と閉じる括弧の間に IgbRatingSymbol コンポーネントを配置する必要があります。
<IgbRating>
<IgbRatingSymbol> <div>💙</div> <div slot="empty">💙</div> </IgbRatingSymbol>
<IgbRatingSymbol> <div>💙</div> <div slot="empty">💙</div> </IgbRatingSymbol>
<IgbRatingSymbol> <div>💙</div> <div slot="empty">💙</div> </IgbRatingSymbol>
<IgbRatingSymbol> <div>💙</div> <div slot="empty">💙</div> </IgbRatingSymbol>
<IgbRatingSymbol> <div>💙</div> <div slot="empty">💙</div> </IgbRatingSymbol>
</IgbRating>
評価コンポーネントの開く括弧と閉じる括弧間の評価記号の数によって、最大値が決まります。
単一選択
Ignite UI for Blazor 評価コンポーネントには、ユーザーがさまざまな評価値に対してさまざまなアイコン / 要素を提供できる単一選択モードがあります。この場合、アイコン / 要素の 1 つだけを選択して、ユーザーからのフィードバックを反映させることができます。
<IgbRating>
<IgbRatingSymbol> <div>😣</div> <div slot="empty">😣</div> </IgbRatingSymbol>
<IgbRatingSymbol> <div>😣</div> <div slot="empty">😣</div> </IgbRatingSymbol>
<IgbRatingSymbol> <div>😣</div> <div slot="empty">😣</div> </IgbRatingSymbol>
<IgbRatingSymbol> <div>😣</div> <div slot="empty">😣</div> </IgbRatingSymbol>
<IgbRatingSymbol> <div>😣</div> <div slot="empty">😣</div> </IgbRatingSymbol>
</IgbRating>
step属性は単一選択モードでは機能しないことに注意してください。
空および選択済み
Ignite UI for Blazor 評価コンポーネントを使用すると、ユーザーは単一の評価値の空の状態と選択された状態に異なるアイコン / 要素を使用できます。シンボルを宣言するときは、たとえ同じであっても、スロットごとに 2 つのアイコン (空とフル) を提供することが必須です。次に例を示します。
<IgbRatingSymbol>
<IgbIcon Collection="material" IconName="bandage"></IgbIcon>
<IgbIcon Collection="material" IconName="bacteria" slot="empty"></IgbIcon>
</IgbRatingSymbol>
構成
Single (単一)
評価の Single ビジュアル モードをオンにします。フィードバック絵文字の顔など、固有の値を伝える記号を使用する場合に便利です。
Value (値)
Value 属性は、コンポーネントの現在の値を設定します。
Label (ラベル)
Label 属性を使用すると、評価コンポーネントのラベル値を設定できます。
値の形式
aria-valuetext (英語) を設定する書式文字列。そのすべてのインスタンスは、コントロールの現在の値に置き換えられます。スクリーン リーダーにとって重要であり、ローカライズに役立ちます。
Max Value (最大値)
Max 属性は、評価コンポーネントの最大許容値を設定します。
Step (ステップ)
Step 属性は、2 つのシンボル間の許容されるステップの割合を設定します。評価記号を半分に分割する場合に便利です。
Hover Preview (ホバー プレビュー)
HoverPreview 属性により、ホバー時にユーザー選択の可能な結果がコンポーネントに表示されます。選択した値が何であるかについて即座にフィードバックしたい場合に便利です。
Read-Only (読み取り専用)
ReadOnly 属性を使用すると、ユーザーは IgbRating を読み取り専用モードで設定できます。この属性は、コンポーネントを情報提供のみを目的として使用する場合に役立ちます。
Disabled (無効)
Disabled 属性はコンポーネントを無効にし、マウスやキーボードを使用して値を選択することを不可能にします。
メソッド
Step Up (ステップアップ)
StepUp メソッドは、コンポーネントの値を n ステップずつ増やします。step 係数によって決定されます。
Step Down (ステップダウン)
StepDown メソッドは、コンポーネントの値を n ステップ分減らします。step 係数によって決定されます。
イベント
IgbRating コンポーネントは、Hover と Change の 2 つの個別のイベントを発行します。
Hover Event (ホバー イベント)
Hover イベントは、シンボルにカーソルを合わせると発生します。マウス カーソルの下にあるシンボルの値を提供します。カスタム値ラベルと読み出しを作成するのに役立ちます。
Change Event (変更イベント)
選択した値が変更されると、Change イベントが発生します。
スタイル設定
IgbRating コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。次の表に、公開されているすべての CSS パーツを示します。
| 名前 | 説明 |
|---|---|
base |
すべての評価要素を保持するメイン ラッパー。 |
label |
ラベルのパーツ。 |
value-label |
値ラベルのパーツ。 |
symbols |
すべての評価記号のラッパー。 |
symbol |
カプセル化されたデフォルト シンボルのパーツ。 |
full |
カプセル化された完全なシンボルのパーツ。 |
empty |
カプセル化された空のシンボルのパーツ。 |
igc-rating::part(full) {
color: var(--ig-primary-500)
}
igc-rating::part(empty) {
color: var(--ig-secondary-200);
}