Components / Avatar

Avatar

An image element with a fallback for representing a user. The image is hidden until it loads and removed on error, revealing the fallback, wired by the Navius Avatar brain.

Examples

Compose ZitsAvatarImage with a ZitsAvatarFallback inside a ZitsAvatar root.

LZ
razor
<ZitsAvatar>
    <ZitsAvatarImage Src="https://github.com/lzitser23.png" alt="@lzitser23" />
    <ZitsAvatarFallback>LZ</ZitsAvatarFallback>
</ZitsAvatar>

Fallback

When the Src is missing or fails to load, the ZitsAvatarFallback is shown instead.

LZ
razor
<ZitsAvatar>
    <ZitsAvatarImage Src="" alt="Broken" />
    <ZitsAvatarFallback>LZ</ZitsAvatarFallback>
</ZitsAvatar>

Installation

Terminal bash
navius add avatar

API reference

ZitsAvatar is the root. The following props are on its parts.

Prop Type Default
ZitsAvatarImage.Src string? -
ZitsAvatarImage.OnLoadingStatusChange EventCallback<string> -
ZitsAvatarFallback.DelayMs int 0