Have ideas to improve npm?Join in the discussion! »

    @manufosela/stars-rating

    3.3.6 • Public • Published

    stars-rating Published on webcomponents.org

    Lit-Elementy web component configurable to vote a rate stars.

    Demo

    stars-rating codepen demo

    <h2>Basic stars-rating Demo</h2>
    <h3>Demo 1</h3>
    <stars-rating numstars="8" rating="6"></stars-rating>
    
    <h3>Demo 2 - stars size 0.5em</h3>
    <stars-rating numstars="12" rating="8" star-size="0.5em"></stars-rating>
    
    <h3>Demo 3 - Customized</h3>
    <style>
      #emoji {
        --start-unicode: '❤️';
        --star-size: 0.5em;
      }
    </style>
    <stars-rating id="emoji" numstars="8" rating="6"></stars-rating>
    
    <h3>Demo 4 - Click in star to vote a rating</h3>
    <p>Your rating: <span id="yourRating"></span></p>
    <stars-rating id="demo6" numstars="5" manual></stars-rating>
    <script>
      var el = document.querySelector("#demo6");
      el.addEventListener('rating-changed', function(ev) {
        document.querySelector("#yourRating").innerText = ev.detail;
      })
    </script>
    
    <h3>Demo 5 - Click in star to vote a rating with by default value</h3>
    <stars-rating numstars="5" rating="3" manual></stars-rating>
    
    <stars-rating num-stars="8" rating="6"></stars-rating>
     
    <stars-rating num-stars="12" rating="8" star-size="0.5em"></stars-rating>
     
    <p>Click in star to vote a rating</p>
    <stars-rating num-stars="5" mode="manual"></stars-rating>
     
    <p>Click in star to change the rating</p>
    <stars-rating num-stars="5" rating="3" mode="manual"></stars-rating>

    Install the Polymer-CLI

    First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install to install your element's dependencies, then run polymer serve to serve your element locally.

    Viewing Your Element

    $ polymer serve
    

    Running Tests

    $ polymer test
    

    Build

    $ npm run build
    

    Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.

    Author

    License

    This project is licensed under the Apache 2.0 License - see the LICENSE file for details

    Acknowledgments

    • Cesar Villar @beatbits Thank you for his comments and that he is always there to help
    • Jorge del Casar @jorgecasar Thank you for emojis and improvements. You are a true ninja! ;)

    Install

    npm i @manufosela/stars-rating

    DownloadsWeekly Downloads

    3

    Version

    3.3.6

    License

    MIT

    Unpacked Size

    12.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar