Rate rating
introduce
Used to rate things.
Code Demo
Basic usage
Bind the current rating value through v-model.
<z-rate v-model="value" />
import { ref } from 'vue';
const value = ref(3);
Custom icon
Use the icon attribute to set the icon when selected, and the void-icon attribute to set the icon when not selected.
<z-rate v-model="value" icon="heart-fill" void-icon="heart" />
Custom style
Use the size attribute to set the size of the icon, the color attribute to set the color when it is selected, and void-color to set the color when it is not selected.
<z-rate
v-model="value"
:size="35"
color="#ffd21e"
void-icon="star"
void-color="#eee"
/>
Half star
Half stars can be selected by setting the allow-half property.
<z-rate v-model="value" allow-half />
import { ref } from 'vue';
const value = ref(2.5);
Custom quantity
Set the total number of ratings via the count attribute.
<z-rate v-model="value" :count="6" />
Can be cleared
When the clearable property is set to true, clicking the same value again will reset the value to 0.
<z-rate v-model="value" clearable />
Read-only status
Set the rating to read-only status via the readonly attribute.
<z-rate v-model="value" readonly />
Read-only status displays decimals
After setting the readonly and allow-half properties, the Rate component can display any decimal result.
<z-rate v-model="value" readonly allow-half />
import { ref } from 'vue';
const value = ref(3.3);
Listen for change events
When the rating changes, the change event is triggered.
<z-rate v-model="value" @change="onChange" />
import { ref } from 'vue';
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const value = ref(3);
const onChange = (value) => showToast('Current value: ' + value);
API
Props
| Parameters | Description | Type | Default value |
|---|---|---|---|
| v-model | Current score | number | - |
| count | Total number of icons | number | string | 5 |
| size | Icon size, default unit is px | number | string | 40rpx |
| gutter | Icon spacing, default unit is px | number | string | 8rpx |
| color | Color when selected | string | #ee0a24 |
| void-color | Color when not selected | string | #c8c9cc |
| disabled-color | Disabled color | string | #c8c9cc |
| icon | The icon name or image link when selected, equivalent to the name attribute of the Icon component | string | star-fill |
| void-icon | The icon name or image link when not selected, equivalent to the name attribute of the Icon component | string | star |
| icon-prefix | Icon class name prefix, equivalent to the class-prefix attribute of the Icon component | string | z-icon |
| allow-half | Whether to allow half selection | boolean | false |
| clearable | Whether to allow clearing after clicking again | boolean | false |
| readonly | Whether it is in read-only status. The rating cannot be modified in read-only status | boolean | false |
| disabled | Whether to disable rating | boolean | false |
| touchable | Whether ratings can be selected through swipe gestures | boolean | true |
Events
| Event name | Description | Callback parameters |
|---|---|---|
| change | Event triggered when the current score changes | currentValue: number |
Theme customization
Style variables
The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.
| Name | Default | Description |
|---|---|---|
| --z-rate-icon-size | 40rpx | - |
| --z-rate-icon-gutter | var(--z-padding-base) | - |
| --z-rate-icon-void-color | var(--z-gray-5) | - |
| --z-rate-icon-full-color | var(--z-danger-color) | - |
| --z-rate-icon-disabled-color | var(--z-gray-5) | - |