Rating

Rating component is a star based selection input.

Download #


npx volt-vue add Rating

Import #


import Rating from '@/volt/Rating.vue';

Basic #

Rating is used with the v-model property for two-way value binding.


<template>
    <div class="card flex justify-center">
        <Rating v-model="value" />
    </div>
</template>

<script setup lang="ts">
import Rating from '@/volt/Rating.vue';
import { ref } from 'vue';

const value = ref(null);
</script>

Number of Stars #

Number of stars to display is defined with stars property.


<template>
    <div class="card flex justify-center">
        <Rating v-model="value" :stars="10" />
    </div>
</template>

<script setup lang="ts">
import Rating from '@/volt/Rating.vue';
import { ref } from 'vue';

const value = ref(null);
</script>

Template #

Custom icons are used to override the default icons with onicon, officon and cancelicon slots.


<template>
    <div class="card flex justify-center">
        <Rating v-model="value">
            <template #onicon>
                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-onicon.png" height="24" width="24" />
            </template>
            <template #officon>
                <img src="https://primefaces.org/cdn/primevue/images/rating/custom-officon.png" height="24" width="24" />
            </template>
        </Rating>
    </div>
</template>

<script setup lang="ts">
import Rating from '@/volt/Rating.vue';
import { ref } from 'vue';

const value = ref(null);
</script>

ReadOnly #

When readOnly present, value cannot be edited.


<template>
    <div class="card flex justify-center">
        <Rating v-model="value" readonly />
    </div>
</template>

<script setup lang="ts">
import Rating from '@/volt/Rating.vue';
import { ref } from 'vue';

const value = ref(3);
</script>

Disabled #

When disabled is present, a visual hint is applied to indicate that the Knob cannot be interacted with.


<template>
    <div class="card flex justify-center">
        <Rating v-model="value" disabled />
    </div>
</template>

<script setup lang="ts">
import Rating from '@/volt/Rating.vue';
import { ref } from 'vue';

const value = ref(3);
</script>