PetalComponents.Avatar (petal_components v4.11.3)

Copy Markdown View Source

Summary

Functions

avatar(assigns)
avatar_group(assigns)

Functions

avatar(assigns)

Attributes

  • src (:string) - hosted avatar URL. Defaults to nil.
  • alt (:string) - alt text for avatar image. Defaults to nil.
  • size (:string) - Defaults to "md". Must be one of "xs", "sm", "md", "lg", or "xl".
  • class (:any) - CSS class. Defaults to nil.
  • name (:string) - name for placeholder initials. Defaults to nil.
  • random_color (:boolean) - generates a random color for placeholder initials avatar. Defaults to false.
  • random_gradient (:boolean) - generates a gradient background for placeholder initials, hashed from the name like random_color - same name, same gradient. Wins over random_color when both are set. Defaults to false.
  • art (:string) - generative art instead of initials: mesh is a soft multi-hue gradient, dither an ordered-dither blend - both hashed from the name, so the same name always draws the same avatar. Pure art by default; the name still labels the avatar for screen readers, and a photo src wins when present. Defaults to nil. Must be one of nil, "mesh", or "dither".
  • initials (:boolean) - mesh only: overlay the monogram on the art as a dark hue-tinted monogram (the mesh reads light, so it always contrasts). Ignored for dither - a discrete pixel pattern never lets text sit cleanly, so dither stays pure art. Defaults to false.
  • shape (:string) - circle is the convention for people; rounded (proportional soft corners) suits orgs, teams and workspaces. Deliberately independent of the --pc-radius dial - avatars are identity, not surface, and a sharp-cornered theme still wants soft avatars. Defaults to "circle". Must be one of "circle", or "rounded".
  • status (:string) - presence dot on the bottom-right corner, ringed to separate from the image. Defaults to nil. Must be one of nil, "online", "offline", "busy", or "away".
  • Global attributes are accepted.

avatar_group(assigns)

Attributes

  • size (:string) - Defaults to "md". Must be one of "xs", "sm", "md", "lg", or "xl".
  • class (:any) - CSS class. Defaults to nil.
  • avatars (:list) - list of your hosted avatar URLs. Defaults to [].
  • max (:integer) - show at most this many avatars, then a +N overflow bubble for the rest. Defaults to nil.
  • shape (:string) - shape passed through to every avatar and the +N bubble. Defaults to "circle". Must be one of "circle", or "rounded".
  • Global attributes are accepted.