Angular アバターコンポーネント | ng-hub-ui-avatar

インタラクティブなサンプル

一般的な Angular のユースケースでライブラリがどのように動作するかを示すライブサンプルをご覧ください。

アバターのソース

ソーシャルプロフィール、カスタム画像、名前のイニシャル、またはカスタム値からアバターを解決し、自動フォールバックを備えています。

Facebook プロフィール

Gravatar

カスタム画像ソース

フォールバックシステム

意味のある表現が表示されるまで、設定されたすべてのソースを段階的にフォールバックします。

フォールバックシステム

Showing GitHub source (Facebook ID invalid)

サイズ設定

アバターの寸法、テキストとサイズの比率、レンダリングされるイニシャルの数を制御します。

スタイリング

形状、角の半径、色、ボーダー、任意のインラインスタイルはすべて、入力と CSS 変数によって駆動されます。

インタラクティビティ

アバターのクリックイベントでユーザーのインタラクションに反応します。

グループとバッジ

アバターをグループに重ね、角にバッジ（プレゼンスのドットやカウント）を重ねます。色はセマンティックパレットから。

カスタムコンテンツ

任意のアイコン、インライン SVG、画像、絵文字をアバター内に投影できます。中央寄せ・パディング・アバター形状でのクリップが行われ、サイズは非依存に調整され（フォントアイコンは拡大、SVG/画像はフィット）、通常の bgColor / fgColor 入力でテーマ設定できます。