BMインストール
CLI または手動でこのアバターコンポーネントを追加できます。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
CLI
手動
CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。
npx boardui@latest add avatar共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
サイズ
4つのサイズを経由して サイズ: プロップ - xs (20px) から フリガナ (36px). 初期型スケールはコンテナに従います。
<Avatar size="xs" initials="M" /> {/* 20px */}<Avatar size="sm" initials="M" /> {/* 24px */}<Avatar size="md" initials="M" /> {/* 32px */}<Avatar size="lg" initials="M" /> {/* 36px */}初期のチンツ
イニシャルは、 neutral または ブルーブルー 表面を経由して 色: 色 プロップ。
<Avatar color="neutral" initials="M" /> {/* neutral surface */}<Avatar color="blue" initials="B" /> {/* blue tint */}プロフィール
パス src そして、 alt 写真アバターの場合。画像が読み込まれている間、または失敗した場合、初期値はフォールバックとして機能します。
{/* Photo avatars take a src + alt; initials are the fallback */}<Avatar size="md" src="/avatars/livia-saris.webp" alt="Livia Saris" />