Angular アバターコンポーネント | ng-hub-ui-avatar
イニシャル、フォールバック画像、プレゼンスバッジ、CSS 変数を備えた Angular アバターコンポーネント。再利用可能なユーザー識別 UI を構築できます。
概要
チームがこのライブラリを探す理由
フォールバック、イニシャル、複数の画像プロバイダー、デザインシステムに優しいスタイルフックを備えた堅牢なユーザー識別 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 変数によって駆動されます。
サンプル:
丸型アバター
丸型アバター
角の丸み
角の丸み
背景色 & 前景色
背景色 & 前景色
枠線の色
枠線の色
カスタムスタイル
カスタムスタイル
インタラクティビティ
アバターのクリックイベントでユーザーのインタラクションに反応します。
サンプル:
クリックイベントハンドラー
クリックイベントハンドラー
グループとバッジ
アバターをグループに重ね、角にバッジ（プレゼンスのドットやカウント）を重ねます。色はセマンティックパレットから。
サンプル:
アバターグループ表示
アバターグループ表示
バッジ（ドット＆カウント）
バッジ（ドット＆カウント）
カスタムコンテンツ
任意のアイコン、インライン SVG、画像、絵文字をアバター内に投影できます。中央寄せ・パディング・アバター形状でのクリップが行われ、サイズは非依存に調整され（フォントアイコンは拡大、SVG/画像はフィット）、通常の bgColor / fgColor 入力でテーマ設定できます。
サンプル:
カスタムコンテンツ（アイコン・SVG）
カスタムコンテンツ（アイコン・SVG）
主な機能
最近の変更
Version 19.0.3 - 9/15/24, 12:00 AM
added: Comprehensive documentation page with functional examples