Rating

レーティングコンポーネントは、評価値を示すための一連の星アイコンを表示するように設計されています。

星の数、空の星、半分の星、満たされた星のアイコン、そして星の色を自由に設定できます。

評価値は動的に更新できます。

vue
<template>
 <Rating :value="50" />
</template>

Min Max

vue
<template>
 <Rating
  :value="3"
  :min="0"
  :max="5"
 />
</template>

Icon

vue
<template>
 <Rating
  :value="75"
  icon-empty="line-md:star-alt"
  icon-half="line-md:star-half-twotone"
  icon-fill="line-md:star-twotone"
 />
</template>

Icon Count

vue
<template>
 <Rating
  :value="80"
  :icon-count="12"
 />
</template>

Style

vue
<template>
 <Rating
  :value="50"
  margin="e-3"
  display-headings="1"
  gap="3"
 />
</template>

Gap

vue
<template>
 <Rating
  :value="50"
  gap="3"
 />
</template>

See Also