Web Components Rating (評価) の概要

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:

    npm install igniteui-webcomponents
cmd

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

    import { defineComponents, IgcRatingComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcRatingComponent);
ts

    Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

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

    <igc-rating></igc-rating>
html

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

    カスタム シンボルの使用

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

    <igc-rating>
  <igc-rating-symbol> <div>💙</div> <div slot="empty">💙</div> </igc-rating-symbol>
  <igc-rating-symbol> <div>💙</div> <div slot="empty">💙</div> </igc-rating-symbol>
  <igc-rating-symbol> <div>💙</div> <div slot="empty">💙</div> </igc-rating-symbol>
  <igc-rating-symbol> <div>💙</div> <div slot="empty">💙</div> </igc-rating-symbol>
</igc-rating>
html

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

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

    単一選択

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

    <igc-rating single>
  <igc-rating-symbol> <div>😣</div> <div slot="empty">😣</div> </igc-rating-symbol>
  <igc-rating-symbol> <div>😣</div> <div slot="empty">😣</div> </igc-rating-symbol>
  <igc-rating-symbol> <div>😣</div> <div slot="empty">😣</div> </igc-rating-symbol>
  <igc-rating-symbol> <div>😣</div> <div slot="empty">😣</div> </igc-rating-symbol>
  <igc-rating-symbol> <div>😣</div> <div slot="empty">😣</div> </igc-rating-symbol>
</igc-rating>
html

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

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

    Ignite UI for Web Components | CTA Banner

    空および選択済み

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

    <igc-rating-symbol>
  <igc-icon collection="default" name="bandage"></igc-icon>
  <igc-icon collection="default" name="bacteria" slot="empty"></igc-icon>
</igc-rating-symbol>
html

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    構成

    Single (単一)

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

    Value (値)

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

    Label (ラベル)

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

    値の形式

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

    Max Value (最大値)

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

    Step (ステップ)

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

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

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

    Read-Only (読み取り専用)

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

    Disabled (無効)

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

    メソッド

    Step Up (ステップアップ)

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

    Step Down (ステップダウン)

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

    イベント

    IgcRatingComponent コンポーネントは、igcHover と igcChange の 2 つの個別のイベントを発行します。

    Hover Event (ホバー イベント)

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

    Change Event (変更イベント)

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

    スタイル設定

    IgcRatingComponent コンポーネントは、その内部要素のほとんどすべての 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);
}
css

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    API リファレンス

    その他のリソース