JSFiddle - React, Tailwind, and code Playground

by Craig Humphreys

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/cdn/font-awesome-rating.min.js"></script>
<div id="app">
  <h1>Default</h1>
  <fa-rating :glyph="thumbsUp"></fa-rating>

  <h1>Half Rating</h1>
  <fa-rating :glyph="thumbsUp" :increment="0.5"></fa-rating>

  <h1>Fluid Rating</h1>
  <fa-rating :glyph="thumbsUp" :increment="0.01" :fixed-points="2"></fa-rating>

  <h1>Pink Glyphs</h1>
  <fa-rating :glyph="thumbsUp" inactive-color="#e1bad9" active-color="#cc1166"></fa-rating>

  <h1>Small Glyphs</h1>
  <fa-rating :glyph="thumbsUp" :item-size="20"></fa-rating>

  <h1>Big Glyphs</h1>
  <fa-rating :glyph="thumbsUp" :item-size="80"></fa-rating>

  <h1>Lots of Glyphs</h1>
  <fa-rating :glyph="thumbsUp" :item-size="20" :spacing="3" :max-rating="10"></fa-rating>

  <h1 style="direction:rtl;">RTL Glyphs</h1>
  <fa-rating :glyph="thumbsUp" :increment="0.5" :rtl="true"></fa-rating>
  
  <h1>Preset Rating</h1>
  <fa-rating :glyph="thumbsUp" :rating="3"></fa-rating>

  <h1>Read-only Rating</h1>
  <fa-rating :glyph="thumbsUp" :read-only="true" :rating="4.3" :increment="0.01"></fa-rating>

  <h1>Hide Rating</h1>
  <fa-rating :glyph="thumbsUp" :show-rating="false"></fa-rating>

  <h1>Resettable / Synced</h1>
  <div>
    <fa-rating :glyph="thumbsUp" v-model="rating"></fa-rating>

    <p><strong>Your current rating: {{rating}}</strong> - <a href="#" @click.prevent="rating = 0">Reset</a></p>
  </div>

  <h1>Mouse Over Rating</h1>
  <div @mouseout="mouseOver = null">
    <fa-rating :glyph="thumbsUp" @current-rating="mouseOver = $event"></fa-rating>

    <p><strong>Mouse Over: {{mouseOver}}</strong></p>
  </div>

  <h1>Inline Rating</h1>
    Rated <fa-rating :glyph="thumbsUp" :inline="true" :item-size="20" :rating="5" :show-rating="false" :read-only="true"></fa-rating> by our customers. 
</div>

CSS

body {
  font-family: arial;
  background: #fff;
}

h1 {
  font-size: 1.5em;
}

JavaScript

new Vue({
  el: "#app",
  created(){
    // This works with CDN ONLY, check docs for how to import
    // glyphs when using import or require statements
  	this.thumbsUp = VueRateIt.Glyphs['thumbs-up']
  },
  data: {
    rating: 3,
    mouseOver: null,
    thumbsUp: ''
  }
})