Skip to content

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

NameTypeDefault ValueDescription
modelValuenumber0

Value of the rate.

shapeSVGNode | SVGNode[]Star

Shape icon of the rate.

Events

NameTypeDescription
update:modelValue(value: typeof modelValue) => void

Callback function triggered when the value is changed.

Styles

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

Released under the ISC License.