atomic-result-rating

This is for:

Developer
Warning

Atomic v2 is an older major version. For new implementations, use Atomic v3.
Note

This component was introduced in version 1.0.4.

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.