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 두 기호 사이에 허용되는 단계 비율을 설정합니다. 등급 기호를 반으로 나눌 때 유용합니다.

    마우스오버 미리보기

    The hoverPreview attribute makes the component show the possible outcome of user selection on hover. It is useful when you want to give instant feedback about what the selected value could be.

    읽기 전용

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

    장애가 있는

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

    Methods

    스텝 업

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

    내려오다

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

    이벤트

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

    호버 이벤트

    이벤트는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