Avatar
一貫したフォールバックコンテンツ、サイズ、形状を備えたプロフィール画像です。
主なプロパティ
| プロパティ | 値 | 既定値 |
|---|---|---|
uiSize | md, lg | md |
shape | circle, square | circle |
| パーツ | Root、Image、Fallback | 複合 API |
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/avatar.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRAvatar } from '@tinyrack/ui/components/avatar';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
画像読み込み失敗時のフォールバック パーマリンク
`Image` の隣に `Fallback` を置くと、画像を読み込めない場合に認識しやすいイニシャルを表示できます。このデータ URI はネットワーク要求なしで失敗を再現します。
サイズ パーマリンク
周囲のコントロールと情報密度に合うサイズを選びます。
形状 パーマリンク
人物には `circle`、製品や組織のマークには `square` を使います。
API
Root のオプション
| プロパティ | 型 | 既定値 | 用途 |
|---|---|---|---|
uiSize | 'md' | 'lg' | 'md' | アバターのサイズを設定します。 |
shape | 'circle' | 'square' | 'circle' | アイデンティティの外形を設定します。 |
画像とフォールバック
Image は render、ref、onLoadingStatusChange を含むネイティブ画像と Base UI のプロパティを転送します。人物を表す画像には意味のある alt テキストを使ってください。Fallback は Image がない場合や読み込みに失敗した場合に表示されます。内容は短く認識しやすいものにしてください。Image の読み込み中のちらつきを避けるには、delay をミリ秒単位で指定します。
合成とスタイル
Root は Base UI のルートプロパティ、状態に応じた className と style、render、React 19 の ref を転送します。コンポーネント単位のスタイルを調整するには、--tr-avatar-size、--tr-avatar-radius、--tr-avatar-background、--tr-avatar-border、--tr-avatar-color、--tr-avatar-font-size、--tr-avatar-font-weight を上書きします。