Rate
Only God can judge me.
Example
Basic
Show Code
vue
<script lang="ts" setup>
import { RRate } from 'roughness'
import { ref } from 'vue'
let rate = ref(3)
</script>
<template>
<RRate v-model="rate" />
</template>
Shape
Show Code
vue
<script lang="ts" setup>
import { Heart } from 'lucide'
import { RRate } from 'roughness'
</script>
<template>
<RRate :shape="Heart" />
</template>
Usage
Props
Name | Type | Default Value | Description |
---|---|---|---|
modelValue | number | 0 | Value of the rate. |
shape | SVGNode | SVGNode[] | Star | Shape icon of the rate. |
Events
Name | Type | Description |
---|---|---|
update:modelValue | (value: typeof modelValue) => void | Callback function triggered when the value is changed. |
Styles
Name | Type | Default Value | Description |
---|---|---|---|
--r-rate-color | <color> | var(--r-common-primary-color) | Color of the rate control when active. |
--r-rate-control-size | <length> | calc(1em + 4px) | Size of the rate control. |
--r-rate-gap-size | <length> | 4px | Gap size of the rate control. |