Elemental.DataDisplay.Avatar (elemental v0.3.2)

A simple avatar component with some quality of life around errors in loading images.

Provides two components avatar/1 and avatar_group/1.

Usage 

<.avatar src="https://some.url/to/image" />

An avatar of just text can be done via placeholder with no source

<.avatar placeholder="AB" class="bg-neutral text-neutral-content" />

If the image fails to load and a placeholder is given the place holder is shown, however if the image loads the placeholder is hidden completely

<.avatar src="https://some.url/to/image" placeholder="AB" class="bg-neutral text-neutral-content" />

Avatars can be grouped via the avatar_group/1 component

<.avatar_group>
  <.avatar src="https://some.url/to/image" />
  <.avatar src="https://some.url/to/image" placeholder="AB" class="bg-neutral text-neutral-content" />
  <.avatar placeholder="AB" class="bg-neutral text-neutral-content" />
</.avatar_group>

Summary

Functions

avatar(assigns)

Primary avatar component.

avatar_group(assigns)

Group together a bunch of avatars.

Functions

avatar(assigns)

Primary avatar component.

Attributes

  • src (:string) - The source to use for the image within the avatar. Defaults to nil.
  • alt (:string) - The alternative text to pass to the <img> element. Defaults to nil.
  • placeholder (:string) - Placeholder text to show if no image is given or if an error happens loading the image. Defaults to nil.
  • presence (:string) - Optional presence indicator to show on the avatar.Must be one of "online", or "offline".
  • class (:any) - Additional classes to wrap the avatar with.
  • loading (:string) - . Defaults to "lazy".

avatar_group(assigns)

Group together a bunch of avatars.

Attributes

  • overlap (:integer) - The overlap of the avatars in the group.

    Passed as a negative space between the avatars in the group.

    Defaults to 6.

Slots

  • inner_block (required) - The list of avatars to group together.