Comments (3)
built in responsive abilities would be slick, but in a pinch, you can use bootstrap to show/hide two instances based on device sizing:
<div class="d-none d-sm-none d-md-block">
<star-rating :max-rating="10" :increment="0.1" :rating="vote_average" :star-size="50"></star-rating>
</div>
<div class="d-md-none">
<star-rating :max-rating="10" :increment="0.1" :rating="vote_average" :star-size="25"></star-rating>
</div>
hope this helps, and thanks for your work and sharing this great component!
from vue-star-rating.
You should be able to change the star size based on the screen size yourself. I will take a look to see if I can do something to make this responsive, however, it's slightly tricky because the size of each star is passed to SVG's width
attribute which doesn't behave like a normal page element, so I would still probably need to allow some way to pass user defined break points and sizes.
from vue-star-rating.
When is the expected release date for this feature?
from vue-star-rating.
Related Issues (20)
- How can i set 0 (Zero) by clicking on left star?
- hover event for vue-star-rating HOT 2
- Fix Expected Number with value, got String error HOT 3
- ner
- latest version not working in nuxt as "^1.6.1" this version does work HOT 8
- IE11 Error: Error in render: "TypeError: Object doesn't support property or method 'fill'" HOT 2
- The prop round-start-rating is incorrectly named HOT 1
- Type error when setting max-rating dynamically depending on hover.
- Warning: Attribute :read-only is not serializable as XML 1.0. HOT 1
- Unexpected token: name (AlphaColor) HOT 3
- stars not clicking HOT 7
- Starts not working
- How to use vue-star-rating in Nuxt [question]
- vite + typescript problem build producction
- Not working in Vue3 at all HOT 10
- Installation error HOT 1
- 'sr-only' class extend the width of web page
- Nova 4 Support
- TypeError: Cannot read properties of null (reading 'isCE') HOT 1
- Stars are not showing up Vue3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-star-rating.