Avatar, translated from the shadcn/ui (new-york-v4) avatar.
Radix's Avatar uses an internal image-loading state machine to swap between the
image and a fallback. This portable version reproduces that with a tiny hook,
ShadixAvatar (assets/ts/avatar.ts), placed on the <img>: if the image loads
it stays visible and the sibling fallback is hidden; if the image errors or has
no src, the image is hidden and the fallback is revealed.
Compose them as: avatar/1 wrapper containing an avatar_image/1 followed by
an avatar_fallback/1 (the fallback must come after the image so the hook can
find it as the next sibling).
Summary
Functions
Wrapper for an avatar. Renders a data-slot="avatar" span; place an
avatar_image/1 and then an avatar_fallback/1 inside it.
Avatar fallback (typically initials). Starts hidden via the hidden class and
is revealed by the ShadixAvatar hook when the image fails to load.
Avatar image. Carries the ShadixAvatar hook which hides the image and reveals
the sibling fallback on error / missing src, and hides the fallback on load.
Functions
Wrapper for an avatar. Renders a data-slot="avatar" span; place an
avatar_image/1 and then an avatar_fallback/1 inside it.
Attributes
class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
Avatar fallback (typically initials). Starts hidden via the hidden class and
is revealed by the ShadixAvatar hook when the image fails to load.
Attributes
class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
Avatar image. Carries the ShadixAvatar hook which hides the image and reveals
the sibling fallback on error / missing src, and hides the fallback on load.
Attributes
id(:string) (required)src(:string) - Defaults tonil.alt(:string) - Defaults to"".class(:string) - Defaults tonil.- Global attributes are accepted.