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

    등급 시각 모드를 켜single는 기능. 피드백 이모지 얼굴처럼 고유한 가치를 전달하는 심볼을 사용할 때 유용합니다.

    Value

    속성은value 컴포넌트의 현재 값을 설정합니다.

    Label

    속성은label 평가 구성 요소의 라벨 값을 설정할 수 있게 해줍니다.

    Value Format

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

    Max Value

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

    Step

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

    Hover Preview

    속성은hoverPreview 사용자가 마우스를 올릴 때 선택할 수 있는 결과를 컴포넌트에 보여주게 합니다. 선택한 가치가 무엇일지 즉각적으로 피드백을 주고 싶을 때 유용합니다.

    Read-Only

    이 속성은readOnly 사용자가 읽IgrRating 기 전용 모드를 설정할 수 있게 해줍니다. 이 속성은 정보 제공 목적으로만 컴포넌트를 사용하고 싶을 때 유용합니다.

    Disabled

    속성은disabled 컴포넌트를 비활성화하여 마우스나 키보드로 값을 선택할 수 없게 만듭니다.

    Methods

    Step Up

    ​stepUp이 방법은 구성 요소의 값을 단계별로n 증가시킵니다. 요인에step 의해 결정됩니다.

    Step Down

    ​stepDown이 방법은 컴포넌트의 값을 단계별로n 감소시킵니다. 요인에step 의해 결정됩니다.

    이벤트

    이 구성 요소는IgrRating 두 개의 별도 사건 -hoverandchange를 방출합니다.

    Hover Event

    이벤트는hover 심볼 위에 마우스를 올리면 발동됩니다. 마우스 커서 아래 기호의 값을 제공합니다. 맞춤형 가치 라벨과 판독값을 만드는 데 유용합니다.

    Change Event

    ​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