React Rating (評価) の概要

Ignite UI for React 評価コンポーネントを使用すると、ユーザーはフィードバックを表示して提供できます。

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react

IgrRating を使用する前に、次のように登録する必要があります:

import { IgrRating } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrRating の使用を開始する最も簡単な方法は次のとおりです:

  <IgrRating></IgrRating>

これにより、データの入力と読み取りに使用できる 5 つ星の評価コンポーネントが作成されます。

カスタム シンボルの使用

IgrRating コンポーネントを使用すると、デフォルトの星シンボルの代わりにカスタム シンボルを使用できます。SVG、アイコン、または別の Unicode シンボルなどの別のシンボルを使用する場合は、IgrRating の開く括弧と閉じる括弧の間に IgrRatingSymbol コンポーネントを配置する必要があります。

  <IgrRating className="size-large" label="Rate Experience" step={.5} hoverPreview={true}>
    <IgrRatingSymbol>
        <IgrIcon name='heart' collection="material"></IgrIcon>
    </IgrRatingSymbol>
    <IgrRatingSymbol>
        <IgrIcon  name='heart' collection="material"></IgrIcon>
    </IgrRatingSymbol>
    <IgrRatingSymbol>
      <IgrIcon  name='heart' collection="material"></IgrIcon>
    </IgrRatingSymbol>
    <IgrRatingSymbol>
       <IgrIcon  name='heart' collection="material"></IgrIcon>
    </IgrRatingSymbol>
    <IgrRatingSymbol>
       <IgrIcon  name='heart' collection="material"></IgrIcon>
    </IgrRatingSymbol>
</IgrRating>

評価コンポーネントの開く括弧と閉じる括弧間の評価記号の数によって、最大値が決まります。

単一選択

Ignite UI for React 評価コンポーネントには、ユーザーがさまざまな評価値に対してさまざまなアイコン / 要素を提供できる単一選択モードがあります。この場合、アイコン / 要素の 1 つだけを選択して、ユーザーからのフィードバックを反映させることができます。

<IgrRating single={true}>
  <IgrRatingSymbol>
      <div>😣</div>
      <div slot="empty">😣</div>
    </IgrRatingSymbol>
  <IgrRatingSymbol>
      <div>😣</div>
      <div slot="empty">😣</div>
    </IgrRatingSymbol>
  <IgrRatingSymbol>
      <div>😣</div>
      <div slot="empty">😣</div>
    </IgrRatingSymbol>
  <IgrRatingSymbol>
      <div>😣</div>
      <div slot="empty">😣</div>
    </IgrRatingSymbol>
  <IgrRatingSymbol>
      <div>😣</div>
      <div slot="empty">😣</div>
    </IgrRatingSymbol>
</IgrRating>

step 属性は単一選択モードでは機能しないことに注意してください。

空および選択済み

Ignite UI for React 評価コンポーネントを使用すると、ユーザーは単一の評価値の空の状態と選択された状態に異なるアイコン / 要素を使用できます。シンボルを宣言するときは、たとえ同じであっても、スロットごとに 2 つのアイコン (空とフル) を提供することが必須です。次に例を示します。

<IgrRatingSymbol>
    <div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
    <div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div>
</IgrRatingSymbol>

構成

Single (単一)

評価の Single ビジュアル モードをオンにします。フィードバック絵文字の顔など、固有の値を伝える記号を使用する場合に便利です。

Value (値)

Value 属性は、コンポーネントの現在の値を設定します。

Label (ラベル)

Label 属性を使用すると、評価コンポーネントのラベル値を設定できます。

値の形式

aria-valuetext (英語) を設定する書式文字列。そのすべてのインスタンスは、コントロールの現在の値に置き換えられます。スクリーン リーダーにとって重要であり、ローカライズに役立ちます。

Max Value (最大値)

Max 属性は、評価コンポーネントの最大許容値を設定します。

Step (ステップ)

Step 属性は、2 つのシンボル間の許容されるステップの割合を設定します。評価記号を半分に分割する場合に便利です。

Hover Preview (ホバー プレビュー)

hoverPreview 属性により、ホバー時にユーザー選択の可能な結果がコンポーネントに表示されます。選択した値が何であるかについて即座にフィードバックしたい場合に便利です。

Read-Only (読み取り専用)

ReadOnly 属性を使用すると、ユーザーは IgrRating を読み取り専用モードで設定できます。この属性は、コンポーネントを情報提供のみを目的として使用する場合に役立ちます。

Disabled (無効)

Disabled 属性はコンポーネントを無効にし、マウスやキーボードを使用して値を選択することを不可能にします。

メソッド

Step Up (ステップアップ)

StepUp メソッドは、コンポーネントの値を n ステップずつ増やします。step 係数によって決定されます。

Step Down (ステップダウン)

StepDown メソッドは、コンポーネントの値を n ステップ分減らします。step 係数によって決定されます。

イベント

IgrRating コンポーネントは、hover と change の 2 つの個別のイベントを発行します。

Hover Event (ホバー イベント)

hover イベントは、シンボルにカーソルを合わせると発生します。マウス カーソルの下にあるシンボルの値を提供します。カスタム値ラベルと読み出しを作成するのに役立ちます。

Change Event (変更イベント)

選択した値が変更されると、change イベントが発生します。

スタイル設定

IgrRating コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。次の表に、公開されているすべての CSS パーツを示します。

igc-rating::part(full) {
  color: var(--ig-primary-500)
}

igc-rating::part(empty) {
  color: var(--ig-secondary-200);
}

API リファレンス

その他のリソース

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)