Web Components 평가 개요

    Ignite UI for Web Components 하면 사용자가 피드백을 보고 제공할 수 있습니다.

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

    npm install igniteui-webcomponents

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

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

defineComponents(IgcRatingComponent);

    Ignite UI for Web Components 에 대한 전체 소개는 시작 항목을 참조하세요.

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

    <igc-rating></igc-rating>

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

    Using Custom Symbols

    ​IgcRatingComponent 구성 요소를 사용하면 기본 별표 기호 대신 사용자 지정 기호를 사용할 수 있습니다. SVG, 아이콘 또는 다른 유니코드 기호와 같은 다른 기호를 사용하려면 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>

    등급 구성요소의 여는 괄호와 닫는 괄호 사이의 등급 기호 수에 따라 최대값이 결정됩니다.

    단일 선택

    Ignite UI for Web Components 사용자가 다양한 등급 값에 대해 다양한 아이콘/요소를 제공할 수 있는 단일 선택 모드가 있습니다. 이 경우 아이콘/요소 중 하나만 선택하여 사용자의 피드백을 반영할 수 있습니다.

    <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>

    ​step 속성은 단일 선택 모드에서는 작동하지 않습니다.

    Empty & Selected

    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>

    구성

    하나의

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

    값

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

    상표

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

    값 형식

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

    최대값

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

    단계

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

    마우스오버 미리보기

    ​hover-preview 속성을 사용하면 구성요소에 마우스를 올렸을 때 사용자 선택의 가능한 결과가 표시됩니다. 선택한 값이 무엇인지에 대한 즉각적인 피드백을 제공하려는 경우 유용합니다.

    읽기 전용

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

    장애가 있는

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

    Methods

    스텝 업

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

    내려오다

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

    이벤트

    ​IgcRatingComponent 구성요소는 igcHover 및 igcChange 라는 두 가지 개별 이벤트를 생성합니다.

    호버 이벤트

    기호 위로 마우스를 가져가면 igcHover 이벤트가 시작됩니다. 마우스 커서 아래의 기호 값을 제공합니다. 사용자 정의 값 레이블 및 판독값을 생성하는 데 유용합니다.

    이벤트 변경

    선택한 값이 변경되면 igcChange 이벤트가 시작됩니다.

    Styling

    ​IgcRatingComponent 구성 요소는 구성 요소 기호와 해당 주변 레이블의 스타일을 지정할 수 있는 기본, 레이블, 값 레이블, 기호 및 기호를 제공합니다.

    API Reference

    Additional Resources