コンポーネント
Avatar
ユーザーを表す、フォールバック付きの画像要素です。
MU
import { Avatar, AvatarFallback, AvatarImage } from "@murasakijs/ui";export function AvatarDemo() {return ( <Avatar> <AvatarImage src="https://avatars.githubusercontent.com/u/297658745?s=400" alt="Murasaki" /> <AvatarFallback>MU</AvatarFallback> </Avatar>);}使い方
import { Avatar, AvatarFallback, AvatarImage } from "@murasakijs/ui";<Avatar>
<AvatarImage src="https://avatars.githubusercontent.com/u/297658745?s=400" alt="Murasaki" />
<AvatarFallback>MU</AvatarFallback>
</Avatar>API リファレンス
サブコンポーネント
| コンポーネント | 説明 |
|---|---|
Avatar | ルートコンテナ(デフォルトで h-10 w-10 の円形)です。 |
AvatarImage | 画像です。読み込みに成功するまでは何もレンダリングしません。src・alt・onLoadingStatusChange を受け取ります。 |
AvatarFallback | 画像の読み込み中、または読み込み失敗時に表示されます。delayMs でレンダリングを遅延できます。 |
すべてのサブコンポーネントは Radix UI の Avatar
プリミティブをラップし、それ以外の props はすべてそのまま渡されます。