Rate

Star rating. The default is five stars, half-star steps, and click-again to clear. Filled stars use the brand gold; empty stars stay a neutral outline.

Demos

Basic

Half stars are on by default. Clicking the current value clears it to 0. Hover previews with --gk-color-brand-hover.

3.5

<gk-rate :value="score" @change="onScore"></gk-rate>

Cleared

<gk-rate value="0"></gk-rate>

Sizes

Glyphs are 16 / 22 / 28. The hit box stays at least 28px tall.

<gk-rate size="sm" value="4"></gk-rate>
<gk-rate size="md" value="4"></gk-rate>
<gk-rate size="lg" value="4"></gk-rate>

Readonly and disabled

<gk-rate readonly value="4"></gk-rate>
<gk-rate disabled value="2"></gk-rate>

Whole stars

In Vue, set .allowHalf="false". A bare allow-half="false" attribute is still true.

<gk-rate .allowHalf="false" value="3"></gk-rate>

API

Properties

Name	Type	Default	Notes
value	number	0	0 is cleared
count	number	5
allow-half	boolean	true
allow-clear	boolean	true	Click the current value again
size	sm | md | lg	md
color	string	brand	Filled color. Empty stays neutral
readonly / disabled	boolean	false
name	string	—

Events

change and update:value with { value }.

Parts

root, item, icon, half, full. The group is a radiogroup labelled 評分 / Rating. Each stop is a radio. A custom character slot is a follow-up.