React Rating (評価) の概要

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

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrRating, IgrRatingModule,} from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrRatingModule.register();

export default class RatingOverview extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }       

    public render(): JSX.Element {
        return (
            <div className="container sample">                
                    <IgrRating className="size-large" label="Rate Experience" max={5} step={.5} hoverPreview={true}></IgrRating>                                    
            </div>
        );
    }  
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<RatingOverview/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.size-large {
    --ig-size: var(--ig-size-large);
}cssコピー

Edit in: Codesandbox

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

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

npm install igniteui-react
cmd

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

import { IgrRatingModule, IgrRating } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrRatingModule.register();
tsx

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

  <IgrRating></IgrRating>
tsx

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

カスタム シンボルの使用

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

  <IgrRating label="Rate Experience" step=".5" size="large" hoverPreview="true">
    <IgrRatingSymbol key="0">
        <IgrIcon ref={this.iconRef} name='heart' collection="material" key="heart0"></IgrIcon>
    </IgrRatingSymbol>
    <IgrRatingSymbol key="1">
        <IgrIcon  name='heart' collection="material" key="heart1"></IgrIcon>                           
    </IgrRatingSymbol>
    <IgrRatingSymbol key="2">
      	<IgrIcon  name='heart' collection="material" key="heart2"></IgrIcon>                           
    </IgrRatingSymbol>
    <IgrRatingSymbol key="3">
       	<IgrIcon  name='heart' collection="material" key="heart3"></IgrIcon>                           
    </IgrRatingSymbol>
    <IgrRatingSymbol key="4">
       	<IgrIcon  name='heart' collection="material" key="heart4"></IgrIcon>                           
    </IgrRatingSymbol>                        
</IgrRating> 
tsx

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrRating, IgrRatingModule, IgrRatingSymbol, IgrRatingSymbolModule, IgrIcon, IgrIconModule} from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrRatingModule.register();
IgrRatingSymbolModule.register();
IgrIconModule.register();

