Angular Avatar (アバター) コンポーネントの概要

    Angular Avatar コンポーネントは、イニシャル、画像、またはマテリアル アイコンをアプリケーションに追加します。

    Angular Avatar の例

    Ignite UI for Angular Avatar を使用した作業の開始

    Ignite UI for Angular Avatar コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

    ng add igniteui-angular
    

    Ignite UI for Angular については、「はじめに」トピックをご覧ください。

    次に、app.module.ts ファイルに IgxAvatarModule をインポートします。

    // app.module.ts
    
    ...
    import { IgxAvatarModule } from 'igniteui-angular';
    // import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package
    
    @NgModule({
        ...
        imports: [..., IgxAvatarModule],
        ...
    })
    export class AppModule {}
    

    あるいは、16.0.0 以降、IgxAvatarComponent をスタンドアロンの依存関係としてインポートできます。

    // home.component.ts
    
    ...
    import { IgxAvatarComponent } from 'igniteui-angular';
    // import { IgxAvatarComponent } from '@infragistics/igniteui-angular'; for licensed package
    
    @Component({
        selector: 'app-home',
        template: '<igx-avatar shape="circle"></igx-avatar>',
        styleUrls: ['home.component.scss'],
        standalone: true,
        imports: [IgxAvatarComponent]
    })
    export class HomeComponent {}
    

    Ignite UI for Angular Avatar モジュールまたはコンポーネントをインポートしたので、igx-avatar コンポーネントの基本構成を開始できます。

    Angular Avatar コンポーネントの使用

    Ignite UI for Angular Avatar コンポーネントには、3 つの形状 (正方形、角丸、円) と 3 つのサイズ オプション (大、中、小) があります。イニシャル、画像、またはアイコンを表示できます。

    Avatar の形状

    shape 属性の値を squarerounded、または circle に設定することで、アバターの形状を変更できます。デフォルトでは、アバターの形状は square です。

    <igx-avatar shape="circle"></igx-avatar>
    

    イニシャルを表示するアバター

    イニシャル ('John Smith' の場合 'JS') を使用した簡易なアバターを作成するには、以下のコードをコンポーネントのテンプレートに追加します。

    <igx-avatar initials="JS" shape="circle"></igx-avatar>
    

    アバターを丸形に設定し、サイズを大きくします。

    <igx-avatar size="medium" initials="JS" shape="circle"></igx-avatar>
    

    background プロパティを使用して背景色を変更できます。また、color プロパティを使用してイニシャルの色を設定します。

    // avatar.component.scss
    
    igx-avatar {
        background: #e41c77;
        color: #000000;
    }
    
    
    Warning

    igx-avatar コンポーネントの roundShape プロパティは廃止されました。代わりに shape 属性を使用する必要があります。

    以下は結果です。

    画像を表示するアバター

    画像を表示するアバターを作成するには、src プロパティで画像ソースを設定します。

    <igx-avatar src="https://randomuser.me/api/portraits/men/1.jpg"
                shape="rounded"
                size="large">
    </igx-avatar>
    

    ここまでの内容が正しければ、以下のように表示されます。

    アイコンを表示するアバター

    アバターでアイコンを表示するには、icon プロパティを設定します。現在、マテリアル アイコン セットのすべてのアイコンがサポートされます。

    <igx-avatar icon="person"
                shape="rounded"
                size="small">
    </igx-avatar>
    

    以下は結果です。

    スタイル設定

    Avatar のスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。

    @use "igniteui-angular/theming" as *;
    
    // 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
    // @import '~igniteui-angular/lib/core/styles/themes/index';
    

    最も簡単な方法は、avatar-theme を拡張する新しいテーマを作成し、$background$color$border-radius パラメーターを受け取る方法です。

    次のマークアップを前提として:

    <div class="initials-avatar">
        <igx-avatar>BA</igx-avatar>
    </div>
    

    テーマを作成する必要があります:

    $custom-avatar-theme: avatar-theme(
        $background: #72da67,
        $color: #000000,
        $border-radius: 16px
    );
    

    CSS 変数の使用

    最後にアバターのカスタム テーマを渡します。

    .initials-avatar {
        @include css-vars($custom-avatar-theme);
    }
    

    ミックスインの使用

    Internet Explorer 11 以前などブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチが必要です。

    コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。一方、カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。

    :host {
        ::ng-deep {
            // Custom avatar theme を `igx-avatar` ミックスインに渡します
            .initials-avatar {
                @include avatar($custom-avatar-theme);
            }
        }
    }
    

    ここまでの内容が正しければ、以下のように表示されます。

    カスタム サイズ変更

    igx-avatar を直接ターゲットとして --size 変数を使用することができます。

    igx-avatar {
      --size: 200px;
    }
    

    または、ユニバーサル変数 --igx-avatar-size を使用して、すべてのインスタンスをターゲットにすることもできます。

    <div class="my-app">
      <igx-avatar></igx-avatar>
    </div>
    
    .my-app {
      --igx-avatar-size: 200px;
    }
    

    size 属性が適用されていない場合は、事前定義されたサイズの 1 つを使用して、それを --ig-size 変数に割り当てることもできます。--ig-size に使用可能な値は、--ig-size-small--ig-size-medium--ig-size-large です。

    igx-avatar {
        --ig-size: var(--ig-size-small);
    }
    

    詳細については、サイズの記事をご覧ください。

    API リファレンス

    テーマの依存関係

    その他のリソース

    コミュニティに参加して新しいアイデアをご提案ください。