Rating

레이팅(Rating)은 별점이나 아이콘으로 등급을 매기는 컴포넌트예요. 사용자가 평가할 수 있게 하거나, 읽기 전용으로 평점을 표시하는 데 사용합니다. 부분 점수와 다양한 크기·색상을 지원해요.

출처: 문서

본문

Types

Rating

기본 레이팅이에요. (Flexbox 기반).

Icon

사용 가능한 어떤 아이콘이든 레이팅 표시로 사용할 수 있어요.

Color

FUI 색상 팔레트의 어떤 색상이든 지정할 수 있어요.

Partial Ratings

부분적으로 채워진 레이팅을 표시하기 위해 소수 값을 사용할 수 있어요.

States

Disabled

disabled 클래스를 추가하면 레이팅을 비상호작용 모드로 시작할 수 있어요.

Variations

Size

레이팅은 크기가 달라질 수 있어요.

Examples

Setting existing values

아이콘은 메타데이터 값 data-icon 또는 설정 icon 중 하나로 설정할 수 있어요.

$('.toggle.example .rating')
        .rating({
          initialRating: 2,
          maxRating: 4
        })
      ;
      
      
        
          
          
            
              New York Dog Fair
              
            
            A fun day at the fair
          
        
        
          
          
            
              Dog Appreciation Day
              
            
            I'd like to tell your dog he's great

Read-Only Ratings

대화형 레이팅을 비활성화하거나 활성화할 수 있어요.

$('.toggle.example .rating')
        .rating('disable')
      ;
      
      
      $('.toggle.example .rating')
        .rating('enable')
      ;

Clearing Ratings

clearable이 true로 설정되면 현재 시작 별점을 클릭해 레이팅을 지울 수 있어요.

$('.clearing.example .rating')
        .rating('setting', 'clearable', true)
      ;

Initializing

Metadata

You can specify the icon, starting rating and max rating in metadata.
      
        $('.ui.rating')
          .rating()
        ;

아이콘, 시작 레이팅, 최대 레이팅을 메타데이터로 지정할 수 있어요.

Javascript

아이콘과 레이팅 값을 Javascript에서 지정할 수 있어요.

$('.ui.rating')
          .rating({
            icon: 'circle',
            initialRating: 3,
            maxRating: 5
          })
        ;

Without Javascript

사용자 상호작용이 필요 없다면, rating 모듈을 순수 읽기 전용 CSS 요소로 사용할 수 있어요.

Behaviors

다음 모든 행동들은 다음 구문을 사용해 호출할 수 있어요:

.ui.rating')
      .rating('behavior name', argumentOne, argumentTwo)
    ;

행동	설명
`set rating(rating)`	레이팅을 프로그래밍 방식으로 설정해요.
`get rating`	현재 레이팅을 가져와요.
`disable`	대화형 레이팅 모드를 비활성화해요.
`enable`	대화형 레이팅 모드를 활성화해요.
`clear rating`	현재 레이팅을 지워요.
`destroy`	인스턴스를 파괴하고 모든 이벤트를 제거해요.

Rating Settings

Rating 설정은 레이팅의 동작을 수정해요.

설정	기본값	설명
`icon`	`star`	아이콘 클래스 이름이에요.
`initialRating`	`0`	적용할 기본 레이팅을 나타내는 숫자예요.
`maxRating`	`4`	최대 레이팅 값이에요.
`fireOnInit`	`false`	초기화 직후 현재 값으로 `onRate` 같은 콜백을 발생시킬지 여부예요.
`clearable`	`auto`	기본적으로 레이팅은 아이콘이 1개일 때만 지울 수 있어요. true/false로 설정하면 사용자가 레이팅을 지울 수 있게 하거나 막아요.
`interactive`	`true`	사용자의 평가 기능을 활성화할지 여부예요.

Callbacks

Callbacks는 특정 행동 이후 발생할 함수를 지정해요.

콜백	컨텍스트	설명
`onRate(value)`	Rating	사용자가 새 레이팅을 선택한 후 호출돼요.

DOM Settings

DOM 설정은 이 모듈이 DOM과 어떻게 인터페이스할지 지정해요.

설정	기본값	설명
`namespace`	`rating`	이벤트 네임스페이스예요.
`selector`	`{ icon : '.icon' }`	모듈의 부분을 찾는 데 사용되는 선택자예요.
`className`	`{ active : 'active', hover : 'hover', loading : 'loading' }`	요소 상태를 결정하는 데 사용되는 클래스 이름이에요.

Debug Settings

Debug 설정은 콘솔에 대한 디버그 출력을 제어해요.

설정	기본값	설명
`name`	`Rating`	디버그 로그에 사용되는 이름이에요.
`silent`	`false`	모든 콘솔 출력을 조용히 만들어요.
`debug`	`false`	콘솔에 표준 디버그 출력을 제공해요.
`performance`	`true`	콘솔에 표준 디버그 출력을 제공해요.
`verbose`	`false`	콘솔에 보조 디버그 출력을 제공해요.
`error`	`{ method : 'The method you called is not defined' }`	오류 메시지 설정이에요.

더 알아보기 (Learn more)

레이팅으로 평점 입력이나 읽기 전용 평가를 간단히 만들 수 있어요. 부분 점수와 커스텀 아이콘을 활용해 자유롭게 꾸며 보세요. 진행 상태를 보여주는 Progress 문서도 함께 살펴보세요.