← Back

wc-star-rating

WebComponent <star-rating>

Author

Rating

Popularity

<100

Star Rating (native) WebComponent

Name: wc-star-rating
Availability: InStock
Author: davitmdesign

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

Compatibility

(Loading compatibility data...)

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

View on NPM
View on GitHub

wc-star-rating version 1.0.0
### Dependencies

wc-star-rating version 1.0.1
### Dependencies

wc-star-rating version 1.0.2
### Dependencies

wc-star-rating version 1.0.3
### Dependencies

wc-star-rating version 1.0.4
### Dependencies

wc-star-rating version 1.0.5
### Dependencies

wc-star-rating version 2.0.0
### Dependencies

wc-star-rating version 2.0.1
### Dependencies

wc-star-rating version 2.0.2
### Dependencies

wc-star-rating version 2.0.3
### Dependencies

wc-star-rating version 2.0.4
### Dependencies