Blazor 평가 개요

    Ignite UI for Blazor 하면 사용자가 평가 결과를 보고 피드백을 제공할 수 있습니다.

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

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbRatingModule));

    ​IgbRating 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일이나 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

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

    <IgbRating></IgbRating>

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

    Using Custom Symbols

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

    <IgbRating>
  <IgbRatingSymbol> <div>💙</div> <div slot="empty">💙</div> </IgbRatingSymbol>
  <IgbRatingSymbol> <div>💙</div> <div slot="empty">💙</div> </IgbRatingSymbol>
  <IgbRatingSymbol> <div>💙</div> <div slot="empty">💙</div> </IgbRatingSymbol>
  <IgbRatingSymbol> <div>💙</div> <div slot="empty">💙</div> </IgbRatingSymbol>
  <IgbRatingSymbol> <div>💙</div> <div slot="empty">💙</div> </IgbRatingSymbol>
</IgbRating>

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

    단일 선택

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

    <IgbRating>
  <IgbRatingSymbol> <div>😣</div> <div slot="empty">😣</div> </IgbRatingSymbol>
  <IgbRatingSymbol> <div>😣</div> <div slot="empty">😣</div> </IgbRatingSymbol>
  <IgbRatingSymbol> <div>😣</div> <div slot="empty">😣</div> </IgbRatingSymbol>
  <IgbRatingSymbol> <div>😣</div> <div slot="empty">😣</div> </IgbRatingSymbol>
  <IgbRatingSymbol> <div>😣</div> <div slot="empty">😣</div> </IgbRatingSymbol>
</IgbRating>

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

    Empty & Selected

    Ignite UI for Blazor 하면 사용자가 단일 평가 값의 비어 있는 상태와 선택된 상태에 대해 다른 아이콘/요소를 사용할 수 있습니다. 심볼을 선언할 때 각 슬롯(비어 있음 및 가득 찬 상태)에 대해 두 개의 아이콘을 제공하는 것은 필수이며, 두 아이콘이 같더라도 마찬가지입니다. 예를 들어:

    <IgbRatingSymbol>
  <IgbIcon Collection="material" IconName="bandage"></IgbIcon>
  <IgbIcon Collection="material" IconName="bacteria" slot="empty"></IgbIcon>
</IgbRatingSymbol>

    Configuration

    하나의

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

    값

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

    상표

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

    값 형식

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

    최대값

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

    단계

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

    마우스오버 미리보기

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

    읽기 전용

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

    장애가 있는

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

    Methods

    스텝 업

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

    내려오다

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

    이벤트

    ​IgbRating 구성 요소는 Hover 및 Change 라는 두 가지 별도의 이벤트를 생성합니다.

    호버 이벤트

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

    이벤트 변경

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

    Styling

    구성 요소는 IgbRating 거의 모든 내부 요소에 대한 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