https://github.com/link2twenty/l2t-paper-rating

Polymer element to display "star" ratings in a paper style
https://github.com/link2twenty/l2t-paper-rating

rating star-rating web-components

Last synced: 11 months ago
JSON representation

Polymer element to display "star" ratings in a paper style

• Host: GitHub
• URL: https://github.com/link2twenty/l2t-paper-rating
• Owner: Link2Twenty
• Created: 2017-05-19T22:19:22.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2018-05-25T15:42:41.000Z (about 8 years ago)
• Last Synced: 2025-06-21T01:11:24.376Z (12 months ago)
• Topics: rating, star-rating, web-components
• Language: HTML
• Homepage: https://www.webcomponents.org/element/Link2Twenty/l2t-paper-rating
• Size: 37.1 KB
• Stars: 7
• Watchers: 1
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Link2Twenty/l2t-paper-rating)

[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-blue.svg)](https://vaadin.com/directory/component/Link2Twentyl2t-paper-rating)

[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/Link2Twentyl2t-paper-rating.svg)](https://vaadin.com/directory/component/Link2Twentyl2t-paper-rating)

# \

A polymer element to display "star" ratings in a paper style

## Install with bower

First you need bower, [see their site](http://bower.io/) for details

```

bower install --save l2t-paper-rating

```

## Examples

```html

   


   


  

```

## A11y/ARIA

For screen readers it's helpful to have a label though the traditional label element will not work with custom elements so we'll need to change the [aria-label](https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html) or [aria-labelledby](https://www.w3.org/TR/WCAG20-TECHS/ARIA7.html) properties directly.

There are examples of both methods on the [demo page](https://www.webcomponents.org/element/Link2Twenty/l2t-paper-rating/demo/demo/index.html).

## Styling

The following custom properties are available for styling:

| Custom property | Description | Default |

|----------------|-------------|-------------|

| --rating-icon-color | The color of the icons | --primary-text-color |

| --rating-icon-size | The size of the icon (square) | 28px |

| --rating-icon-padding | The size of the padding between icons | 2px |

| --rating-ink-color | The color of the ripple on icon tap | --primary-text-color |

| --rating-unselected-opacity | The opacity of stars 'non-active' | 0.4 |

## Properties

### Public

| Attribute Name | Functionality | Type | Default |

|----------------|-------------|-------------|-------------|

| icon | the icon to use (iron-icons) | String | star |

| rating | numbers of star selected (reflectToAttribute) | Number | 1 |

| readonly | can the rate be modified | Boolean | false |

| total | maximum number of stars selectable | Number | 5 |