@rei/cdr-rating v1.0.2

CdrRating

For the most up-to-date information, see REI Cedar documentation.

Props

Installation

Resources are available within the CdrRating package:

• Component: @rei/cdr-rating
• Component styles: cdr-rating.css

To incorporate the required assets for a component, use the following steps:

1. Install using NPM

Install the CdrRating package using npm in your terminal:

Terminal

npm i @rei/cdr-rating

2. Import dependencies

main.js

// import your required CSS.
import "@rei/cdr-rating/dist/cdr-rating.css";

3. Add component to a template

local.vue

<template>
  ...
     <cdr-rating rating="4.2" count="77" />
  ...
</template>

<script>
import { CdrRating } from '@rei/cdr-rating;
export default {
  ...
  components: {
     CdrRating  
  }
}
</script>

Usage

By default the CdrRating component renders the icons in medium size (24px) with the total number of reviews.

Rating Values

• The count for reviews will always be visible
• Ratings are rounded to the nearest .25 because icons are represented in 25% increments
• Screen reader text is provided which reads, “Rated rounded out of 5 with count reviews”