Rate

Only God can judge me.

Example

Basic

Show Code

<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

<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.