Rate 評価

スターレーティングです。max による星数の上限、allowHalf による半星、character によるカスタム文字、読み取り専用と無効、showScore による評価のテキスト（scoreTemplate テンプレート）をサポートします。

評価

<template>
  <div class="demo-col" style="gap: 22px">
    <div>
      <LhRate v-model="score" :max="5" show-score score-template="{n} 星" />
      <p class="demo-note">制御される値：{{ score }}（showScore + scoreTemplate="{n} 星"）</p>
    </div>
    <div>
      <LhRate v-model="half" :max="5" allow-half />
      <p class="demo-note">allowHalf が半星を許可します：{{ half }}</p>
    </div>
    <div>
      <LhRate v-model="custom" :max="5" character="◈" />
      <p class="demo-note">character="◈" のカスタム文字</p>
    </div>
    <div>
      <LhRate :model-value="3.5" :max="5" readonly />
      <p class="demo-note">readonly は読み取り専用（role="img" で、スクリーンリーダーに星数テキストを読み上げ）</p>
    </div>
    <div>
      <LhRate v-model="score" :max="5" disabled />
      <p class="demo-note">disabled で無効</p>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({ score: 3, half: 2.5, custom: 4 }),
}
</script>

Props

プロパティ	説明	型	デフォルト値
v-model	現在の評価（model: modelValue/input）	number	—
max	星数の上限	number	5
allowHalf	半星を許可	boolean	false
readonly	読み取り専用（スクリーンリーダーは星数テキストを出力）	boolean	false
disabled	無効	boolean	false
character	カスタム文字（デフォルトは ★）	string	'★'
showScore	評価のテキストを表示	boolean	false
scoreTemplate	評価のテンプレート（{n} プレースホルダー）	string	'{n}'
sx	sx によるレイアウト省略記法	—	—

Events

イベント	説明	コールバックパラメータ
input	v-model のイベント	(val)
change	評価が変化したときに発火	(val)

アクセシビリティ

操作可能な状態では role="radiogroup"、各星は role="radio" + aria-checked です。readonly 状態では role="img" + aria-label の星数テキストになります。キーボードの ←/→ で星を選択します。