Appearance in Vue Rating component
11 Jun 202419 minutes to read
You can also customize the appearance of rating component.
Items count
You can specify the number of rating items using the itemsCount property.
<template>
<div class='wrap'>
<ejs-rating id="rating" itemsCount="8" value="3"></ejs-rating>
</div>
</template>
<script setup>
import { RatingComponent as EjsRating} from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
</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><template>
<div class='wrap'>
<ejs-rating id="rating" itemsCount="8" value="3"></ejs-rating>
</div>
</template>
<script>
import { RatingComponent } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {
name: "App",
components: {
"ejs-rating": RatingComponent
},
}
</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>Disabled
You can disable the rating component by using the disabled property. When the disabled property is set to true, the rating component will be disabled and the user will not be able to interact with it and a disabled rating component may have a different visual appearance than an enabled one.
<template>
<div class='wrap'>
<ejs-rating id="rating" value="3" :disabled="true"></ejs-rating>
</div>
</template>
<script setup>
import { RatingComponent as EjsRating} from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
</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><template>
<div class='wrap'>
<ejs-rating id="rating" value="3" :disabled="true"></ejs-rating>
</div>
</template>
<script>
import { RatingComponent } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {
name: "App",
components: {
"ejs-rating": RatingComponent
},
}
</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>Visible
You can use the visible property of the rating component to component the visibility of the component. When the visible property is set to true, the rating component will be visible on the page. When it is set to false, the component will be hidden.
<template>
<div class='wrap'>
<button id='btn' @click="visible">Visible</button>
<ejs-rating id="rating" value="3" :visible="true" ref="rating"></ejs-rating>
</div>
</template>
<script setup>
import { RatingComponent as EjsRating } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
import { ref } from 'vue';
enableRipple(true);
const rating=ref(null);
const visible = () => {
rating.value.ej2Instances.visible = !rating.value.ej2Instances.visible;
};
</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><template>
<div class='wrap'>
<button id='btn' v-on:click="visible">Visible</button>
<ejs-rating id="rating" value="3" :visible="true" ref="rating"></ejs-rating>
</div>
</template>
<script>
import { RatingComponent } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {
name: "App",
components: {
"ejs-rating": RatingComponent
},
methods: {
visible: function () {
this.$refs.rating.ej2Instances.visible = !this.$refs.rating.ej2Instances.visible;
}
}
}
</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>Read only
You can use the readOnly property of the rating component to make the component non-interactive and prevent the user from changing the rating value.
<template>
<div class='wrap'>
<ejs-rating id="rating" value="3" :readOnly="true"></ejs-rating>
</div>
</template>
<script setup>
import { RatingComponent as EjsRating } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
</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><template>
<div class='wrap'>
<ejs-rating id="rating" value="3" :readOnly="true"></ejs-rating>
</div>
</template>
<script>
import { RatingComponent } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {
name: "App",
components: {
"ejs-rating": RatingComponent
},
}
</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>CssClass
You can customize the appearance of the rating component, such as by changing its colors, fonts, sizes, or other visual aspects by using the cssClass property.
Changing rating symbol border color
You can change the rating icon border color in rating component, you can use the cssClass property and set the text-stroke CSS property of .e-rating-icon to your desired border color.
<template>
<div class='wrap'>
<ejs-rating id="rating" value="3" cssClass="custom-border" ></ejs-rating>
</div>
</template>
<script setup>
import { RatingComponent as EjsRating } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
</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;
}
.e-rating-container.custom-border .e-rating-item-list:hover .e-rating-item-container .e-rating-icon,
.e-rating-container.custom-border .e-rating-item-container .e-rating-icon {
/* To change rating symbol border color */
-webkit-text-stroke: 2px #ae9e9d;
}
</style><template>
<div class='wrap'>
<ejs-rating id="rating" value="3" cssClass="custom-border"></ejs-rating>
</div>
</template>
<script>
import { RatingComponent } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {
name: "App",
components: {
"ejs-rating": RatingComponent
},
}
</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;
}
.e-rating-container.custom-border .e-rating-item-list:hover .e-rating-item-container .e-rating-icon,
.e-rating-container.custom-border .e-rating-item-container .e-rating-icon {
/* To change rating symbol border color */
-webkit-text-stroke: 2px #ae9e9d;
}
</style>Changing rated/un-rated symbol fill color
You can customize the fill colors of rated and un-rated icons in the rating component using the cssClass property and the linear-gradient color-stops in the background CSS property of .e-rating-icon. The first color-stop defines the rated fill color and the second defines the un-rated fill color.
<template>
<div class='wrap'>
<ejs-rating id="rating" value="3" cssClass="custom-fill" ></ejs-rating>
</div>
</template>
<script setup>
import { RatingComponent as EjsRating } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
</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;
}
.e-rating-container.custom-fill .e-rating-item-list:hover .e-rating-item-container .e-rating-icon,
.e-rating-container.custom-fill .e-rating-item-container .e-rating-icon {
/* To change rated symbol fill color and un-rated symbol fill color */
background: linear-gradient(to right, #ffe814 var(--rating-value), #d8d7d4 var(--rating-value));
background-clip: text;
-webkit-background-clip: text;
}
</style><template>
<div class='wrap'>
<ejs-rating id="rating" value="3" cssClass="custom-fill"></ejs-rating>
</div>
</template>
<script>
import { RatingComponent } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {
name: "App",
components: {
"ejs-rating": RatingComponent
},
}
</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;
}
.e-rating-container.custom-fill .e-rating-item-list:hover .e-rating-item-container .e-rating-icon,
.e-rating-container.custom-fill .e-rating-item-container .e-rating-icon {
/* To change rated symbol fill color and un-rated symbol fill color */
background: linear-gradient(to right, #ffe814 var(--rating-value), #d8d7d4 var(--rating-value));
background-clip: text;
-webkit-background-clip: text;
}
</style>This will customize the rated fill color to #ffe814 and un-rated fill color to #d8d7d4. --rating-value in the linear-gradient provides the current value of the rating item.
Changing the item spacing
You can change the space between the rating items in rating component, by using the cssClass property and setting the margin / padding CSS property of .e-rating-item-container to your desired size.
<template>
<div class='wrap'>
<ejs-rating id="rating" value="3" cssClass="custom-font" ></ejs-rating>
</div>
</template>
<script setup>
import { RatingComponent as EjsRating } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
</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;
}
.e-rating-container.custom-font .e-rating-item-container {
/* To change the size between items */
margin: 0px 7px;
}
</style><template>
<div class='wrap'>
<ejs-rating id="rating" value="3" cssClass="custom-font"></ejs-rating>
</div>
</template>
<script>
import { RatingComponent } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {
name: "App",
components: {
"ejs-rating": RatingComponent
},
}
</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;
}
.e-rating-container.custom-font .e-rating-item-container {
/* To change the size between items */
margin: 0px 7px;
}
</style>Changing icon using CssClass
You can change the rating item icon in rating component, you can use the cssClass property and set the content CSS property of .e-icons.e-star-filled:before to your desired font icon.
<template>
<div class='wrap'>
<ejs-rating id="rating" value="3" cssClass="custom-icon" ></ejs-rating>
</div>
</template>
<script setup>
import { RatingComponent as EjsRating} from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
</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;
}
@font-face {
font-family: 'custom-icon';
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1vSfQAAAEoAAAAVmNtYXDnEudXAAABiAAAADZnbHlmVIZrowAAAcgAAAEYaGVhZCK6KOUAAADQAAAANmhoZWEIUAQDAAAArAAAACRobXR4CAAAAAAAAYAAAAAIbG9jYQCMAAAAAAHAAAAABm1heHABDQCJAAABCAAAACBuYW1lv3dY+QAAAuAAAAJVcG9zdN12YnkAAAU4AAAALwABAAAEAAAAAFwEAAAAAAAD8wABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAAEGWKhV8PPPUACwQAAAAAAN/UcgcAAAAA39RyBwAAAAAD8wPaAAAACAACAAAAAAAAAAEAAAACAH0AAQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wLnAgQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wL//wAA5wL//wAAAAEABAAAAAEAAAAAAAAAjAAAAAEAAAAAA/MD2gB8AAATDxYVHw8/DjUvHiMPDC8PDwaoDAwMCwoKCgkICAgHBgYFBQQEAwICAQEBAQIDAwQFBQsVIyE5UmWI7FM5IR0WDQgFBAMDAgEBAQECAgMEBAUFBgYHCAgICQoKCgsMDAwMDAwNDAwNDBkYGBgXFRUUEhEICAYHCQsLDA0ODg8QEBARERESEQ4ODg4ODg0DwgYHBwgICQkKCgoLCwwLDA0MDQwNDQ4NDQ4NDQ4NDQ0NFSIwK0Rfbo/9XkUrJyMWFA0NDQ4NDQ4NDQ0ODA0NDA0LDAwLCgsKCgkICQgHBwYFBQQDAwIBAQIFBgkLDg8REwoKCwwRDw8NDQsLCggIBgUEAwIBAQECAgQEBQAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAsAAQABAAAAAAACAAcADAABAAAAAAADAAsAEwABAAAAAAAEAAsAHgABAAAAAAAFAAsAKQABAAAAAAAGAAsANAABAAAAAAAKACwAPwABAAAAAAALABIAawADAAEECQAAAAIAfQADAAEECQABABYAfwADAAEECQACAA4AlQADAAEECQADABYAowADAAEECQAEABYAuQADAAEECQAFABYAzwADAAEECQAGABYA5QADAAEECQAKAFgA+wADAAEECQALACQBUyBjdXN0b20taWNvblJlZ3VsYXJjdXN0b20taWNvbmN1c3RvbS1pY29uVmVyc2lvbiAxLjBjdXN0b20taWNvbkZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAYwB1AHMAdABvAG0ALQBpAGMAbwBuAFIAZQBnAHUAbABhAHIAYwB1AHMAdABvAG0ALQBpAGMAbwBuAGMAdQBzAHQAbwBtAC0AaQBjAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAYwB1AHMAdABvAG0ALQBpAGMAbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIBAgEDAAVoZWFydAAAAA==) format('truetype');
font-weight: normal;
font-style: normal;
}
.custom-icon .e-icons.e-star-filled {
font-family: 'custom-icon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.custom-icon .e-icons.e-star-filled:before {
content: "\e702";
}
</style><template>
<div class='wrap'>
<ejs-rating id="rating" value="3" cssClass="custom-icon"></ejs-rating>
</div>
</template>
<script>
import { RatingComponent } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {
name: "App",
components: {
"ejs-rating": RatingComponent
},
}
</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;
}
@font-face {
font-family: 'custom-icon';
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1vSfQAAAEoAAAAVmNtYXDnEudXAAABiAAAADZnbHlmVIZrowAAAcgAAAEYaGVhZCK6KOUAAADQAAAANmhoZWEIUAQDAAAArAAAACRobXR4CAAAAAAAAYAAAAAIbG9jYQCMAAAAAAHAAAAABm1heHABDQCJAAABCAAAACBuYW1lv3dY+QAAAuAAAAJVcG9zdN12YnkAAAU4AAAALwABAAAEAAAAAFwEAAAAAAAD8wABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAAEGWKhV8PPPUACwQAAAAAAN/UcgcAAAAA39RyBwAAAAAD8wPaAAAACAACAAAAAAAAAAEAAAACAH0AAQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wLnAgQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wL//wAA5wL//wAAAAEABAAAAAEAAAAAAAAAjAAAAAEAAAAAA/MD2gB8AAATDxYVHw8/DjUvHiMPDC8PDwaoDAwMCwoKCgkICAgHBgYFBQQEAwICAQEBAQIDAwQFBQsVIyE5UmWI7FM5IR0WDQgFBAMDAgEBAQECAgMEBAUFBgYHCAgICQoKCgsMDAwMDAwNDAwNDBkYGBgXFRUUEhEICAYHCQsLDA0ODg8QEBARERESEQ4ODg4ODg0DwgYHBwgICQkKCgoLCwwLDA0MDQwNDQ4NDQ4NDQ4NDQ0NFSIwK0Rfbo/9XkUrJyMWFA0NDQ4NDQ4NDQ0ODA0NDA0LDAwLCgsKCgkICQgHBwYFBQQDAwIBAQIFBgkLDg8REwoKCwwRDw8NDQsLCggIBgUEAwIBAQECAgQEBQAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAsAAQABAAAAAAACAAcADAABAAAAAAADAAsAEwABAAAAAAAEAAsAHgABAAAAAAAFAAsAKQABAAAAAAAGAAsANAABAAAAAAAKACwAPwABAAAAAAALABIAawADAAEECQAAAAIAfQADAAEECQABABYAfwADAAEECQACAA4AlQADAAEECQADABYAowADAAEECQAEABYAuQADAAEECQAFABYAzwADAAEECQAGABYA5QADAAEECQAKAFgA+wADAAEECQALACQBUyBjdXN0b20taWNvblJlZ3VsYXJjdXN0b20taWNvbmN1c3RvbS1pY29uVmVyc2lvbiAxLjBjdXN0b20taWNvbkZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAYwB1AHMAdABvAG0ALQBpAGMAbwBuAFIAZQBnAHUAbABhAHIAYwB1AHMAdABvAG0ALQBpAGMAbwBuAGMAdQBzAHQAbwBtAC0AaQBjAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAYwB1AHMAdABvAG0ALQBpAGMAbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIBAgEDAAVoZWFydAAAAA==) format('truetype');
font-weight: normal;
font-style: normal;
}
.custom-icon .e-icons.e-star-filled {
font-family: 'custom-icon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.custom-icon .e-icons.e-star-filled:before {
content: "\e702";
}
</style>