Angular アバターコンポーネント | ng-hub-ui-avatar
イニシャル、フォールバック画像、プレゼンスバッジ、CSS 変数を備えた Angular アバターコンポーネント。再利用可能なユーザー識別 UI を構築できます。
最終更新 2026/08/18
概要
チームがこのライブラリを探す理由
フォールバック、イニシャル、複数の画像プロバイダー、デザインシステムに優しいスタイルフックを備えた堅牢なユーザー識別 UI が必要なとき、この Angular アバターコンポーネントを選んでください。
インストール
npm install ng-hub-ui-avatarジャンプ
最適な用途
- ユーザーメニュー
- チームリスト
- アクティビティフィード
- プロフィールカード
について avatar
ng-hub-ui-avatar は、メニュー・プロフィールカード・共同作業インターフェースを通じて、Angular アプリケーションでユーザーを一貫して表示できるよう支援します。画像欠落、イニシャル生成、ステータス表示、共通のサイズ規則といった一般的なエッジケースに対応します。
機能ガイド
アバターのソース
ソーシャルプロフィール、カスタム画像、名前のイニシャル、またはカスタム値からアバターを解決し、自動フォールバックを備えています。
サンプル:
Facebook プロフィール
Facebook プロフィール
Gravatar
Gravatar
GitHub プロフィール
GitHub プロフィール
カスタム画像ソース
カスタム画像ソース
名前のイニシャル
名前のイニシャル
値の表示
値の表示
フォールバックシステム
意味のある表現が表示されるまで、設定されたすべてのソースを段階的にフォールバックします。
サンプル:
フォールバックシステム
フォールバックシステム
Showing GitHub source (Facebook ID invalid)
サイズ設定
アバターの寸法、テキストとサイズの比率、レンダリングされるイニシャルの数を制御します。
サンプル:
カスタムサイズ
カスタムサイズ
テキストサイズ比率
テキストサイズ比率
イニシャルサイズの上限
イニシャルサイズの上限
スタイリング
形状、角の半径、色、ボーダー、任意のインラインスタイルはすべて、入力と CSS 変数によって駆動されます。
サンプル:
丸型アバター
丸型アバター
角の丸み
角の丸み
背景色 & 前景色
背景色 & 前景色
--hub-avatar-bg-color ([autoColor]="false")枠線の色
枠線の色
カスタムスタイル
カスタムスタイル
インタラクティビティ
アバターのクリックイベントでユーザーのインタラクションに反応します。
サンプル:
クリックイベントハンドラー
クリックイベントハンドラー
グループとバッジ
アバターをグループに重ね、角にバッジ（プレゼンスのドットやカウント）を重ねます。色はセマンティックパレットから。
サンプル:
アバターグループ表示
アバターグループ表示
バッジ（ドット＆カウント）
バッジ（ドット＆カウント）
カスタムコンテンツ
任意のアイコン、インライン SVG、画像、絵文字をアバター内に投影できます。中央寄せ・パディング・アバター形状でのクリップが行われ、サイズは非依存に調整され（フォントアイコンは拡大、SVG/画像はフィット）、通常の bgColor / fgColor 入力でテーマ設定できます。
サンプル:
カスタムコンテンツ（アイコン・SVG）
カスタムコンテンツ（アイコン・SVG）
主な機能
最近の変更
Version 22.9.1 - 8/8/26, 12:00 AM
fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.
Version 22.9.0 - 7/28/26, 12:00 AM
changed: Accent resolution now imports the canonical resolveHubAccent from ng-hub-ui-utils. The private copy under src/lib/shared/resolve-hub-accent.ts has been deleted in favour of the single, tested implementation shared family-wide. Behaviour is identical (the copy had not diverged): a bareword resolves to var(--hub-sys-color-<name>, <name>), a literal colour passes through unchanged, an empty value yields null.
added: NEW peer dependency: ng-hub-ui-utils >=22.7.0. Consumers must have ng-hub-ui-utils installed alongside this library (it is where resolveHubAccent lives). Users installing via ng add ng-hub-ui-installer get it automatically; manual installs need npm i ng-hub-ui-utils.
Version 22.8.0 - 7/28/26, 12:00 AM
added: interactive input: exposes role=button, focusability and Enter/Space activation for avatars that bind (clickOnAvatar) — the click target used to be mouse-only.
Version 22.6.0 - 7/7/26, 12:00 AM
added: autoColor input — set [autoColor]="false" on an initials avatar to suppress the inline hash background so it can be themed via the --hub-avatar-bg-color CSS variable (no !important). Defaults to true; an explicit bgColor still wins.
Version 22.5.0 - 6/30/26, 12:00 AM
added: Standalone AvatarComponent — import it directly (no NgModule) and configure with the new provideAvatar() environment provider.
deprecated: AvatarModule / AvatarModule.forRoot() — kept for backward compatibility (now re-exporting the standalone component); use AvatarComponent + provideAvatar() instead.