API リファレンス

avatar の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。

インプット

19 個のインプットで avatar を調整。通常の Angular @Input と同じようにバインドできます。

名前	型	デフォルト	説明
`size`	`string \| number`	`50`	アバターのサイズ（ピクセル）
`name`	`string`	—	画像ソースが失敗したときにイニシャルを生成するためのユーザー名
`src`	`string \| SafeUrl`	—	アバターの主要なカスタム画像ソース URL
`alt`	`string`	—	アクセシビリティのためのアバター画像の代替テキスト
`round`	`boolean`	`true`	アバターを円形にする（true）か、cornerRadius に従わせるか
`bgColor`	`string`	—	テキストアバターの背景色。指定しない場合は自動生成されます
`fgColor`	`string`	`#FFF`	テキスト avatar のイニシャルのテキスト色
`borderColor`	`string`	—	アバター周囲のボーダー色
`cornerRadius`	`string \| number`	`0`	round が false のときの角丸半径
`textSizeRatio`	`number`	`3`	アバターサイズからテキストサイズを計算する比率（size / textSizeRatio）
`initialsSize`	`string \| number`	`0`	表示するイニシャルの数を制限します（0 = 制限なし）
`facebookId`	`string`	—	プロフィール画像用の Facebook ユーザー ID（ベストエフォート、API 制限が適用される場合があります）
`githubId`	`string`	—	プロフィール画像を取得するための GitHub ユーザー名
`gravatarId`	`string`	—	プロフィール画像を取得するための Gravatar のメールアドレスまたは MD5 ハッシュ
`value`	`string`	—	カスタム値をアバターとして表示します（例: "75%"、"+5"）
`style`	`Partial<CSSStyleDeclaration>`	—	アバターのルート要素に適用するカスタムスタイル
`referrerpolicy`	`string`	—	アバター画像のリファラーポリシー（例: "no-referrer"）
`badge`	`string \| number \| boolean \| null`	—	角のオーバーレイ：`badge` / `[badge]="true"` → ドット、`badge="4k"` → ラベル付きピル、null / 未指定 → なし。
`badgeColor`	`HubAvatarBadgeColor \| string \| null`	—	バッジのセマンティックカラー（primary · secondary · success · danger · warning · info · light · dark）→ `--hub-sys-color-*`。

アウトプット

avatar の動作に反応 — ロジックを接続できる 1 個のイベント。

名前	型	説明
`clickOnAvatar`	`Source`	アバターがクリックされたときに発行され、現在アクティブなソースオブジェクトを返します

テンプレート

テンプレートはまだドキュメント化されていません。

CSS 変数

11 個の CSS 変数であらゆるピクセルをテーマ設定。:root で上書きするか、ラッパーにスコープを限定できます。

サイズとレイアウト

avatar の寸法と間隔を制御します

変数	デフォルト	型	説明
`--hub-avatar-size`	`50px`	length	サイズが指定されていない場合の avatar のデフォルトサイズ `24px40px64px96px`
`--hub-avatar-border-radius`	`50%`	length	avatar コンテナの境界半径 `04px8px50%`

色と外観

avatar の色と視覚的な外観をカスタマイズします

変数	デフォルト	型	説明
`--hub-avatar-bg-color`	`var(--hub-sys-color-primary)`	color	テキスト avatar の背景色 `#007bff#28a745#dc3545#6f42c1`
`--hub-avatar-text-color`	`#ffffff`	color	テキスト avatar のイニシャルのテキスト色 `#000000#ffffff#6c757d`
`--hub-avatar-border-color`	`transparent`	color	avatar 周囲の境界線の色 `#dee2e6#007bff#28a745`
`--hub-avatar-border-width`	`0`	length	avatar 周囲の境界線の幅 `1px2px3px`

タイポグラフィ

avatar イニシャルのテキストの外観を制御します

変数	デフォルト	型	説明
`--hub-avatar-font-family`	`Helvetica, Arial, sans-serif`	string	avatar イニシャルのフォントファミリー `Inter, sans-serifRoboto, sans-serifsystem-ui`
`--hub-avatar-font-weight`	`normal`	string	avatar イニシャルのフォントウェイト `400500600bold`
`--hub-avatar-text-transform`	`uppercase`	string	イニシャルのテキスト変換 `noneuppercaselowercasecapitalize`

カスタムコンテンツ

アバターに投影したコンテンツのサイズ。背景と前景はアバター自身のトークンを使用します。

変数	デフォルト	型	説明
`--hub-avatar-content-padding`	`calc(var(--hub-avatar-size) * 0.2)`	length	投影コンテンツとアバター端の間のパディング。 `8px15%calc(var(--hub-avatar-size) * 0.25)`
`--hub-avatar-content-icon-size`	`calc(var(--hub-avatar-size) * 0.55)`	length	投影するフォントアイコン／絵文字のフォントサイズ（グリフが継承）。 `1.5remcalc(var(--hub-avatar-size) * 0.6)`

スタイリングとテーマ設定

スタイリングのサンプルはまだドキュメント化されていません。このセクションには、カスタマイズのレシピやテーマ設定のサンプルが含まれる予定です。