Rating
Rating component can be used when user wants to provide an option to rate the products/services provided.
# Playground
#Basic Usage
You can use the LvRating with some basic and complex use cases by passing either classes or props. LightVue rating is Both compatible with Vue 2.x and Vue 3.x
#Custom Increament
You can specify the increament count of LvRating through increment prop.If you pass 0.5 the increament will be half star.If it is 0.25 increament will be quater star
#Readonly
You can set star to Readonly mode by setting read-only prop true
#Show hide rating
You can specify if you want to display the star count or not by setting
#Specifying preset value
You can Specifying preset value by passing a desire value in the rating prop.
#Star Count
You can specify the number of stars you want to display by passing a number into max-rating prop.By default 5 stars will be displayed.
#Events
You can get the selected rating through various events like hover and click as below
#Specifying Color
You can specify the color of an active star rating through active-color prop
#Inactive Color
You can specify the color of an inactive star rating through inactive-color prop
#Size
You can specify the size if star by passing a value in star-size prop
#Customising borders
You can change the border width of star by passing a value in the border-width prop, you can also use the rounded variation by setting rounded-corners prop true,
#Add Glow
You can add glow active star by passing a color in the glow-color prop
#Advance Styling
You can also use the right to left layout for stars by setting the rtl prop true
#Setup
You can import a component and register it as a local and global vue component as follows:
// import the component
import LvRating from 'lightvue/rating';
// Register the component locally
export default {
components: {
LvRating
}
}// Register the component globally (Vue 2.x)
Vue.component('LvRating', LvRating);
// Register the component globally (Vue 3.x)
const app = Vue.createApp({
// ...
});
app.component('LvRating', LvRating);
app.mount('#app')
#APIs
All of the props, events and slots of the component are mentioned below: