PhoenixDuskmoon.Component.Avatar (PhoenixDuskmoon v7.2.1)

View Source

Avatar component for displaying user images and placeholders.

Examples

<.dm_avatar src="https://example.com/avatar.jpg" alt="User Avatar" />

<.dm_avatar
  src="https://example.com/avatar.jpg"
  alt="User Avatar"
  size="lg"
  border
  online
/>

<.dm_avatar
  name="John Doe"
  size="md"
  color="primary"
  placeholder
/>

<.dm_avatar
  src="https://example.com/avatar.jpg"
  alt="User Avatar"
  placeholder="/path/to/placeholder.jpg"
  size="xl"
  shape="circle"
/>

Attributes

  • src - Image source URL
  • alt - Alt text for the image
  • name - User name for text-based avatar (used when no src)
  • placeholder - Show as placeholder with initials or custom placeholder image
  • size - Avatar size: xs, sm, md, lg, xl (default: md)
  • shape - Avatar shape: circle, square (default: circle)
  • color - Background color for text-based avatars: primary, secondary, accent, info, success, warning, error (default: primary)
  • border - Add border to avatar
  • online - Show online status indicator
  • offline - Show offline status indicator
  • class - Additional CSS classes
  • img_class - Additional CSS classes for image element
  • placeholder_class - Additional CSS classes for placeholder element

Slots

  • :placeholder - Custom placeholder content

Summary

Functions

dm_avatar(assigns)

Attributes

  • src (:string) - Defaults to nil.
  • alt (:string) - Defaults to nil.
  • name (:string) - Defaults to nil.
  • placeholder_img (:any) - Defaults to nil.
  • size (:string) - Defaults to "md". Must be one of "xs", "sm", "md", "lg", or "xl".
  • shape (:string) - Defaults to "circle". Must be one of "circle", or "square".
  • color (:string) - Defaults to "primary". Must be one of "primary", "secondary", "accent", "info", "success", "warning", or "error".
  • border (:boolean) - Defaults to false.
  • online (:boolean) - Defaults to false.
  • offline (:boolean) - Defaults to false.
  • class (:string) - Defaults to nil.
  • img_class (:string) - Defaults to nil.
  • placeholder_class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • placeholder - Custom placeholder content.