Rating

Anatomy

5점 만점에서 0.5점 단위(0~10)의 값을 기준으로 가득 찬 별과 반쪽 별을 조합해 표현하며,
같은 마크업으로 읽기 전용 상태와 입력 가능한 별점을 구성할 수 있습니다.

결과 표시
0점 / 초기 상태
점수 체크
읽기 전용
점수 체크 + 점수 표시

Sizes

Rating은 기본 크기(md)와 is-lg 두 가지 크기를 제공하며, 점수 텍스트 없이 별만 사용할 수 있습니다.

Default (24px) is-lg (32px)
  • value 값은 0 ~ 10 범위에서 0.5점 단위를 의미합니다. (예: 4.5점 → 9)
  • 별은 항상 5개를 기준으로, 가득 찬 별 → 반쪽 별 → 비어 있는 별 순으로 표시됩니다.
  • 0점(선택 전) 상태에서는 data-rating-value가 없거나 0일 때 자동으로 외곽선만 var(--bbc-color-icon-natural-0)으로 표시됩니다.
  • 입력 가능한 별점은 data-rating-interactive="true"와 숨은 input[data-rating-input]을 함께 사용합니다.
  • 같은 별(또는 반쪽)을 다시 클릭하면 0점(선택 전) 상태로 초기화됩니다.
  • data-readonly="true"를 사용하면 동일한 마크업으로 읽기 전용 별점을 표시할 수 있습니다.