PhoenixDuskmoon.Component.Avatar (PhoenixDuskmoon v7.2.1)
View SourceAvatar 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 URLalt- Alt text for the imagename- User name for text-based avatar (used when no src)placeholder- Show as placeholder with initials or custom placeholder imagesize- 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 avataronline- Show online status indicatoroffline- Show offline status indicatorclass- Additional CSS classesimg_class- Additional CSS classes for image elementplaceholder_class- Additional CSS classes for placeholder element
Slots
:placeholder- Custom placeholder content
Summary
Functions
Attributes
src(:string) - Defaults tonil.alt(:string) - Defaults tonil.name(:string) - Defaults tonil.placeholder_img(:any) - Defaults tonil.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 tofalse.online(:boolean) - Defaults tofalse.offline(:boolean) - Defaults tofalse.class(:string) - Defaults tonil.img_class(:string) - Defaults tonil.placeholder_class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
placeholder- Custom placeholder content.