Labels in Vue Rating component
29 Aug 20235 minutes to read
You can use the showLabel
property to display a label that shows the current value of the rating. When the showLabel
property is set to true
, a label will be displayed.
<template>
<div class='wrap'>
<ejs-rating id="rating" value="3" :showLabel="true"></ejs-rating>
</div>
</template>
<script>
import Vue from 'vue';
import { RatingPlugin } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
Vue.use(RatingPlugin);
export default {}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
.wrap {
margin: 50px auto;
text-align: center;
}
</style>
Label position
The rating component allows you to place the label on the top, bottom, left, or right side of the rating using the labelPosition
property.
The following label positions are supported:
- Top: The label is placed on the top of the rating.
- Bottom: The label is placed on the bottom of the rating.
- Left: The label is placed on the left side of the rating.
- Right: The label is placed on the right side of the rating.
<template>
<div class='wrap'>
<label>Left Label Position</label><br/>
<ejs-rating id="rating1" value="3" :showLabel="true" labelPosition="Left"></ejs-rating><br/>
<label>Right Label Position</label><br/>
<ejs-rating id="rating2" value="3" :showLabel="true" labelPosition="Right"></ejs-rating><br/>
<label>Top Label Position</label><br/>
<ejs-rating id="rating3" value="3" :showLabel="true" labelPosition="Top"></ejs-rating><br/>
<label>Bottom Label Position</label><br/>
<ejs-rating id="rating4" value="3" :showLabel="true" labelPosition="Bottom"></ejs-rating><br/>
</div>
</template>
<script>
import Vue from 'vue';
import { RatingPlugin } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
Vue.use(RatingPlugin);
export default {}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
.wrap {
margin: 50px auto;
text-align: center;
}
</style>
Label template
You can use the labelTemplate
tag directive to specify a custom template for the Label
of the rating. The current value of the rating will be passed as the value
property in the template context when building the content of the label. This allows you to include dynamic information about the rating in the template.
<template>
<div class='wrap'>
<ejs-rating id="rating" value="3" :showLabel="true" :labelTemplate="labelTemplate" ></ejs-rating>
</div>
</template>
<script>
import Vue from 'vue';
import { RatingPlugin } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
Vue.use(RatingPlugin);
export default {
data() {
return {
labelTemplate: function(e) {
return { template: Vue.component("labelTemplate", {
template: '<span> out of 5</span>',
data() {
return {
data: {}
};
}
})}
}
}
};
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
.wrap {
margin: 50px auto;
text-align: center;
}
</style>