React Avatar

Ignite UI for React 애플리케이션에서 이니셜, 이미지 또는 아이콘을 표시하는 데 도움이 됩니다.

React 아이콘 아바타 예시

EXAMPLE

TSX

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

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

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>';

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

    constructor(props: any) {
        super(props);
        registerIconFromText("home", homeIcon, "material");
    }

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

// 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 install igniteui-react
cmd

그런 다음 다음과 같이 와 필요한 CSS를 가져와야 IgrAvatar 합니다.

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

Ignite UI for React에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

​IgrAvatar 이미지, 이니셜 또는 아이콘을 포함한 기타 콘텐츠를 표시할 수 있습니다. an을 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의 세 가지 모양을 지원합니다. 아바타의 기본 모양은 square 이며 shape 속성을 통해 변경할 수 있습니다.

EXAMPLE

TSX

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

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

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>';

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

    constructor(props: any) {
        super(props);           
        registerIconFromText("home", homeIcon, "material");
    }

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

// 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
• Styling & Themes

추가 리소스

• Ignite UI for React 포럼
• Ignite UI for React GitHub