Web Components Avatar (アバター)

    Ignite UI for Web Components アバターは、アプリケーションでイニシャル、画像、またはアイコンを表示するのに役立ちます。

    Web Components Icon Avatar の例

    使用方法

    まず、次のコマンドを実行して Ignite UI for Web Components npm パッケージをインストールする必要があります。

    npm install igniteui-webcomponents
    
    import { defineComponents, IgcAvatarComponent } from 'igniteui-webcomponents';
    
    defineComponents(IgcAvatarComponent);
    

    IgcAvatarComponent は、画像、イニシャル、またはアイコンを含むその他のコンテンツを表示できます。IgcAvatarComponent の宣言は次のように簡単です。

    <igc-avatar></igc-avatar>
    

    アバターには、コンテキストに基づいてさまざまなコンテンツを描画できるようにするいくつかの属性があります。アバターの境界にコンテンツを表示する最も基本的な方法は、開始タグと終了タグの間にコンテンツを提供することです。

    <igc-avatar>
      <igc-icon name="home"></igc-icon>
    </igc-avatar>
    

    イニシャル

    initials 属性が設定されている場合、アバターのすべての子要素は無視され、この属性に渡された文字列が表示されます。

    <!-- Initials("AZ") will be displayed instead of the icon. -->
    
    <igc-avatar initials="AZ">
      <igc-icon name="home"></igc-icon>
    </igc-avatar>
    

    画像

    src 属性に静的アセットに有効な URL が割り当てられている場合、アバターは画像を表示することもできます。その場合、initials 値は無視され、子要素は描画されません。

    <igc-avatar
      initials="AZ"
      src="https://www.infragistics.com/angular-demos/assets/images/men/1.jpg"
      alt="A photo of a man.">
      <igc-icon name="home"></igc-icon>
    </igc-avatar>
    

    アバターは、circleroundedsquare の 3 つの形状をサポートしています。アバターの形状は、shape 属性を介して変更できます。

    形状

    サイズ

    形状とは別に、size 属性を設定することでアバターのサイズを変更することもできます。サポートされているサイズは smallmediumlarge です。

    スタイル設定

    アバター コンポーネントは、すべてのスタイル プロパティを変更するために使用できる base パーツを公開します。

    igc-avatar::part(base) {
      --size: 72px;
      color: olive;
      background: beige;
      border-radius: 20px;
    }
    

    API リファレンス

    その他のリソース

    API メンバー