Rate
A rating component built on Lucide Star vector icons. Active stars feature high-saturation HSL-themed golden fills, heavy black borders, and springy hover-scaling micro-interactions.
Preview
基础评分
关联外部标签
允许半星
自定义最大值 (10颗星)
只读模式
自定义图腾图标 (icon)
不同的尺寸
Installation
pnpm dlx brutx-vue@latest add rateUsage
Basic Usage
<script setup>
import { ref } from 'vue'
import { Rate } from 'brutx-ui-vue'
const value = ref(3)
</script>
<template>
<Rate v-model="value" />
</template>Rate uses the current locale for its default accessible name. Use aria-label to provide a custom name, or aria-labelledby to reference visible page text. When aria-labelledby is present, the external label takes precedence.
<template>
<span id="product-rating-label">Product rating</span>
<Rate v-model="value" aria-labelledby="product-rating-label" />
</template>Half Star Support
Allow decimal ratings (half stars) using the allow-half property.
<script setup>
import { ref } from 'vue'
import { Rate } from 'brutx-ui-vue'
const value = ref(3.5)
</script>
<template>
<Rate v-model="value" allow-half />
</template>Max Stars Count
Change the upper limit of the rating scale (default is 5) using the max property.
<template>
<Rate v-model="value" :max="10" />
</template>Readonly Mode
Add readonly to display a rating while preventing hover previews, pointer selection, and keyboard changes.
<template>
<Rate v-model="value" readonly allow-half />
</template>Sizes
| Size | Description |
|---|---|
sm | Small icons with compact spacing |
md | Default icons and spacing |
lg | Large icons with wider spacing |
API Reference
| Name | Type | Default | Description |
|---|---|---|---|
modelValue | number | undefined | 0 | The current rating, bound with v-model. Hovering temporarily previews a rating; leaving restores the bound value. |
DetailsDeclared typenumber | undefined Default value details
Sourcepackages/ui/src/components/rate/Rate.vue | |||
max | number | undefined | 5 | The maximum rating, number of rendered icons, and value selected by the End key. Supply a positive integer. |
DetailsDeclared typenumber | undefined Default value details
Sourcepackages/ui/src/components/rate/Rate.vue | |||
allowHalf | boolean | undefined | false | Enables half-point selection and half-filled icons. The left half of each icon selects a half point, and arrow keys move in half-point steps. |
DetailsDeclared typeboolean | undefined Literal values
Default value details
Sourcepackages/ui/src/components/rate/Rate.vue | |||
readonly | boolean | undefined | false | Displays the rating while preventing hover previews, pointer selection, and keyboard changes, and removes the component from the Tab order. |
DetailsDeclared typeboolean | undefined Literal values
Default value details
Sourcepackages/ui/src/components/rate/Rate.vue | |||
size | "lg" | "sm" | "md" | undefined | "md" | Controls the rating icon dimensions and spacing between icons. |
DetailsDeclared type"lg" | "sm" | "md" | undefined Literal values
Default value details
Sourcepackages/ui/src/components/rate/Rate.vue | |||
icon | string | undefined | undefinedRuntime fallback: | The BrutalShape name used for rating icons, such as heart, lightning, or star-5. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/rate/Rate.vue | |||
ariaLabel | string | undefined | undefined | The custom accessible name for the rating control. It is used when aria-labelledby is omitted; when both are omitted, the current locale supplies the default name. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/rate/Rate.vue | |||
ariaLabelledby | string | undefined | undefined | The ID of an external label element. When provided, it names the rating control and takes precedence over ariaLabel. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/rate/Rate.vue | |||
| Name | Signature or type | Description |
|---|---|---|
@update:modelValue | [value: number] | Emitted when pointer or keyboard selection chooses a rating different from the current value, updating v-model. Hover previews do not emit it. |
DetailsDeclared type[value: number] Sourcepackages/ui/src/components/rate/Rate.vue | ||
@change | [value: number] | Emitted after update:modelValue when the user selects a different rating, with the same new rating as its payload. |
DetailsDeclared type[value: number] Sourcepackages/ui/src/components/rate/Rate.vue | ||
Accessibility
- Keyboard Interaction: Right or Up increases the rating; Left or Down decreases it.
Homeselects zero andEndselects the maximum. WithallowHalf, arrow keys use half-point steps. Read-only mode prevents keyboard changes and removes the component from the Tab order - ARIA Attributes: The root element has
role="slider",aria-valuenowrepresenting the current rating score,aria-valuemin="0",aria-valuemaxmapped tomax, andaria-readonlyindicating readonly state - Accessible Name: The default name comes from the current locale.
aria-labelledbyreferences a visible external label and takes precedence overaria-label; usearia-labelwhen no external label is available - Reduced Motion: The stamp animation after icon selection reads
prefers-reduced-motionand does not play when reduced motion is requested