Rate 평점

별 평점: 읽기 전용 표시 / 인터랙티브 채점 / 반별 / 커스텀 문자와 개수.

기본 사용법

기본 사용법

<script setup>
import { ref } from 'vue'
const rate1 = ref(3)
</script>

<template>
  <LhRate v-model="rate1" />
</template>

<script>
export default {
  data() {
    return { rate1: 3 }
  },
}
</script>

<template>
  <LhRate v-model="rate1" />
</template>

반별과 읽기 전용

반별 / 읽기 전용

★★★★★4.5개의 별

<script setup>
import { ref } from 'vue'
const rate2 = ref(3.5)
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate2" allow-half />
    <LhRate :model-value="4.5" readonly allow-half show-score />
  </div>
</template>

<script>
export default {
  data() {
    return { rate2: 3.5 }
  },
}
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate2" allow-half />
    <LhRate :model-value="4.5" readonly allow-half show-score />
  </div>
</template>

max로 별 개수의 총합을 커스터마이징하고, disabled로 인터랙션을 비활성화하며, character로 평점 기호를 커스터마이징합니다.

커스텀

<script setup>
import { ref } from 'vue'
const rate3 = ref(8)
const rate4 = ref(3)
const rate5 = ref(4)
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate3" :max="10" />
    <LhRate v-model="rate4" disabled />
    <LhRate v-model="rate5" character="차" />
  </div>
</template>

<script>
export default {
  data() {
    return { rate3: 8, rate4: 3, rate5: 4 }
  },
}
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate3" :max="10" />
    <LhRate v-model="rate4" disabled />
    <LhRate v-model="rate5" character="차" />
  </div>
</template>

API

LhRate Props

프로퍼티	설명	타입	기본값
modelValue	현재 평점(제어되는 v-model)	number	0
max	별 개수 상한	number	5
allowHalf	반별 허용	boolean	false
readonly	읽기 전용(화면 판독기를 위한 별 텍스트 출력)	boolean	false
disabled	비활성화	boolean	false
character	커스텀 문자	string	—
showScore	점수 텍스트 표시	boolean	false
scoreTemplate	점수 템플릿({n} 자리 표시)	string	—
sx	sx 빠른 레이아웃 속성	LhSxProps	—

Events

이벤트	설명	콜백 매개변수
update:modelValue	평점이 변경될 때 발생, v-model과 함께 사용	(value: number)
change	평점이 변경될 때 발생(클릭과 키보드 조작 모두 발생)	(value: number)

접근성

• 인터랙티브 상태는 role="radiogroup"이며, 각 별은 실제로 포커스 가능한 버튼(roving tabindex)이고, 방향키로 점수를 조정하고 Home/End로 0/최대로 이동합니다
• 반별 모드에서 키보드는 0.5 단위로 이동합니다
• 읽기 전용 상태는 role="img" + aria-label="n 별"을 출력하여 화면 판독기에 제공합니다
• :focus-visible 포커스 링

타입 정의

이 컴포넌트가 외부로 노출하는 TypeScript 타입 구조는 다음과 같습니다(packages/components/rate/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 클릭하여 전체 정의를 펼쳐 볼 수 있습니다; 프로퍼티 설명은 위쪽 Props 표를 참고하세요):

LhRateProps

export interface LhRateProps {
  /** 현재 평점(제어되는 v-model) */
  modelValue?: number
  /** 별 개수 상한 */
  max?: number
  /** 반별 허용 */
  allowHalf?: boolean
  /** 읽기 전용(화면 판독기를 위한 별 텍스트 출력) */
  readonly?: boolean
  disabled?: boolean
  /** 커스텀 문자(기본값 ★) */
  character?: string
  /** 점수 텍스트 표시 */
  showScore?: boolean
  /** 점수 템플릿({n} 자리 표시) */
  scoreTemplate?: string
  /** 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

상수

이 컴포넌트에서 사용하는 공개 상수는 다음과 같습니다(Props 표의 타입/기본값 열에서 같은 이름의 항목을 클릭하면 이곳으로 이동합니다):

LH_RATE_MAX_DEFAULT _{(출처: @lh-ui/share/core/rate)}

/** 기본 별 개수 */
export const LH_RATE_MAX_DEFAULT = 5