PtahUi.Components.Rating (PtahUI v0.1.0)

Copy Markdown View Source

Rating component for collecting or displaying star/heart ratings.

Supports interactive LiveView ratings, read-only display, and half-star values. State is managed server-side: pass value from assigns and on_change event name.

Example

<.rating value={@rating} on_change="set-rating" />
<.rating value={3} shape="star2" color="bg-orange-400" size="lg" />
<.rating value={4} readonly />
<.rating value={@score} shape="heart" colors={["bg-red-400","bg-orange-400","bg-yellow-400","bg-lime-400","bg-green-400"]} />

Summary

Functions

rating(assigns)

Functions

rating(assigns)

Attributes

  • value (:any) - Current rating (0..max). Use floats like 1.5 when half: true. Defaults to 0.
  • max (:integer) - Defaults to 5.
  • shape (:string) - Defaults to "star".
  • size (:string) - Defaults to "md".
  • color (:string) - Tailwind bg-* class for filled items (all same color). Defaults to "bg-orange-400".
  • colors (:list) - Per-position color list, overrides color. Length should match max. Defaults to nil.
  • readonly (:boolean) - Defaults to false.
  • allow_clear (:boolean) - Clicking the currently selected star sends rating=0 (clears). Defaults to false.
  • half (:boolean) - Enable half-step ratings (0.5 increments). Handler receives float strings. Defaults to false.
  • on_change (:any) - phx-click event name. Receives %{"rating" => "3"} (or "1.5" for half). Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.