Avatar
Overview
Section titled “Overview”Avatar composes the headless NaviusAvatar primitive family, which owns the image
loading-status tracking that hides the image until it loads and removes it on error
so the fallback shows. The styled layer adds the circular frame, the image’s
aspect-square fit, and the fallback’s centered/muted background.
Install
Section titled “Install”navius add avatar --to ./src/MyApp --namespace MyApp.Ui@using Zits.Ui.Components
<ZitsAvatar> <ZitsAvatarImage Src="https://example.com/user.png" alt="@("@user")" /> <ZitsAvatarFallback>LZ</ZitsAvatarFallback></ZitsAvatar>Parts and props
Section titled “Parts and props”ZitsAvatar’s ChildContent/Attributes pass through to NaviusAvatar unchanged.
ZitsAvatarImage and ZitsAvatarFallback pass Src/OnLoadingStatusChange and
DelayMs respectively through to their primitives unchanged; neither adds a prop of
its own beyond the preset class set.
Styling surface
Section titled “Styling surface”Attributes on each part is merged with that part’s preset class set via Cn.Merge,
caller classes applied last: ZitsAvatar (relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full), ZitsAvatarImage (aspect-square h-full w-full), ZitsAvatarFallback
(flex h-full w-full items-center justify-center rounded-full bg-muted). There is no
variant/size parameter; size is set by overriding the root’s h-10 w-10.
Data attribute hooks
Section titled “Data attribute hooks”None in the styled wrapper: the composed NaviusAvatarImage primitive reports load
state through the OnLoadingStatusChange callback rather than a data-* attribute,
and removes the image element from the DOM on failure so the fallback shows.