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 ファイルをインポートする必要があります。
@use "igniteui-angular/theming" as *;
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
最も簡単な方法は、avatar-theme
を拡張する新しいテーマを作成し、$background
、$color
と $border-radius-square
パラメーターを受け取る方法です。
次のマークアップを前提として:
<div class="initials-avatar">
<igx-avatar>BA</igx-avatar>
</div>
テーマを作成する必要があります:
$custom-avatar-theme: avatar-theme(
$background: #72da67,
$color: #000000,
$border-radius-square: 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);
}
}
}
ここまでの内容が正しければ、以下のように表示されます。
API リファレンス
テーマの依存関係
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。