export default class RatingCustomSymbols extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }       

    public render(): JSX.Element {
        return (
            <div className="container sample">                
                    <IgrRating className="size-large" label="Rate Experience" step={.5} value={3} hoverPreview={true}>
                         <IgrRatingSymbol key="0">
                            <div key="div0"><IgrIcon ref={this.iconRef} name='heart' collection="material" key="default0"></IgrIcon></div>
                            <div key="empty-div0" slot='empty'><IgrIcon ref={this.iconRef} name='emptyHeart' collection="material" key="empty0"></IgrIcon></div> 
                        </IgrRatingSymbol>
                         <IgrRatingSymbol key="1">
                            <div key="div1"><IgrIcon ref={this.iconRef} name='heart' collection="material" key="default1"></IgrIcon></div>
                            <div key="empty-div1" slot='empty'><IgrIcon ref={this.iconRef} name='emptyHeart' collection="material" key="empty1"></IgrIcon></div>                           
                        </IgrRatingSymbol>
                        <IgrRatingSymbol key="2">
                            <div key="div2"><IgrIcon ref={this.iconRef} name='heart' collection="material" key="default2"></IgrIcon></div>
                            <div key="empty-div2" slot='empty'><IgrIcon ref={this.iconRef} name='emptyHeart' collection="material" key="empty2"></IgrIcon></div>                           
                        </IgrRatingSymbol>
                        <IgrRatingSymbol key="3">
                            <div key="div3"><IgrIcon ref={this.iconRef} name='heart' collection="material" key="default3"></IgrIcon></div>
                            <div key="empty-div3" slot='empty'><IgrIcon ref={this.iconRef} name='emptyHeart' collection="material" key="empty3"></IgrIcon></div>                           
                        </IgrRatingSymbol> 
                        <IgrRatingSymbol key="4">
                            <div key="div4"><IgrIcon ref={this.iconRef} name='heart' collection="material" key="default4"></IgrIcon></div>
                            <div key="empty-div4" slot='empty'><IgrIcon ref={this.iconRef} name='emptyHeart' collection="material" key="empty4"></IgrIcon></div>                           
                        </IgrRatingSymbol>             
                    </IgrRating>                                                      
            </div>
        );
    }  

    public iconRef(icon: IgrIcon){
        if(!icon){
            return;
        }
       
        const emptyHeart = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 241.597 220.057' version='1.0'><path style='opacity:.98000004;fill:none;stroke:#000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0' d='M243.452 1708.979c-26.934.23-51.58 21.476-55.081 48.293-3.114 23.844 7.33 47.4 23.968 64.215 27.515 27.805 61.227 49.794 83.447 82.547 4.39-4.689 9.278-12.066 14.227-17.529 25.23-27.85 58.166-48.013 80.865-78.155 17.175-22.806 19.103-58.113-.538-80.405-18.25-20.712-51.76-25.17-74.37-9.254-8.226 5.791-15.274 13.37-19.932 22.312-10.053-19.32-30.534-32.214-52.586-32.024z' transform='translate(-175.323 -1696.476)'/></svg>";
        const heartIcon = '<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" id="svg1" viewBox="0 0 475.82 442.01" version="1.0"> <g id="layer1" transform="translate(-134.07 -225.8)"> <path id="path7" d="m263.42 235.15c-66.24 0-120 53.76-120 120 0 134.75 135.93 170.08 228.56 303.3 87.57-132.4 228.56-172.85 228.56-303.3 0-66.24-53.76-120-120-120-48.05 0-89.4 28.37-108.56 69.18-19.16-40.81-60.52-69.18-108.56-69.18z" stroke="#000" stroke-width="18.7" fill="#e60000"/> </g> </svg>';
        icon.registerIconFromText("heart", heartIcon, "material");
        icon.registerIconFromText("emptyHeart", emptyHeart, "material");
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<RatingCustomSymbols/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.size-large {
    --ig-size: var(--ig-size-large);
}cssコピー

Edit in: Codesandbox

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

単一選択

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

  <IgrRating single="true">
    <IgrRatingSymbol key="0">                           
	<div key="div0">😣</div>	
	<div key="empty-div0" slot="empty">😣</div>
    </IgrRatingSymbol>
    <IgrRatingSymbol key="1">                           
 	<div key="div1">😣</div>
        <div key="empty-div1" slot="empty">😣</div>
    </IgrRatingSymbol>
    <IgrRatingSymbol key="2">                           
        <div key="div2">😣</div>
        <div key="empty-div2" slot="empty">😣</div>
    </IgrRatingSymbol>
    <IgrRatingSymbol key="3">                           
        <div key="div3">😣</div>
        <div key="empty-div3" slot="empty">😣</div>
    </IgrRatingSymbol>
    <IgrRatingSymbol key="4">                           
        <div key="div4">😣</div>
        <div key="empty-div4" slot="empty">😣</div>
    </IgrRatingSymbol>                         
</IgrRating>
tsx

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrRating, IgrRatingModule, IgrRatingSymbol, IgrRatingSymbolModule, IgrIcon, IgrIconModule} from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrRatingModule.register();
IgrRatingSymbolModule.register();
IgrIconModule.register();

