craigh411 / vue-star-rating Goto Github PK
View Code? Open in Web Editor NEW:star: A simple, highly customisable star rating component for Vue 2.x. / 3.x
Home Page: https://jsfiddle.net/craig_h_411/992o7cq5/
License: MIT License
:star: A simple, highly customisable star rating component for Vue 2.x. / 3.x
Home Page: https://jsfiddle.net/craig_h_411/992o7cq5/
License: MIT License
Hello,
I have used your star component it is awesome. However, I am getting UI issue when dark background is used.
I also get white stroke in yellow stars, if size is small. Try changing code for glowing stars in your jsfiddle example to below code.
<h2>Glowing Stars</h2>
<div style="background:#000;padding-bottom:10px;">
<star-rating :star-size="20"></star-rating>
</div>
Result shade of light grey or white:
I am also getting same in my project which is live. You can check how it looks in below image.
However, this might looks tiny issue but if we use dark theme in our app as eveybody loves now a days it brings this issue.
Awesome Component BTW.
Waiting for your response.
~ Regards
Hi and thanks for this great lib !
Would it be possible to add a prop, let's say inactive-show
, which would remove the inactive stars if true ?
I'm asking that because I'm mostly using this lib to display hotel rating, which is a fixed value of stars.
Right now my workaround is inactive-color="white"
if my background is white, but this is kind of hacky !
If you don't have the time for, I'm up for a PR !
Thanks for your time
Could we have validation for when used in a form?
This can be seen on the JSFiddle example linked in the readme for the red stars on non-retina displays:
.
It looks fine on a retina display though.
Tested and reproducible on macOS with most recent chrome, firefox and safari.
I suppose it's a problem with the svgs, but I'm not very familiar with the format or svg rendering.
An example of what I mean is in the "Lots of Stars" example in the JSFiddle.
I'm assuming the top-margin of 7px was to align the number vertically, but since the parent div.vue-star-rating already has align-items: center, it isn't even needed.
PS. Nice little component. Thanks!
I try to text-class="stars' but this cannot take effect why
Is it possible to style the border-color depending on whether it is active or not?
Like inactive-color -> inactive-border-color ?
I am trying to show 5 stars with half increment. All works fine but all I can see only 1 star.
Please help thank you.
I was trying to record a test case on selenium testing and when i try to record star rating selenium does not pick the click
Hello,
I have an issue with the v-model to reset the rating,
When rating is selected, it should run the function Reseting to change the var rating to 0,
If I make a test to run the function from a button, it works but not after rating,
Any idea ?
Thanks!
<template>
<div class="page-wrapper">
<img alt="logo-bento" class="logo" src="@/assets/img/bento-starter.png" />
<star-rating v-model="rating" @rating-selected="reseting" ></star-rating>
<h4> You have voted {{ MyVote }}/5 </h4>
<Catloader ref="foo"></Catloader>
</div>
</template>
<script>
import { mapState } from 'vuex'
import Catloader from '@/components/CatLoader'
import StarRating from 'vue-star-rating'
export default {
components: {
Catloader,
StarRating
},
data() {
return {
rating: 0,
MyVote: 0
}
},
head() {
return {
title: {
inner: 'Home'
},
meta: [
{
name: 'description',
content: `${this.appTitle} home page`,
id: 'desc'
}
]
}
},
computed: mapState('app', ['appTitle']),
methods: {
reseting() {
console.log(this.rating)
this.MyVote = this.rating
this.rating = 0
return this.rating
}
}
}
</script>
It's me or the prop padding is not working, even if you add just 1 for padding the space between is super large.... Did I miss anything?
<star-rating :increment="0.5" :max-rating="5" :star-size="15" :show-rating="false" :read-only="true" border-color="#A1AAB3" border-width="1" inactive-color="#FFF" active-color="#E6B235" v-model="rating" padding="1"> </star-rating>
Hi, is there a way to change the default svg of star to my own svg?
I seem to be having an issue where the rating only works on iOS if you double-tap the star. I suspect this has to do with using mouseevents, but I'm not sure.
The stars appear to be selected (they turn yellow) but the v-model is only updated with a second tap on the same star.
Most of today's real life implementations of rating stars are used for double purpose:
This leads to a big problem:
The average rating obviously will rarely be 3 or 4, but rather a floating point number like 3.71 or 4.29. This needs to be displayed properly. For this to display properly it is currently necessary to set an increment
of 0.01
.
The user that wants to use the stars to give their own rating usually is supposed to choose between giving either 1, 2, 3, 4 or 5 stars. (this explicitly also means you cannot rate lower than 1). This currently requires to set increment
to 1
.
This could be solved by either allowing for a dynamic re-evaluation in case the increment
value changes, or, even better, differentiating between a config parameter which serves for display purposes only, and another for entry purposes.
it seems to me that the glow is always on.
Given the follow set up
<star-rating
v-model="rating"
v-if="rating !== null"
:read-only="true"
:increment="0.1"
active-color="#d6612d"
text-class="rating__text"
:star-size="20"
>
I get the following result:
Explicitly setting :glow="0"
doesn't change the outcome which is to be expected as the default is 0
anyway.
Setting the glow color explicitly shows that it is in fact the glow showing through despite 'glow' being set to o0
Hello!
Thanks for Vue Star Rating!
I need to enumerate the stars by displaying a number inside them (see image).
Would it be possible to implement a boolean property to let me know if I want to show these numbers or not?
Or maybe a property by which I can send an object (with the same number of elements as max-rating) so that I can show in its respective star?
Thank you in advance!
I wonder if there is a way for accessibility for people who are using keyboards only.
Presumably to https://jsfiddle.net/craig_h_411/992o7cq5/
Firefox and Chrome correctly show the default colours, but Safari is just rendering all the stars as black
Thanks for the continued support and improvements for this useful vue component!
I noticed that v1.4.0 introduced a breaking change for our usage of this component: the main
entry in package.json was changed from src/star-rating.vue
to dist/star-rating.min.js
. Our usage of this component is a direct import of the src/star-rating.vue
single file component file, this change broke our build and the component using this component failed to render the <star-rating>
component.
I think this should be considered a breaking change. Along with the CSS class name changes, I think bumping the major version would be more appropriate? i.e. v2.0.0 instead of v1.4.0.
For now I have to change the semver notation of this package from ^1.3.2 to ~1.3.2 to lock it to the 1.3.x version, so that whenever we shrinkwrap again we don't get bumped to v1.4.0.
Cheers.
I'm rendering my pages on server side and I found a problem that only occurs on first page render.
When I'm trying to access a page with StarRating I get the following error:
Vue warn]: Error in beforeCreate hook: "ReferenceError: document is not defined" found in
---> <StarRating>
<Component> at ../src/components/Component.vue
<App> at ../src/App.vue
<Root>
Call stack gives much more info
ReferenceError: document is not defined
at o (../node_modules/vue-star-rating/dist/webpack:/~/vue-style-loader/lib/addStylesClient.js:116:1)
at r (../node_modules/vue-star-rating/dist/webpack:/~/vue-style-loader/lib/addStylesClient.js:100:1)
at t.exports (../node_modules/vue-star-rating/dist/webpack:/~/vue-style-loader/lib/addStylesClient.js:54:1)
at Object.e (../node_modules/vue-star-rating/dist/webpack:/src/star-rating.vue?3ff3:8:1)
at e (../node_modules/vue-star-rating/dist/webpack:/webpack/bootstrap 1d3fc18262fd606c10d8:19:1)
at VueComponent.r (../node_modules/vue-star-rating/dist/webpack:/src/star-rating.vue:2:1)
Due to vue-style-loader page you need to build server side files with target: 'node'
to prevent this from happening.
After a short research I solved this problem by changing import to
import StarRating from 'vue-star-rating/src'
Maybe it's worth adding in README.md
to prevent inexperienced users like me from this error
Hello,
Any idea about how to reset the rating to 0 and empty the gauge ?
I did many tries but nothing really happend correctly
Thanks a lot !
Hi,
Nice component
But I did app for desktop and mobile.
I can not use this component on mobile. It is not responsive
I keep getting the error described in the title when trying to load the component.
// HTML
<div class="container" id="main">
<star-rating></star-rating>
</div>
// Javascript
var StarRating = require('vue-star-rating');
var Vue = require('vue');
Vue.component('star-rating', StarRating);
new Vue({
el: "#main",
data: {
},
methods: {
},
mounted: function() {
window.Laravel.debug && console.log('Survey Vue Mounted!');
}
});
Any plans to add TypeScript support? Or has anyone using this library managed to get this working with TypeScript?
Could I replace the stars with some box with the corresponding number ?
If yes, what is the best way to achieve that? Thanks!
I want to be able to make my stars transparent.
I can do this in Chrome by setting the inactive-color
to a color that has opacity, e.g. #000000, or rgba(0, 0, 0, 0).
This unfortunately doesn't work in Safari, because SVG grandients ignore color opacity in the stop
elements inside the linear-gradient element. To get it to work you need to set an attribute stop-opacity
on the stop
element inside the gradient. To see what I mean, you can open this CodePen in Chrome and Safari and see the difference: https://codepen.io/AmeliaBR/pen/jrBOBv/
So I'd like to add an attribute on this star rating component called inactive-opacity
or something like that, which would then set the opacity for the inactive gradient stops.
If you'd agree that it would be a useful feature for the component, I'll see if I can add it and make a pull request.
Hello
How you add js file in css link tag?
Best regards
Christoph
Hello,
In vuejs 2.6 app I use
"vue-star-rating": "^1.6.1"
and having listing of star-rating elements I need to make some of them disabled for clicking.
I found some hints on the site, like
<star-rating
v-model="nextHostelReview.stars_rating_type_id"
isIndicatorActive="true"
:config="config"
:max-rating="nextHostelReview.stars_rating_type_id"
:min-rating="nextHostelReview.stars_rating_type_id"
:rating="nextHostelReview.stars_rating_type_id"
:star-size="20"
></star-rating>
but I failed.
I need something like :
<star-rating
...
disabled="true"
readonly="true"
></star-rating>
```Are there ?
Thanks!
Hi Craig,
Thanks for Vue Star Rating -- great component!
Is it possible to cancel a rating by clicking the first star? Currently when I click the first star it says on.
Thank you,
Ronnie Serr
How can I display the rating text in a label instead of having it right beside the stars.
I want to get the value of the selected rating and display it in a label. is there a way to achieve this?
Thanks for your great library!
I am really happy to use it.
This is not a problem but just a suggestion.
For reactive data binding, I wrote the following code:
<template>
<star-rating
:rating="rating"
@rating-selected="value => {rating = value}">
</star-rating>
</template>
<script>
new Vue({
data() {
return { rating: 3 }
}
})
</script>
How about to set reactive v-model
attribution?
The code should be like this, simply:
<template>
<star-rating v-model="rating"></star-rating>
</template>
I think we can do it by adding value
prop to star-rating
component and emit input
event with the argument this.selectedRating
.
If you accept this feature, I will try to code.
Thanks!
This is how I set the initial rating.
<star-rating ref="widget"
v-model="rating"
@rating-selected="setRating"
:round-start-rating="false">
</star-rating>
beforeMount: function() {
this.ratingIdentifier = this.getRatingIdentifier();
this.readOnly = undefined !== localStorage[this.ratingIdentifier];
this.maxRating = window.vueData.rating.maxRating;
this.getRating();
},
methods: {
getRating: function() {
// 3.5 is actually from an async callback
this.rating = 3.5;
}
}
Expected behavior:
Actual behavior:
Am I setting the rating at a wrong time?
I'm using version 1.6
I need smaller size of start, is it possible to do that?
The stars are aligned to start from left to right and that made it unfit in a layout where I have all text and images aligned center. Was able to add:
.vue-star-rating{
justify-content: center;
}
to center it but I want to know if there's an option for this or if it could be added. I can work on a PR
Just after import I get this Error:
ERROR in ./~/vue-star-rating/src/star-rating.vue Module parse failed: .../node_modules/vue-star-rating/src/star-rating.vue Unexpected token (1:0) You may need an appropriate loader to handle this file type. | <template> | <div> | <div @mouseleave="resetRating" id="stars">
...imported in a project with a lot of other dependencies, all installed with npm, all included in package.json (using webpack and Vue 2.1.8 )
Can't see any error, do you have a hint?
As of now, even with a stepping of 1, it is possible to give a 0-stars rating. Most existing implementations require that the user can vote only between 1 and 5 stars.
It should be possible to configure a minimum rating value. Of course this can be done using the rating-selected
event handler (like not applying the vote if the value is less than 1 or whatever the user wants as a minimum), but since this will be a standard requirement this should probably be implemented as a config option min-rating
.
Nice plugin but Is there a way to remove the rating?
Example : I rate 5 but finally I want to delete my rating, I should be able to do it by clicking on the left of the 1st star
hi boy
i want add global config so add this
Vue.component('star-rating', StarRating);
Vue.use('star-rating',StarRating, {
'rounded-corners':true,
'borderColor':'red'
});
or
import StarRating from 'vue-star-rating'
Vue.component('star-rating', StarRating, {
'rounded-corners':true,
'borderColor':'red'
});
but don't work how add config global?
Tnx for help ...
For example i need showCurrentRating(rating, meeting)
where meeting is another object
Reference -https://jsfiddle.net/jdzbyzke/
Thanks for a very useful component! I am making use of this project to provide star ratings on a project and we're aiming for a great experience for screen reader users. Currently, when a screen reader hits the star ratings it just skips it.
My quick solution on my app was to do this:
<div class="ratings">
<span class="sr-only">This clinic is rated {{ rating }} stars out of five.</span>
<star-rating v-model="rating"
:show-rating="false"
active-color="#d6612d"
:star-size="20"
></star-rating>
</div>
By adding that span, the screen reader gets a solid sensible experience, perhaps it would be a good idea to have something like it by default that is visually hidden but translates the component contents to something that verbally makes sense?
event is not fired when mouse leaves component, however I see from dev-tools that the current rating is reset to 0 ..
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.