Corex.Avatar (Corex v0.1.0-alpha.29)

View Source

Phoenix implementation of Zag.js Avatar.

Examples

Basic

<.avatar id="avatar" src="/me.jpg" class="avatar">
  <:fallback>JD</:fallback>
</.avatar>

Styling

Use data attributes to target elements:

[data-scope="avatar"][data-part="root"] {}
[data-scope="avatar"][data-part="image"] {}
[data-scope="avatar"][data-part="fallback"] {}
[data-scope="avatar"][data-part="skeleton"] {}

If you wish to use the default Corex styling, you can use the class avatar on the component. This requires to install Mix.Tasks.Corex.Design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/avatar.css";

You can then use modifiers

<.avatar class="avatar avatar--accent avatar--lg">
  <:fallback>JD</:fallback>
</.avatar>

Learn more about modifiers and Corex Design

Summary

Components

avatar(assigns)

Components

avatar(assigns)

Attributes

  • id (:string) - The id of the avatar.
  • src (:string) - Image source URL. Defaults to nil.
  • alt (:string) - Alternative text for the image. Defaults to "".
  • on_status_change (:string) - Server event when image load status changes. Defaults to nil.
  • on_status_change_client (:string) - Client event when image load status changes. Defaults to nil.
  • Global attributes are accepted.

Slots

  • fallback (required)