Web Components 아바타

Ignite UI for Web Components 아바타는 응용 프로그램에 이니셜, 이미지 또는 아이콘을 표시하는 데 도움이 됩니다.

Web Components 아이콘 아바타 예

import { defineComponents, IgcAvatarComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcAvatarComponent, IgcIconComponent);
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 class IconAvatar {
    constructor() {
        registerIconFromText("home", homeIcon, "material");
    }
}

new IconAvatar();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Icon Avatar</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-avatar>
        <igc-icon name="home" collection="material"></igc-icon>
      </igc-avatar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

용법

먼저 다음 명령을 실행하여 Ignite UI for Web Components npm 패키지를 설치해야 합니다.

npm install igniteui-webcomponents
cmd

import { defineComponents, IgcAvatarComponent } from 'igniteui-webcomponents';

defineComponents(IgcAvatarComponent);
ts

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

IgcAvatarComponent는 이미지, 이니셜 또는 아이콘을 포함한 기타 콘텐츠를 표시할 수 있습니다. IgcAvatarComponent 선언은 다음과 같이 간단합니다.

<igc-avatar></igc-avatar>
html

아바타에는 상황에 따라 다양한 콘텐츠를 렌더링할 수 있는 여러 속성이 있습니다. 아바타의 경계에 콘텐츠를 표시하는 가장 기본적인 방법은 여는 태그와 닫는 태그 사이에 콘텐츠를 제공하는 것입니다.

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

머리 글자

initials 속성이 설정되면 아바타의 모든 하위 요소가 무시되고 이 속성에 전달된 문자열이 표시됩니다.

<!-- Initials("AZ") will be displayed instead of the icon. -->

<igc-avatar initials="AZ">
  <igc-icon name="home"></igc-icon>
</igc-avatar>
html

import { defineComponents, IgcAvatarComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcAvatarComponent, IgcIconComponent);
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 class InitialsAvatar {
    constructor() {
        registerIconFromText("home", homeIcon, "material");
    }
}

new InitialsAvatar();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Initials Avatar</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-avatar initials="AZ">
        <igc-icon name="home" collection="material"></igc-icon>
      </igc-avatar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

영상

src 속성에 정적 자산에 대한 유효한 URL이 할당되면 아바타는 이미지를 표시할 수도 있습니다. 이 경우 initials 값은 무시되고 하위 요소는 렌더링되지 않습니다.

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

import { defineComponents, IgcAvatarComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcAvatarComponent, IgcIconComponent);
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 class ImageAvatar {
    constructor() {
        registerIconFromText("home", homeIcon, "material");
    }
}

new ImageAvatar();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Image Avatar</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-avatar
        initials="AZ"
        src="https://static.infragistics.com/xplatform/images/people/men/1.jpg"
        alt="A photo of a man.">
        <igc-icon name="home" collection="material"></igc-icon>
      </igc-avatar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

모양

아바타는 circle, rounded, square의 세 가지 모양을 지원합니다. 아바타의 기본 모양은 square 이며 shape 속성을 통해 변경할 수 있습니다.

import { defineComponents, IgcAvatarComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcAvatarComponent, IgcIconComponent);
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 class AvatarShape {
    constructor() {
        registerIconFromText("home", homeIcon, "material");
    }
}

new AvatarShape();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Avatar Shape</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-avatar shape="rounded">
        <igc-icon name="home" collection="material"></igc-icon>
      </igc-avatar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

크기

모양 외에도--ig-size CSS 변수를 활용하여 아바타의 크기를 변경할 수도 있습니다. 지원되는 크기는 small (기본값), medium 및 large 입니다. 다음 코드 조각은 다양한 구성요소 크기를 사용하는 방법을 보여줍니다.

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

import { defineComponents, IgcAvatarComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import "./AvatarSize.css";

defineComponents(IgcAvatarComponent, IgcIconComponent);
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 class AvatarSize {
    constructor() {
        registerIconFromText("home", homeIcon, "material");
    }
}

new AvatarSize();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Avatar Size</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-avatar class="size-large" initials="L"></igc-avatar>
      <igc-avatar class="size-medium" initials="M"></igc-avatar>
      <igc-avatar class="size-small" initials="S"></igc-avatar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

.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

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

스타일링

The IgcAvatarComponent component exposes several CSS parts, giving you full control over its style:

이름	설명
`base`	The base wrapper of the avatar.
`initials`	The initials wrapper of the avatar.
`image`	The image wrapper of the avatar.
`icon`	The icon wrapper of the avatar.

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

Web Components 아바타

Web Components 아이콘 아바타 예

용법

머리 글자

영상

모양

크기

스타일링

API 참조

추가 리소스