Skip to content

wiz-star-rating

wiz-star-rating is a reusable Vue.js component designed to display a 5-star rating system with customizable images and links for each star. The component is responsive and provides flexibility with default or custom icon. You can configure images for the component items.

Usage

Markup:

vue

<wiz-star-rating></wiz-star-rating>

To assign custom images instead of the stars:

vue
<wiz-star-rating 
  :images="{
    link01: 'https://example.com/star01.png',
    link02: 'https://example.com/star02.png',
    link03: 'https://example.com/star03.png',
    link04: 'https://example.com/star04.png',
    link05: 'https://example.com/star05.png',
  }"
/>

Properties


The following properties are available:
PropertyTypeDefault valueDescription
imagesobject{}An object of custom image URLs or paths to override the default star icons. Keys must match "link01", "link02", "link03", "link04", "link05".
link01-05stringhttps://viseven.comTarget URLs for the "link01", "link02", "link03", "link03", "link04", and "link05". Links the image to a target webpage.

Limitations

The structure of wiz-star-rating is fixed to display five images in a row.