React 평가 개요

    Ignite UI for React 등급 구성 요소를 사용하면 사용자가 피드백을 보고 제공할 수 있습니다.

    먼저, 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.

    npm install igniteui-react

    사용하기 전에 다음과 같이 등록해야 합니다. IgrRating​

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

    사용을 IgrRating 시작하는 가장 간단한 방법은 다음과 같습니다.

      <IgrRating></IgrRating>

    이렇게 하면 데이터를 입력하고 읽는 데 사용할 수 있는 별 5개 등급 구성 요소가 생성됩니다.

    Using Custom Symbols

    이 IgrRating 구성 요소를 사용하면 기본 별 기호 대신 사용자 지정 기호를 사용할 수 있습니다. SVG, 아이콘 또는 다른 유니코드 기호와 같은 다른 기호를 사용하려면 다음의 여는 대괄호와 닫는 대괄호 사이에 구성 요소를 배치 IgrRatingSymbol 해야 합니다. IgrRating​

      <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 등급 구성 요소에는 사용자가 다양한 등급 값에 대해 다른 아이콘/요소를 제공할 수 있는 단일 선택 모드가 있습니다. 이 경우 아이콘/요소 중 하나만 선택하고 사용자가 제공한 피드백을 반영할 수 있습니다.

    <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 속성은 단일 선택 모드에서는 작동하지 않습니다.

    Empty & Selected

    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>

    Configuration

    하나의

    등급에 대한 single 시각적 모드를 켭니다. 피드백 이모티콘 얼굴과 같이 고유한 값을 전달하는 기호를 사용할 때 유용합니다.

    값

    ​value 속성은 구성 요소의 현재 값을 설정합니다.

    상표

    ​label 속성을 사용하면 등급 구성 요소의 레이블 값을 설정할 수 있습니다.

    값 형식

    ​aria-valuetext 를 설정하는 형식 문자열입니다. 모든 인스턴스는 컨트롤의 현재 값으로 대체됩니다. 화면 판독기에 중요하며 현지화에 유용합니다.

    최대값

    ​max 속성은 등급 구성 요소의 최대 허용 값을 설정합니다.

    단계

    ​step 속성은 두 기호 사이에 허용되는 단계 비율을 설정합니다. 등급 기호를 반으로 나눌 때 유용합니다.

    마우스오버 미리보기

    이 hoverPreview 속성은 구성 요소가 마우스로 가리킬 때 사용자 선택의 가능한 결과를 표시하도록 합니다. 선택한 값이 무엇인지에 대한 즉각적인 피드백을 제공하려는 경우에 유용합니다.

    읽기 전용

    이 readOnly 속성을 사용하면 사용자가 읽기 전용 모드를 설정할 IgrRating 수 있습니다. 이 특성은 구성 요소를 정보 제공용으로만 사용하려는 경우에 유용합니다.

    장애가 있는

    ​disabled 속성은 구성 요소를 비활성화하여 마우스나 키보드를 사용하여 값을 선택할 수 없게 만듭니다.

    Methods

    스텝 업

    ​stepUp 메서드는 구성 요소의 값을 n 단계씩 증가시킵니다. step 계수에 의해 결정됩니다.

    내려오다

    ​stepDown 메서드는 구성 요소의 값을 n 단계만큼 감소시킵니다. step 계수에 의해 결정됩니다.

    이벤트

    ​IgrRating 구성 요소는 두 개의 개별 이벤트 -hover and change를 내보냅니다.

    호버 이벤트

    ​hover이 이벤트는 심볼 위로 마우스를 가져갈 때 발생합니다. 마우스 커서 아래에 있는 기호의 값을 제공합니다. 사용자 지정 값 레이블 및 판독값을 만드는 데 유용합니다.

    이벤트 변경

    ​change 선택한 값이 변경될 때 이벤트가 발생합니다.

    Styling

    구성 요소는 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);
}

    API Reference

    Additional Resources