React Avatar (アバター)

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

React Icon Avatar の例

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrAvatarModule, IgrAvatar, IgrIcon, IgrIconModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrAvatarModule.register();
IgrIconModule.register();

export default class AvatarIcon extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
        this.iconRef = this.iconRef.bind(this);        
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrAvatar>
                    <IgrIcon key="icon" ref={this.iconRef} name="home" collection="material" />
                </IgrAvatar>
            </div>
        );
    }

    public iconRef(icon: IgrIcon){
        if(!icon){
            return;
        }

        const homeIcon =
        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

        // icon.registerIcon("home", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_home_24px.svg", "material");        
        icon.registerIconFromText("home", homeIcon, "material");
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<AvatarIcon/>);
tsxコピー

Edit in: Codesandbox

このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

使用方法

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

npm install igniteui-react
cmd

次に、以下のように、IgrAvatar とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

import { IgrAvatarModule, IgrAvatar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrAvatarModule.register();
tsx

Ignite UI for React の完全な概要については、作業の開始トピックを参照してください。

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

<IgrAvatar />
tsx

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

<IgrAvatar>
    <IgrIcon name="home" />
</IgrAvatar>
tsx

イニシャル

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

<IgrAvatar initials="AZ">
    <IgrIcon name="home" />
</IgrAvatar>
tsx

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrAvatarModule, IgrAvatar } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrAvatarModule.register();

export default class AvatarInitials extends React.Component<any, any> {

    constructor(props: any) {
        super(props);                   
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrAvatar initials="AZ"/>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<AvatarInitials/>);
tsxコピー

Edit in: Codesandbox

画像

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

<IgrAvatar initials="AZ"
           src="https://static.infragistics.com/xplatform/images/people/men/1.jpg"
           alt="A photo of a man.">
    <IgrIcon name="home" />
</IgrAvatar>
tsx

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrAvatarModule, IgrAvatar } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrAvatarModule.register();

export default class AvatarImage extends React.Component<any, any> {

    constructor(props: any) {
        super(props);        
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrAvatar src="https://static.infragistics.com/xplatform/images/people/men/1.jpg" alt="A photo of a man." />
            </div>
        );
    }    
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<AvatarImage/>);
tsxコピー

Edit in: Codesandbox

形状

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

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrAvatarModule, IgrAvatar, IgrIcon, IgrIconModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrAvatarModule.register();
IgrIconModule.register();

export default class AvatarShape extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
        this.iconRef = this.iconRef.bind(this);        
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrAvatar shape="rounded">
                    <IgrIcon key="icon" ref={this.iconRef} name="home" collection="material" />
                </IgrAvatar>
            </div>
        );
    }

    public iconRef(icon: IgrIcon){
        if(!icon){
            return;
        }

        const homeIcon =
        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

        // icon.registerIcon("home", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_home_24px.svg", "material");        
        icon.registerIconFromText("home", homeIcon, "material");
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<AvatarShape/>);
tsxコピー

Edit in: Codesandbox

サイズ

形状とは別に、アバターのサイズも --ig-size CSS 変数を利用して変更できます。サポートされているサイズは、small (デフォルト)、medium、large です。次のコード スニペットは、異なるコンポーネント サイズを使用する方法を示しています。

igc-avatar {
    --ig-size: var(--ig-size-large);
}
css

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrAvatarModule, IgrAvatar } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrAvatarModule.register();

export default class AvatarSize extends React.Component<any, any> {

    constructor(props: any) {
        super(props);                   
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrAvatar initials='L' className='size-large'/>
                <IgrAvatar initials='M' className='size-medium'/>
                <IgrAvatar initials='S' className='size-small'/>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<AvatarSize/>);
tsxコピー

.size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

.size-large {
    --ig-size: var(--ig-size-large);
}

.sample {
    flex-direction: row;
    gap: 10px;
}
cssコピー

Edit in: Codesandbox

スタイル設定

IgrAvatar コンポーネントはいくつかの CSS パーツを公開し、スタイルを完全に制御できるようにします。

名前	説明
base	アバターの基本ラッパー。
initials	アバターのイニシャル ラッパー。
image	アバターの画像ラッパー。
icon	アバターのアイコン ラッパー。

igc-avatar::part(base) {
  --size: 60px;
  color: var(--ig-success-500-contrast);
  background: var(--ig-success-500);;
  border-radius: 20px;
}
css

EXAMPLE

Edit in: Codesandbox

API リファレンス

• IgrAvatar
• スタイル設定 & テーマ

その他のリソース

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)