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	—

LhRate 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 クイックレイアウトプロパティ */
  sx?: LhSxProps
}

定数

本コンポーネントで使用される公開定数は以下のとおりです（Props 表の「型 / デフォルト値」列から同名のエントリをクリックするとここへジャンプします）：

LH_RATE_MAX_DEFAULT _{（@lh-ui/share/core/rate から）}

/** デフォルトのスター数 */
export const LH_RATE_MAX_DEFAULT = 5