Web Components Rating 개요

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

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

    npm install igniteui-webcomponents
cmd

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

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

defineComponents(IgcRatingComponent);
ts

    Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

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

    <igc-rating></igc-rating>
html

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

    사용자 정의 기호 사용

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

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

    단일 선택

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

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

    Ignite UI for Web Components | CTA 배너

    비어 있음 및 선택됨

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    구성

    하나의

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

    값

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

    상표

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

    값 형식

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

    최대값

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

    단계

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

    마우스오버 미리보기

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

    읽기 전용

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

    장애가 있는

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

    행동 양식

    스텝 업

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

    내려오다

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

    이벤트

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

    호버 이벤트

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

    이벤트 변경

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

    스타일링

    구성 요소는 IgcRatingComponent 거의 모든 내부 요소에 대한 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
    TS
    HTML
    index.css
    RatingStyle.css
    Edit in:

    API 참조

    추가 리소스