vue-stars

Flexible input control for stars and things

vue-stars is a Vue component for display or input of "ratings" (such as stars). It supports `v-model` binding, is very customizable, and is available under the MIT license.

For detailed documentation, please see the Github repository. This contains some examples illustrating the flexibility of this control, you can change the examples live to see the results.

Demos!

These are the default values.

Live Demo:

<vue-stars name="demo" :active-color="#ffdd00" :inactive-color="#999999" :shadow-color="#ffff00" :hover-color="#dddd00" :max="5" :value="3" :readonly="false" :char="★" :inactive-char="" :class="" />

Slot Demo

vue-stars supports optional named slots ("activeLabel" and "inactiveLabel") so you can plug in your own content for what shows for active and inactive content, such as raster or SVG images, etc. Since these slots are repeated for each value, the slot-scope attribute is required, not just the slot name.

To ensure a good user experience, you should take care that the slot content has a consistent width and height. If your slot content is text, it will still have the active, inactive, shadow, and hover colors applied unless you override them via CSS.

<vue-stars name="slotDemo" :max="10" :value="3"/> <img slot="activeLabel" src="./assets/logo.png"> <span slot="inactiveLabel">🙁</span> </vue-stars>

Contact

For more information, please feel free to reach out to me using Github issues, or via the contact methods on my home page.