PetalComponents.Rating (petal_components v4.6.2)

Copy Markdown View Source

Ratings, two ways:

  • Display (default) — render a score, with half-star precision.
  • Interactive (interactive + name) — a real radio group, so the value posts in forms, arrow keys work natively, and the hover preview is pure CSS. No JavaScript anywhere.

Three icon sets: star (classic), heart (cumulative, like stars), and face — a five-point sentiment scale where each position is a different expression from awful to great, each with its own colour. Faces highlight only the chosen expression; stars and hearts fill cumulatively.

Summary

Functions

rating(assigns)
rating_star(assigns)

Functions

rating(assigns)

Attributes

  • rating (:any) - The rating to display (integer or float). Defaults to 0.
  • round_to_nearest_half (:boolean) - Whether to round the rating to the nearest half star (eg. 3.3 -> 3.5. Defaults to true.
  • total (:integer) - The total number of icons to display. Defaults to 5.
  • icon (:string) - the icon set. Faces are a five-point sentiment scale (total is ignored). Defaults to "star". Must be one of "star", "heart", or "face".
  • size (:string) - icon size. Defaults to "md". Must be one of "sm", "md", or "lg".
  • interactive (:boolean) - render as a radio group: clickable, keyboard-accessible, posts in forms. Requires name. Defaults to false.
  • precision (:string) - interactive step size. half renders two hit areas per icon so 3.5 is clickable and posts as 3.5 - pure CSS. Faces are an ordinal scale and always use whole. Defaults to "whole". Must be one of "whole", or "half".
  • name (:string) - the input name (required when interactive). Defaults to nil.
  • disabled (:boolean) - disable the interactive radios. Defaults to false.
  • label (:string) - accessible name for the interactive radio group. Defaults to "Rating".
  • class (:any) - Any additional CSS classes for the rating wrapper. Defaults to nil.
  • star_class (:any) - Any additional CSS classes for the individual icons. Eg. you could change the size of the stars with 'h-10 w-10'. Defaults to nil.
  • include_label (:boolean) - Whether to include an automatically generated rating label. Defaults to false.
  • label_class (:any) - Any additional CSS classes for the rating label. Defaults to nil.
  • label_position (:string) - where the generated label sits relative to the icons. Defaults to "right". Must be one of "right", or "bottom".
  • Global attributes are accepted.

Slots

  • glyph - a custom glyph (an svg or icon component) used for every position instead of the built-in sets. Design it to inherit currentColor/fill; recolour the active state with the --pc-rating-active-color CSS variable.

rating_star(assigns)

Attributes

  • class (:any) - Any additional CSS classes for the star. Defaults to nil.
  • type (:atom) - The type of star to display. Defaults to :empty.