Skip to content

heithemmoumni/svelte-stars-rating

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

svelte-stars-rating

A Highly Customizable, easy-to-use elegant stars rating component

MIT License view on npm Svelte v3

Demo

4.6 Star Rating

Edit Vue Template

Usage

Install via NPM npm i svelte-stars-rating

Then require in your project:

var StarRating = require('svelte-stars-rating');

or ES6 syntax:

import StarRating from 'svelte-stars-rating'

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>

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
isIndicatorActive Boolean A property that deteremines weather a rating indicator would show to the right true

Customized Styling

Property Type Description Default
fullStarColor string Set the full or partially-full star color #ffd219
emptyStarColor string Set the empty or partially-empty star color #737373
styleStarWidth number Set the star width 20

Implementation Example

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

const app = new App({
  target: document.body,
  props: {
    name: "svelte-stars-rating",
    rating: 4.7,
    isIndicatorActive: false,
    style: {
      styleStarWidth: 85,
      styleEmptyStarColor: "#737373",
      styleFullStarColor: "#ffd219"
    }
  }
})

or

let style = {
   styleStarWidth: 85,
   styleEmptyStarColor: "#737373",
   styleFullStarColor: "#ffd219"
}
<star-rating rating="4.7" {style}></star-rating>

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


If you like to support my open-source contributions and feeling generous, feel free to:

Buy Me A Coffee