Third-party plugins

Rating

The Ratings Component uses stars or symbols to visually represent user evaluations, providing a quick and intuitive way to display feedback and quality.

Getting started

Setup

Below are the comprehensively outlined steps you can follow to seamlessly integrate <a href="https://github.com/wbotelhos/raty" target="_blank" class="link link-primary font-semibold">Raty JS</a> with Semji.

<head>
  <link rel="stylesheet" href="../path/to/raty-js/src/raty.css" />
</head>
<body>
  <script src="../path/to/raty-js/build/raty.js"></script>
</body>

JavaScript

const target = new Raty(document.querySelector('[data-raty]'), // or #Id
  {
    path: 'path/to/star-images/',
  });
target.init();

Basic usage

With images

The following example demonstrates the usage of a star-based rating system with the raty-js library using images, initialized with the below provided JavaScript code. Set the `path` to the location where the images are stored in your project, or to the node modules if they are stored there.

With fonts

The following example demonstrates the usage of a star-based rating system with the raty-js library using fonts, initialized with the below provided JavaScript code. Set the `path` to the location where the fonts are stored in your project, or to the node modules if they are stored there.

Illustrations

Read only (static)

The following example demonstrates the usage of a star-based read only (static) rating system, initialized with the below provided JavaScript code.

Custom icons

The following example demonstrates the usage of a rating with the custom heart icons, initialized with the below provided JavaScript code.

With half stars

The following example demonstrates the usage of a rating with half stars, initialized with the below provided JavaScript code.

Custom sizes

Utilize `size-{number}` with `starOff` & `starOn` options for rating with custom sizes.

Custom colors

Utilize `text-{color}` with `starOff` & `starOn` options for rating with custom colors.

With hints

The following example demonstrates the usage of a rating with hints, initialized with the below provided JavaScript code.

Custom number of stars

The following example demonstrates the usage of a rating with custom number of stars , initialized with the below provided JavaScript code.

With score

The following example demonstrates the usage of a rating with score(value) , initialized with the below provided JavaScript code.

With reset option

The following example demonstrates the usage of a rating with reset option, initialized with the below provided JavaScript code.

With animation

The following example demonstrates the usage of a rating with animation, initialized with the below provided JavaScript code.