Jump to content
View in the app

A better way to browse. Learn more.

Invision Community

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

ips.ui.rating

Description

The Rating widget takes a group of radio controls with numerical values, and replaces them with clickable stars so that users can indicate a rating value.

 

Example

@todo

 

Usage

To use the rating widget, your HTML should contain the following structure:

<span data-ipsRating>
	<input type="radio" name="ratingValue" id="ratingValue_1" value="1"> <label for="ratingValue_1">1</label>
	<input type="radio" name="ratingValue" id="ratingValue_2" value="2"> <label for="ratingValue_2">2</label>			
	<input type="radio" name="ratingValue" id="ratingValue_3" value="3"> <label for="ratingValue_3">3</label>			
	<input type="radio" name="ratingValue" id="ratingValue_4" value="4"> <label for="ratingValue_4">4</label>			
	<input type="radio" name="ratingValue" id="ratingValue_5" value="5"> <label for="ratingValue_5">5</label>
</span>

The field name attributes, IDs and labels are not fixed; they can be anything. The radio values, however, should be numeric and in ascending order.

Any number of stars is supported - simply include the correct number of radio controls with the relevant values.

 

Options

url
(String; optional)

If a URL is provided, it will be called via AJAX when the user clicks a star to choose a rating. The rating parameter will contain the selected value.

 

changeRate
(Boolean; optional; default true)

Specifies whether the user can choose a new rating, if they have already rated the item.

 

canRate
(Boolean; optional; default true)

Determines whether the user can select a rating in the widget.

 

size
(Boolean; optional)

If specified, applies an additional ipsRating_ size class to the rating stars to control their size. Supported values: small, large, veryLarge.

 

Events emitted by ips.ui.rating

Events are emitted on the rating wrapper.

ratingSaved

Triggered when the user selects a rating. If the url option is used, this will be triggered after the URL is successfully pinged. It will not be triggered if the URL fails.

Event data:

  • value
    Numeric value of the chosen rating

 

ratingFailed

Triggered when the url option is used and pinging the provided URL fails.

Event data:

  • value
    Numeric value of the chosen rating

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.