Rating


Keywords
css, vcl, component, rating
License
MIT
Install
npm install @vcl/rating@0.4.0-beta.3

Documentation

VCL rating

Rating.

Features

Can visualize the current average rating and take ratings as input by click on a discrete rating item. The rating items are vclIcons with proper ARIA attributes. As an input control, it supports a read read-only mode.

Usage

Basic.

basic example

Highlighted items to visualize the covered range of a rating when hovered with a pointer. In this example, the third item is hovered.

highlight example

Disabled (read-only).

disabled example

Classes

  • vclRating
  • vclRatingItem

Modifiers

  • vclDisabled
  • vclRatingItemHighlighted: For rating items to visualize the range of a rating affordance on hover.

Variables

  • --rating-item-color
  • --rating-item-disabled-color
  • --rating-item-highlighted-color

Demo

example.html on GH-pages.