Giter VIP home page Giter VIP logo

vue-stars-rating's Introduction

vue-dynamic-star-rating

A Highly Customizable, easy-to-use elegant stars rating component (similar to Google Play)

Feedback would be much appreciated, questions, suggestions, issues are more than welcome.

Demo

alt text

Edit Vue Template

Usage

Install via NPM npm i vue-dynamic-star-rating

Then require in your project:

var StarRating = require('vue-dynamic-star-rating');

or ES6 syntax:

import StarRating from 'vue-dynamic-star-rating'

Then you can register the component globally:

Vue.component('star-rating', StarRating);

Or in your Vue component:

components: {
  StarRating
}

You can then use the following selector anywhere in your project:

  • To get up and running quick the package now supports rendering just the selector with default values
<star-rating></star-rating>

Docs

config: {...} is a configuration object that is to be binded to vue-star-rating, api properties are:

Basics

Property Type Description Default
rating number A number between 0.0-5.0 that will determine the fullness of the 5-stars rating polygons 1

Customized Styling

Property Type Description Default
fullStarColor string Set the full or partially-full star color #ed8a19
emptyStarColor string Set the empty or partially-empty star color #737373
starWidth number Set the star width 20
starHeight number Set the star height 20

Implementation Example

Define your config options object in the component importing StarRating e.g

data: function() {
    return {
        config: {
            rating: 4.7,
            style: {
                fullStarColor: '#ed8a19',
                emptyStarColor: '#737373',
                starWidth: 30,
                starHeight: 30
            }
        }
    }
}

And bind it to the selector like so

<star-rating :config="config"></star-rating>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.