export default class RatingSingleSelection extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }       

    public render(): JSX.Element {
        return (
            <div className="container sample">                
                    <IgrRating label="Rate Experience" single={true}>
                        <IgrRatingSymbol key="0">                           
                            <div key="div0">😣</div>
                            <div key="empty-div0" slot="empty">😣</div>
                        </IgrRatingSymbol>
                        <IgrRatingSymbol key="1">                           
                            <div key="div1">😔</div>
                            <div key="empty-div1" slot="empty">😔</div>
                        </IgrRatingSymbol>
                        <IgrRatingSymbol key="2">                           
                            <div key="div2">😐</div>
                            <div key="empty-div2" slot="empty">😐</div>
                        </IgrRatingSymbol>
                        <IgrRatingSymbol key="3">                           
                            <div key="div3">🙂</div>
                            <div key="empty-div3" slot="empty">🙂</div>
                        </IgrRatingSymbol>
                        <IgrRatingSymbol key="4">                           
                            <div key="div4">😆</div>
                            <div key="empty-div4" slot="empty">😆</div>
                        </IgrRatingSymbol>                         
                    </IgrRating>                                                      
            </div>
        );
    }  

    public iconRef(icon: IgrIcon){
        if(!icon){
            return;
        }
       
        const heartIcon = '<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" id="svg1" viewBox="0 0 475.82 442.01" version="1.0"> <g id="layer1" transform="translate(-134.07 -225.8)"> <path id="path7" d="m263.42 235.15c-66.24 0-120 53.76-120 120 0 134.75 135.93 170.08 228.56 303.3 87.57-132.4 228.56-172.85 228.56-303.3 0-66.24-53.76-120-120-120-48.05 0-89.4 28.37-108.56 69.18-19.16-40.81-60.52-69.18-108.56-69.18z" stroke="#000" stroke-width="18.7" fill="#e60000"/> </g> </svg>'  
        icon.registerIconFromText("heart", heartIcon, "material");
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<RatingSingleSelection/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

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

空および選択済み

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

<IgrRatingSymbol key="0">
    <div key="div0"><IgrIcon name='bandage' collection="material" key="default0"></IgrIcon></div>
    <div key="empty-div0" slot='empty'><IgrIcon name='bacteria' collection="material" key="empty0"></IgrIcon></div> 
</IgrRatingSymbol> 
tsx

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrRating, IgrRatingModule, IgrRatingSymbol, IgrRatingSymbolModule, IgrIcon, IgrIconModule} from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrRatingModule.register();
IgrRatingSymbolModule.register();
IgrIconModule.register();

