Ember-cli-icon-rating NPM

ember-cli-icon-rating

Rating Input that can use any Font Awesome Icon and defaults to using the star icon

Installation

ember install ember-cli-icon-rating

Usage

Note: Uses DDAU so no updates are done without an onClick handler

Simplest Case

{{icon-rating
  value=value
  onClick=(action (mut value))
}}

Full Example (Defaults)

{{icon-rating
  min=1
  max=5
  step=1
  value=0
  width=0
  size='lg'
  readOnly=false
  baseIcon='star'
  fillIcon='star'
  baseColor='grey'
  fillColor='gold'
  disableHover=false
  showRatingAbove=false
  showRatingBelow=false
  icon=null // No Defaults for icon
  color=null // No Defaults for color
  onClick=null // No Defaults for onClick
}}

Component Options Available

min - Minumum icon value
max - Maximum icon value
readOnly - handlers will not run
value - Number of icons selected
width - Set width of individual icon container
step - How much each consecutive icon value is
showRatingAbove - Show Rating value above icon
showRatingBelow - Show Rating rating below icon
disableHover - Only update icon / color on click
size - size of icon, i.e. lg, 2 - 5 (see Font Awesome docs)
baseIcon - Font awesome icon to be used for the initial state
fillIcon - Font awesome icon to be used on hover and after selection
icon - Font Awesome icon to use for rating (overrides baseIcon / fillIcon)
color - any rgb, hex, string color to be used (overrides baseColor / fillColor)
baseColor - any rgb, hex, string color to be used as the initial color before selection
fillColor - any rgb, hex, string color to be used as the hover color and after selection
onClick - handler that runs when icon is clicked. Note: value does not change automatically