LineaUI.Components.Avatar (linea_ui v0.1.1)

Copy Markdown View Source

LineOne's avatars: an image or initials in a circle, a square, a squircle or any mask shape, with a status dot, a gradient ring, and stacked in groups.

<.avatar src="/images/jane.jpg" alt="Jane" />
<.avatar initials="jd" color="primary" size="md" shape="square" />
<.avatar initials="jd" color="info" variant="soft" />
<.avatar src="/images/jane.jpg" size="lg" status="success" />
<.avatar initials="jd" status="primary" status_position="bottom-left" ping />
<.avatar src="/images/jane.jpg" gradient="sky-blue" size="lg" />

<.avatar_group>
  <.avatar :for={user <- @users} src={user.photo} size="xs" ring />
</.avatar_group>

<.avatar src="/images/jane.jpg" size="2xs" ring={1} ring_color="primary" />
<.avatar src="/images/jane.jpg" size="lg" face_class="border-2 border-white dark:border-navy-700" />
<.avatar src="/images/jane.jpg" status="success" status_position="bottom-right" />

The inner block, when given, replaces the initials (an icon, a counter).

Summary

Functions

avatar(assigns)

Renders an avatar.

avatar_group(assigns)

Stacks avatars so they overlap, as LineOne's avatar group. Give the avatars ring so each one is outlined against the next.

Functions

avatar(assigns)

Renders an avatar.

Attributes

  • src (:string) - Defaults to nil.
  • alt (:string) - Defaults to "avatar".
  • initials (:string) - Shown (upper-cased) when there is no src. Defaults to nil.
  • size (:string) - 3xs is size-6, 2xs size-7, xs size-8, xs-plus size-9, sm size-10 (default), md size-12, lg size-16, xl size-20, 2xl size-24. Defaults to "sm". Must be one of "3xs", "2xs", "xs", "xs-plus", "sm", "md", "lg", "xl", or "2xl".
  • shape (:string) - square is LineOne's rounded-lg, rounded its rounded-xl; the others are masks. Defaults to "circle". Must be one of "circle", "square", "rounded", "squircle", "reuleaux-triangle", "diamond", "hexagon", "hexagon-2", "octagon", "star", "star-2", or "heart".
  • color (:string) - The initials' color. Defaults to "neutral". Must be one of "neutral", "primary", "secondary", "info", "success", "warning", or "error".
  • variant (:string) - How the initials are painted; skeleton is the grey placeholder. Defaults to "solid". Must be one of "solid", "soft", "bordered", or "skeleton".
  • status (:any) - A status dot's color; nil or false shows no dot. Works the same on an image and on initials. Use status_position="bottom-right" for LineOne's online dot. Defaults to nil. Must be one of nil, false, "neutral", "primary", "secondary", "info", "success", "warning", or "error".
  • status_position (:string) - Defaults to "top-right". Must be one of "top-right", "top-left", "bottom-right", or "bottom-left".
  • ping (:boolean) - Animates the status dot with a ping. Defaults to false.
  • ring (:any) - The ring avatars wear inside a group. true is a 2px ring; 1, 2 or 4 pick the width. Defaults to false. Must be one of true, false, 1, 2, 4, "1", "2", or "4".
  • ring_color (:string) - white is white in light mode and the card color in dark mode. Defaults to "white". Must be one of "white", "neutral", "primary", "secondary", "info", "success", "warning", or "error".
  • face_class (:any) - Classes merged into the picture or initials face itself (a border, a shadow), while class goes on the wrapper. Defaults to nil.
  • gradient (:string) - A gradient border around the avatar. Defaults to nil. Must be one of nil, "sky-blue", "amber-orange", "pink-rose", "purple-orange", "green-fuchsia", "purple-indigo", or "fuchsia-pink".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

avatar_group(assigns)

Stacks avatars so they overlap, as LineOne's avatar group. Give the avatars ring so each one is outlined against the next.

<.avatar_group>
  <.avatar src="/a.jpg" size="xs" ring />
  <.avatar initials="jd" color="info" size="xs" ring />
</.avatar_group>

Attributes

  • pulse (:boolean) - Pulses the whole group, for skeletons. Defaults to false.
  • overlap (:string) - How far the avatars overlap: 2 is -space-x-2, 3 is -space-x-3. Defaults to "2". Must be one of "2", or "3".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)