export default class RatingEmptyAndSelected extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }       

    public render(): JSX.Element {
        return (
            <div className="container sample">                
                    <IgrRating>
                        <IgrRatingSymbol key="0">
                            <div key="div0"><IgrIcon ref={this.iconRef} name='bandage' collection="material" key="default0"></IgrIcon></div>
                            <div key="empty-div0" slot='empty'><IgrIcon ref={this.iconRef} name='bacteria' collection="material" key="empty0"></IgrIcon></div> 
                        </IgrRatingSymbol>
                         <IgrRatingSymbol key="1">
                            <div key="div1"><IgrIcon ref={this.iconRef} name='bandage' collection="material" key="default1"></IgrIcon></div>
                            <div key="empty-div1" slot='empty'><IgrIcon ref={this.iconRef} name='bacteria' collection="material" key="empty1"></IgrIcon></div>                           
                        </IgrRatingSymbol>
                        <IgrRatingSymbol key="2">
                            <div key="div2"><IgrIcon ref={this.iconRef} name='bandage' collection="material" key="default2"></IgrIcon></div>
                            <div key="empty-div2" slot='empty'><IgrIcon ref={this.iconRef} name='bacteria' collection="material" key="empty2"></IgrIcon></div>                           
                        </IgrRatingSymbol>
                        <IgrRatingSymbol key="3">
                            <div key="div3"><IgrIcon ref={this.iconRef} name='bandage' collection="material" key="default3"></IgrIcon></div>
                            <div key="empty-div3" slot='empty'><IgrIcon ref={this.iconRef} name='bacteria' collection="material" key="empty3"></IgrIcon></div>                           
                        </IgrRatingSymbol> 
                        <IgrRatingSymbol key="4">
                            <div key="div4"><IgrIcon ref={this.iconRef} name='bandage' collection="material" key="default4"></IgrIcon></div>
                            <div key="empty-div4" slot='empty'><IgrIcon ref={this.iconRef} name='bacteria' collection="material" key="empty4"></IgrIcon></div>                           
                        </IgrRatingSymbol>
                    </IgrRating>                                                      
            </div>
        );
    }  

    public iconRef(icon: IgrIcon){
        if(!icon){
            return;
        }
       
        const bandageIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="bdbandage-desc bdbandage-title" fit="" preserveAspectRatio="xMidYMid meet"><title id="bdbandage-title">Bandage Icon</title><desc id="bdbandage-desc">A picture depicting a bandage.</desc><path d="M3.212 10.03a3 3 0 010-4.242l2.576-2.576a3 3 0 014.242 0l.556.556-6.818 6.818zm17.5.334L10.364 20.707a4 4 0 01-5.657 0l-1.414-1.414a4 4 0 010-5.657L13.636 3.293a4 4 0 015.657 0l1.414 1.414a4 4 0 010 5.657zM14 5a1 1 0 101-1 1 1 0 00-1 1zm-2.5 2.5a1 1 0 101-1 1 1 0 00-1 1zM9 10a1 1 0 101-1 1 1 0 00-1 1zm-4 6a1 1 0 10-1-1 1 1 0 001 1zm1.75 2.25a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zm.75 3.25a1 1 0 10-1-1 1 1 0 001 1zM10 19a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zm1.75 2.25a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zM15 14a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zm1.75 2.25a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zM20 9a1 1 0 10-1 1 1 1 0 001-1zm.232 4.414l-6.818 6.818.556.556a3 3 0 004.242 0l2.576-2.576a3 3 0 000-4.242z"></path></svg>';
        const bacteriaIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="bcbacteria-desc bcbacteria-title" fit="" preserveAspectRatio="xMidYMid meet"><title id="bcbacteria-title">Bacteria Icon</title><desc id="bcbacteria-desc">A picture depicting a bacteria.</desc><path d="M20.867 7.664h-1.3a4.439 4.439 0 00-.467-1.157l.914-.915a1.132 1.132 0 00-1.6-1.6l-.915.914a4.477 4.477 0 00-1.157-.478V3.133a1.133 1.133 0 10-2.265 0v1.294a4.491 4.491 0 00-1.157.478L12 3.991a1.132 1.132 0 00-1.6 1.6l.8.8L9.6 8l-.8-.8a1.133 1.133 0 10-1.6 1.6l.8.8-1.6 1.6-.8-.8A1.132 1.132 0 004 12l.914.914a4.453 4.453 0 00-.477 1.157H3.133a1.133 1.133 0 100 2.265h1.3a4.439 4.439 0 00.477 1.157l-.914.915a1.132 1.132 0 001.6 1.6l.915-.914a4.439 4.439 0 001.157.477v1.3a1.133 1.133 0 102.265 0v-1.3a4.453 4.453 0 001.157-.477l.914.914a1.132 1.132 0 001.6-1.6l-.8-.8 1.6-1.6.8.8a1.133 1.133 0 101.6-1.6l-.8-.8 1.6-1.6.8.8a1.132 1.132 0 101.6-1.6l-.914-.914a4.453 4.453 0 00.477-1.157h1.3a1.133 1.133 0 100-2.265zM15 11a2 2 0 112-2 2 2 0 01-2 2zm-5.5 5a1.5 1.5 0 111.5-1.5A1.5 1.5 0 019.5 16z"></path></svg>';
        icon.registerIconFromText("bandage", bandageIcon, "material");
        icon.registerIconFromText("bacteria", bacteriaIcon,"material");
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<RatingEmptyAndSelected/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

構成

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 パーツを示します。

名前	説明
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

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrRating, IgrRatingModule,} from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrRatingModule.register();

export default class RatingStyling extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }       

    public render(): JSX.Element {
        return (
            <div className="container sample">                
                <IgrRating className="size-large" label="Styled Rating" value={2.5} step={.5} hoverPreview={true}></IgrRating>                                    
            </div>
        );
    }  
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<RatingStyling/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

igc-rating {
    --symbol-size: 44px;
    --symbol-full-color: hsla(var(--ig-warn-A400), var(--ig-warn-a));
    --symbol-empty-color: hsla(var(--ig-warn-A400), var(--ig-warn-a));
}

igc-rating[disabled] {
    --symbol-full-color: hsla(var(--ig-gray-400), var(--ig-gray-a));
    --symbol-empty-color: hsla(var(--ig-gray-400), var(--ig-gray-a));
}

igc-rating::part(label) {
    font-size: 18px;
    font-weight: 600;
    text-transform: var(--ig-overline-text-transform);
    color: hsla(var(--ig-gray-600), var(--ig-gray-a));
}

igc-rating::part(symbols) {
    gap: 8px; 
}

.size-large {
    --ig-size: var(--ig-size-large);
}
cssコピー

Edit in: Codesandbox

API リファレンス

• IgrRating
• スタイル設定 & テーマ

その他のリソース

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