Avatar

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

    Angular Avatar の例

    使用方法

    Avatar コンポーネントを初期化するには、以下のコマンドを実行して Ignite UI for Angular をインストールする必要があります。

    ng add igniteui-angular
    

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

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

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

    Avatar の形式は四角または丸で、3 つのサイズ オプション (大、中、小) があります。イニシャル、画像、またはアイコンを表示できます。

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

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

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

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

    <igx-avatar initials="JS"
                [roundShape]="true"
                size="medium">
    </igx-avatar>
    

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

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

    以下は結果です。

    画像を表示するアバター

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

    <igx-avatar src="https://randomuser.me/api/portraits/men/1.jpg"
                [roundShape]="true"
                size="large">
    </igx-avatar>
    

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

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

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

    <igx-avatar icon="person"
                [roundShape]="true"
                size="small">
    </igx-avatar>
    

    以下は結果です。

    スタイル設定

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

    @import '~igniteui-angular/lib/core/styles/themes/index';
    

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

    $custom-avatar-theme: igx-avatar-theme(
        $initials-background: #72da67,
        $initials-color: #000000,
        $icon-background: #217346,
        $icon-color: #ffffff,
        $border-radius-square: 16px
    );
    

    CSS 変数の使用

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

    @include igx-css-vars($custom-avatar-theme);
    

    ミックスインの使用

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

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

    :host {
        ::ng-deep {
            // Pass the custom avatar theme to the `igx-avatar` mixin
            @include igx-avatar($custom-avatar-theme);
        }
    }
    

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

    API リファレンス

    テーマの依存関係

    その他のリソース

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