PhoenixPaper.Rating (PhoenixPaper v0.1.0)

Copy Markdown View Source

A Material Design star rating (pp_rating/1). Interactive by default (a row of radio inputs with a pure-CSS hover/checked fill effect, no JS); pass readonly to render a fixed display of value filled stars instead.

The fill effect (hovering/checking star N highlights stars 1..N) relies on the classic flat-sibling radio+label CSS trick — each <input> and its <label> must be direct siblings of every other star's, not nested inside a wrapping element per star, or the ~ sibling selectors can't reach across stars. Because of that, paperize={false} here loses the flex-row-reverse layout too, not just colors — the caller takes over layout entirely, same as any other component's contract, but it's worth calling out since a plain <div> won't reproduce the fill effect on its own without that layout.

Summary

Functions

pp_rating(assigns)

Attributes

  • id (:any) - Defaults to nil.
  • name (:any) - Defaults to nil.
  • value (:integer) - Defaults to 0.
  • max (:integer) - Defaults to 5.
  • field (Phoenix.HTML.FormField) - Defaults to nil.
  • readonly (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • paperize (:boolean) - Defaults to true.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["form"].