Skip to content

emrekara37/svelte-rate-it

Repository files navigation

Svelte Rate It

Rate component for Svelte. Based on vue-rate. Thanks @SinanMtl

Demo

Installation and usage

Install rate component for your project

npm install svelte-rate-it --save

or with yarn

yarn add svelte-rate-it

Import Svelte Rate into your app

import Rate from "svelte-rate-it/Rate.svelte";

Use HTML template

<Rate length={5} />

Options from props

  • length {number}: Star size
<Rate length={5} />
  • value {number}: Default value
<Rate length={5} value={2} />
  • showCount {boolean}: Shows rate number when mouseover the star.
<Rate length={5} showCount={true} />
  • ratedesc {object}: Rate star description array.
<Rate
  length={5}
  ratedesc={['Very bad', 'bad', 'Normal', 'Good', 'Very good']} />
  • disabled {boolean}: Disable rate.
<Rate length={5} value={2} disabled={true} />
  • readonly {boolean}: Read-only rate.
<rate length={5} value={2} readonly={true} />

Events

const beforeRate = rate => {
    console.log(rate);
  };
  const afterRate = rate => {
    console.log(rate);
  };
})
<Rate
  {beforeRate}
  {afterRate}
  length={5}
  ratedesc={['Very bad', 'bad', 'Normal', 'Good', 'Very good']}
  showCount={true} />