A simple, customizable vue3 component for star ratings
npm install vue3-star-ratings-ksh
npm install vue3-star-ratings-ksh --save
`
You can use register it globally like this:
`javascript
import { createApp } from "vue";
import App from "./App.vue";
import vue3StarRatings from "vue3-star-ratings-ksh";
const app = createApp(App);
app.component("vue3-star-ratings", vue3StarRatings);
`
then use it this in your component:
Alternatively, you can use it directly:
`vue
`
$3
`html
`
`javascript
const { createApp } = Vue;
const App = {
//Component code...
};
const app = createApp(App);
app.component("vue3StarRatings", Vue3StarRatings);
app.mount("#app");
`
Vue3StarRatings uses v-model to sync the rating between the components and its parent :
.
You can customize the component by taking a look at the props table below.
Props
| Prop | Description | Type | Default |
| ------------- | ------------------------------------------------------------------------------------------------- | ---------------- | ------- |
| starSize | This is the height and width of the stars in pixels | String Or Number | 32 |
| starColor | This is the color of the stars when active | String | #ff9800 |
| inactiveColor | This is the color of the stars when inactive | String | #333 |
| numberOfStars | This is the number of stars shown and also the totalRating rating possible | Number | 5 |
| step | This is the increment or decrement when the control buttons are clicked | Number | 0.5 |
| controlBg | This is the background of the control buttons | String | #2e5090 |
| controlColor | This is the color of the color buttons | String | #fff |
| controlSize | This is the size of the the control buttons | String Or Number | 24 |
| showControl | This is the option to choose if the control buttons are being shown | Boolean | true |
| disableClick | This is the option to disabled click on the stars, use in conjunction with the showControl` Prop | Boolean | false |