wc-star-rating
WebComponent <star-rating>
Star Rating (native) WebComponent
Webcomponent (native) for displaying star ratings without Polymer or other dependecies.
Demo/Playground
Demo and Playground Page here ...
Installation
Install with NPM for your local development environment.
npm i webcomponent-star-rating
OR: Paste the import link in your "head" section.
<link rel="import" href="https://davitmdesign.github.io/wc-star-rating/star-rating.html">
Usage
To display the stars, you must place the element to your "body section".
<star-rating width="280" score="50%" colors="#ddd,#f1cb1"></star-rating>
That's it.
Possible attributes
width="400" | score="50%" | colors="#aaa,#333"
Example:
<star-rating width="160" score="2.5"></star-rating>
<star-rating width="220" score="4" colors="grey,red"></star-rating>
<star-rating width="300" score="50%" colors="#BDBDBD,#B8860B"></star-rating>
attributes | values | |
---|---|---|
width | 200 | required |
score | 50%, 3, 4.5 | required |
colors | name or hex (grey,#ffff00) | optional |
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- Released
- 2018-11-30
- Maturity
- IMPORTED
- License
- ISC License
Compatibility
- Framework
- Browser
- Browser Independent
wc-star-rating - Vaadin Add-on Directory
WebComponent[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/webcomponent-star-rating)
# Star Rating (native) WebComponent
Webcomponent (native) for displaying star ratings without Polymer or other dependecies.
## Demo/Playground
[Demo and Playground Page here ...](https://davitmdesign.github.io/wc-star-rating/index.html)
## Installation
Install with NPM for your local development environment.
```
npm i webcomponent-star-rating
```
OR: Paste the import link in your "head" section.
```html
```
## Usage
To display the stars, you must place the element to your "body section".
```html
```
That's it.
## Possible attributes
width="400" | score="50%" | colors="#aaa,#333"
Example:
```html
```
| attributes | values | |
| ----------------- |-----------------------------------|----------------|
| width | 200 | required |
| score | 50%, 3, 4.5 | required |
| colors | name or hex (grey,#ffff00) | optional |
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D