atomic-result-rating

This is for:

Developer

See Display results to learn more about customizing your result templates.

The atomic-result-rating element renders a star rating.

Properties

Property Attribute Description Type Default

field (required)

field

The field whose values you want to display as a rating.

string

icon

icon

The SVG icon to use to display the rating.

  • Use a value that starts with http://, https://, ./, or ../, to fetch and display an icon from a given location.

  • Use a value that starts with assets://, to display an icon from the Atomic package.

  • Use a stringified SVG to display it directly.

When using a custom icon, at least part of your icon should have the color set to fill="currentColor". This part of the SVG will take on the colors set in the following variables:

  • --atomic-rating-icon-active-color

  • --atomic-rating-icon-inactive-color

string

Star

maxValueInIndex

max-value-in-index

The maximum value of the field. This value is also used as the number of icons to be displayed.

number

5

Shadow Parts

Part Description

value-rating

The wrapper that contains the row of inactive stars and the row of active stars.

CSS Custom Content

Name Description

--atomic-rating-icon-active-color

Color of the icon when active.

--atomic-rating-icon-inactive-color

Color of the icon when inactive.

--atomic-rating-icon-outline

Color of the icon’s outline.