https://github.com/dmitry-kurmanov/waxwing-rating

🐦⭐ rating widget for the web (based on Svelte)
https://github.com/dmitry-kurmanov/waxwing-rating

css html javascript rating svelte web

Last synced: 3 months ago
JSON representation

🐦⭐ rating widget for the web (based on Svelte)

• Host: GitHub
• URL: https://github.com/dmitry-kurmanov/waxwing-rating
• Owner: dmitry-kurmanov
• License: mit
• Created: 2019-03-23T09:50:01.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-02-02T09:39:44.000Z (almost 2 years ago)
• Last Synced: 2024-07-28T22:41:37.909Z (3 months ago)
• Topics: css, html, javascript, rating, svelte, web
• Language: HTML
• Homepage: https://plnkr.co/edit/hjh2SEQSs7kLC6Wxu8c6?p=preview
• Size: 103 KB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![image](https://user-images.githubusercontent.com/22315929/216287909-3b4047e7-6ebc-45d2-ac1c-788fa9a771cd.png)

## advantages

* framework agnostic

* [4kb(min, gzip)](https://bundlephobia.com/result?p=waxwing-rating) 

* accessibility

* keyboard usage

* dynamic properties

* customizable css 

## demos/examples

* [Plunker](https://plnkr.co/edit/hjh2SEQSs7kLC6Wxu8c6?p=preview)  

* [Codesandbox](https://codesandbox.io/s/mj1rw2opwj)  

* [Github](https://github.com/dmitrykurmanov/waxwing-rating/blob/master/example/index.html)  

## installation (npm): 

`npm install waxwing-rating`

```js

import WW_Rating from "waxwing-rating";

import "waxwing-rating/dist/waxwing-rating.css";

```

 

## installation (es5 style / script):  

 

```html

```

## usage

```html



```


```js

const rating = new WW_Rating({

  target: document.querySelector("#container"),

  props: {

    title: "Rate your health",

    name: "health",

    icon: "star",

    value: 3,

    items: [

      {

        value: 1,

        text: "very bad"

      },

      {

        value: 2,

        text: "bad"

      },

      {

        value: 3,

        text: "normal"

      },

      {

        value: 4,

        text: "good"

      },

      {

        value: 5,

        text: "exelent"

      }

    ]

  }

});

rating.title = "My New Title";

console.log(rating.value);

```

## styles

you could override all styles via the css. For example:

```css

.rating-container .ww-rating--focus {

  border-color: tomato;

}

.rating-container .ww-rating__title--focus {

  color: tomato;

} 

.rating-container .ww-rating__input:checked + .ww-rating__star svg {

  fill: tomato;

}

.rating-container .ww-rating__star:hover svg {

  stroke: gold;

}

```

## how to build

* `git clone https://github.com/dmitrykurmanov/waxwing-rating.git`

* `npm install`

* `npm start`

* `npm test`

# Thanks to

[SvelteJS](https://github.com/sveltejs/svelte)  

[RollupJS](https://github.com/rollup/rollup)  

[AvaJS](https://github.com/avajs/ava)   

and [Vadim Makeev](https://www.youtube.com/watch?v=EbajTYI-gg8)