/rating-element

A rating web component a la python range created with polymer

Primary LanguageHTMLMIT LicenseMIT

<rating-element>

A rating web component using polymer a la python range.

Rating element can use symbols provided by an external source, like:

  • Font Awesome by Dave Gandy - http://fontawesome.io. Check fontawesome for a list of available symbols.

  • Typicons by Stephen Hutchings - http://typicons.com/. Check typicons for a list of available symbols.

  • If you are already using Bootstrap, then you have a set of glyphicons at your disposal.

  • Or you can even generate and customize your own set of symbols with fontello.

Demo

See rating-element in action.

Install

Install the component using Bower:

$ bower install rating-element --save

Or download as ZIP.

Usage

  1. Import Web Components' polyfill:

    <script src="bower_components/platform/platform.js"></script>

  2. Import Rating Element:

    <link rel="import" href="bower_components/rating-element/rating-element.html">

  3. Start using it!

    <rating-element></rating-element>

Attributes

Attribute Options Default Description
start number 0 The start attribute sets the starting value.
stop number 5 The stop attribute sets the stop value. The stop value is not included.
step number 1 The step attribute specifies the increment or decrement.
readonly bool false The readonly attribute indicates that the user cannot modify the value of the control.
value number undefined The value attribute holds the current value in the control.
symbols string undefined The symbols attribute specifies the href of the css with the set of symbols (a.k.a. glyphs) for empty and filled states.
empty string symbol symbol-empty The empty attribute indicates the classes to be applied to the rating symbols when empty.
filled string symbol symbol-filled The filled attribute indicates the classes to be applied to the rating symbols when filled.

Events

Event Description
change Fired when a change to the rating value is committed by the user. It is not fired if the value is changed using the value attribute.

See the documentation for more info.

Development

In order to run it locally you'll need to fetch some dependencies and a basic server setup.

  • Install Bower & Grunt:

    $ [sudo] npm install -g bower grunt-cli

  • Install local dependencies:

    $ bower install && npm install

  • To test your project, start the development server. It should open the component page on your default browser. If it si not the case, open http://localhost:8000.

    $ grunt serve

  • To provide a live demo, deploy everything to gh-pages branch.

    $ grunt deploy

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

History

For detailed changelog, check Releases.

License

MIT License