syncfusion-javascript-avatar

アバターコントロールの実装

Syncfusion Avatar コントロールは、画像、SVG、フォントアイコン、文字、単語など、さまざまな形式でユーザープロファイルやユーザーを表す軽量コンポーネントです。アバターは、ユーザー向けアプリケーション、連絡先リスト、通知バッジ、プロフィールセクションに欠かせません。

Avatar を使用する場面

次のような場合は、Avatar コントロールを使用します。

• ユーザープロフィールの写真やイニシャルを表示する
• 円形または四角形のユーザー表現を作成する
• バッジで通知数を表示する
• 連絡先リストやユーザーディレクトリを作成する
• メッセージングアプリやソーシャルアプリにユーザーアバターを実装する
• カスタムサイズや色でプロフィールインジケーターを表示する
• ユーザー表現を他の UI コンポーネントと連携させる

コントロールの概要

Avatar コントロールでは、次の機能が提供されます。

• 複数の形状：デフォルト（角丸四角形）と円形
• 5 種類の定義済みサイズ：Xlarge、Large、Default、Small、XSmall
• 複数のメディア形式：画像、SVG、フォントアイコン、文字、単語
• 色のカスタマイズ：デフォルトのグレーまたはカスタム CSS クラス
• コンポーネント連携：Badge および ListView コントロールと連携
• レスポンシブデザイン：フォントサイズに応じて拡大縮小
• ES5 および最新モジュールのサポート：さまざまなプロジェクト構成に対応

ドキュメントとナビゲーションガイド

はじめに

📄 参照先： references/getting-started.md

• インストールと依存関係の設定
• Webpack と CSS の設定
• HTML の span を使った基本的なアバターの実装
• アプリケーションの実行
• ES5 のグローバルスクリプトを使う代替方法
• CDN の設定オプション

アバターの種類とサイズ

📄 参照先： references/avatar-types-and-sizes.md

• アバターの形状の種類（Default と Circle）
• 5 種類のサイズクラスの説明
• サイズの参照表
• 各種類とサイズの完全なコード例
• 視覚的なデモ

カスタマイズとスタイル設定

📄 参照先： references/customization.md

• CSS クラスを使った色のカスタマイズ
• フォントサイズの拡大縮小によるサイズのカスタマイズ
• 複数のメディア形式のサポート（画像、SVG、アイコン、文字、単語）
• CSS クラスのカスタマイズ例
• レスポンシブデザインに関する考慮事項
• カスタムカラーパレットの例

アバターとバッジの連携

📄 参照先： references/avatar-with-badge.md

• Avatar と Badge コントロールの組み合わせ
• 通知バッジの位置とスタイル設定
• バッジを重ねる方法
• すべてのサイズの組み合わせ例
• 異なる数値を表示する通知バッジ

ListView 内のアバター

📄 参照先： references/avatar-in-listview.md

• Avatar と ListView コントロールの連携
• 連絡先リストアプリケーションの作成
• データバインディングを使った TypeScript の実装
• 条件付きレンダリングを使ったテンプレートバインディング
• リスト項目内でのアバターの位置とスタイル設定
• 複数の連絡先を含む完全な動作例

クイックスタートの例

デフォルトのスタイルを使った基本的なアバター：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Avatar Quick Start</title>
    <link href="url" rel="stylesheet" />
    <link href="url" rel="stylesheet" />
</head>
<body>
    
    <span class="e-avatar">AB</span>
    
    
    <span class="e-avatar e-avatar-circle">JD</span>
    
    
    <span class="e-avatar e-avatar-circle" style="background-image: url('profile.jpg')"></span>
</body>
</html>

よくあるパターン

パターン 1：サイズの変更

基本の .e-avatar クラスにサイズクラスを適用します。

<span class="e-avatar e-avatar-xlarge">AB</span>
<span class="e-avatar e-avatar-large">AB</span>
<span class="e-avatar">AB</span>
<span class="e-avatar e-avatar-small">AB</span>
<span class="e-avatar e-avatar-xsmall">AB</span>

パターン 2：色のバリエーション

アバター用のカスタムカラークラスを作成します。

<span class="e-avatar e-avatar-circle primary">JD</span>
<span class="e-avatar e-avatar-circle success">MK</span>
<span class="e-avatar e-avatar-circle warning">LP</span>

.e-avatar.primary {
    background-color: #0071c1;
    color: white;
}

.e-avatar.success {
    background-color: #00b251;
    color: white;
}

.e-avatar.warning {
    background-color: #ffc900;
    color: #333;
}

パターン 3：複数のメディア形式

異なる形式のアバターを横一列に表示します。

<div class="avatar-group">
    
    <span class="e-avatar e-avatar-large" style="background-image: url('user1.jpg')"></span>
    
    
    <span class="e-avatar e-avatar-large">
        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
            <circle cx="16" cy="16" r="15" fill="currentColor"/>
        </svg>
    </span>
    
    
    <span class="e-avatar e-avatar-large">AB</span>
    
    
    <span class="e-avatar e-avatar-large">
        <i class="icon-user"></i>
    </span>
</div>

パターン 4：ステータスバッジ付きアバター

アバターに通知インジケーターを組み合わせます。

<div style="position: relative; display: inline-block;">
    <span class="e-avatar e-avatar-large e-avatar-circle">JD</span>
    <span class="e-badge e-badge-success e-badge-overlap e-badge-circle">●</span>
</div>

主なプロパティとクラス

サイズクラス

• .e-avatar-xlarge - 特大サイズのアバター
• .e-avatar-large - 大サイズのアバター
• .e-avatar - デフォルトサイズ
• .e-avatar-small - 小サイズのアバター
• .e-avatar-xsmall - 極小サイズのアバター

形状クラス

• .e-avatar - デフォルト（角丸四角形）
• .e-avatar-circle - 円形

メディアのサポート

• 画像：background-size: cover とともに background-image プロパティを使用します
• SVG：SVG マークアップを埋め込むか、SVG ファイルを参照します
• アイコン：アイコンフォントまたはアイコンライブラリを使用します
• テキスト：イニシャルや短いテキストを直接表示します

一般的な使用例

ユーザープロフィールの表示 適切なサイズと形状で、プロフィールカードにユーザーのアバターと情報を表示します。

連絡先リスト ListView で小さいサイズまたは最小サイズのアバターを使用し、イニシャルやプロフィール写真とともに連絡先リストを表示します。

通知バッジ アバターと Badge コントロールを組み合わせて、通知件数やステータスインジケーターを表示します。

チームメンバーのグリッド さまざまな種類のアバターとカスタムカラーを使って、チームメンバーをグリッドレイアウトで表示します。

チャットアプリケーション メッセージスレッドで小さな円形のアバターとカスタムカラーを使い、送信者を識別します。

ユーザー選択 UI ドロップダウンや選択リストで、一貫したスタイルとサイズのアバターとともにユーザーを表示します。

次のステップ

• インストールと基本設定については、はじめにをお読みください
• さまざまな形状とサイズのオプションについては、種類とサイズをご覧ください
• 色とメディア形式については、カスタマイズをご確認ください
• 通知に関する使用例については、バッジとの連携をご覧ください
• 連絡先リストのパターンについては、ListView との連携をご確認ください