Avatar아바타

아바타는 사용자나 사물을 나타내는 데 사용되며, 이미지, 아이콘, 문자 등 다양한 형태를 지원합니다.

사용법

컴포넌트 가져오기:

import 'mdui/components/avatar.js';

컴포넌트의 TypeScript 타입 가져오기:

import type { Avatar } from 'mdui/components/avatar.js';

사용 예시:

<mdui-avatar src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>

예시

이미지 아바타

src 속성을 사용해 이미지 URL을 아바타로 지정하거나, default 슬롯에 <img> 요소를 제공하여 아바타로 사용합니다.

<mdui-avatar src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>

<mdui-avatar>
  <img src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4" alt="이미지 아바타 예시"/>
</mdui-avatar>

소스

fit 속성을 사용해 이미지가 컨테이너 상자에 맞는 방식을 정의할 수 있습니다. 이는 네이티브 object-fit과 유사합니다.

아이콘 아바타

icon 속성을 사용해 Material Icons 아이콘을 아바타로 지정하거나, default 슬롯에 아이콘 요소를 제공하여 아바타로 사용합니다.

<mdui-avatar icon="people_alt"></mdui-avatar>

<mdui-avatar>
  <mdui-icon name="people_alt"></mdui-icon>
</mdui-avatar>

소스

문자 아바타

default 슬롯에 임의의 텍스트를 사용해 아바타로 만들 수 있습니다.

<mdui-avatar>A</mdui-avatar>

소스

API

속성

HTML 속성	JavaScript 프로퍼티	유형	기본값
`src`	`src`	`string`	-
아바타 이미지의 URL입니다.
`fit`	`fit`	`'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'`	-
이미지가 컨테이너에 맞춰지는 방식을 지정합니다. 네이티브 `object-fit` 속성과 동일합니다. 사용 가능한 값은 다음과 같습니다: `contain`: 이미지의 원본 비율을 유지하며, 콘텐츠가 비율에 맞게 확대/축소됩니다. `cover`: 이미지의 원본 비율을 유지하지만, 일부 콘텐츠가 잘릴 수 있습니다. `fill`: 기본값, 이미지의 원본 비율을 유지하지 않고 콘텐츠가 늘어나 컨테이너 전체를 채웁니다. `none`: 이미지의 원본 크기를 유지하며, 콘텐츠가 확대/축소되거나 늘어나지 않습니다. `scale-down`: 이미지의 원본 비율을 유지하며, 콘텐츠 크기는 `none` 또는 `contain` 중 더 작은 것과 동일합니다.
`icon`	`icon`	`string`	-
아바타의 Material Icons 아이콘 이름입니다.
`label`	`label`	`string`	-
아바타의 대체 텍스트입니다.

Slots

이름
기본
아바타 콘텐츠를 사용자 정의합니다. 문자, 텍스트, `<img>` 요소, 아이콘 등이 될 수 있습니다.

CSS Parts

이름
`image`
이미지를 아바타로 사용할 때 컴포넌트 내부의 `<img>` 요소
`icon`
아이콘을 아바타로 사용할 때 컴포넌트 내부의 `<mdui-icon>` 요소

CSS 사용자 정의 속성

이름
`--shape-corner`
컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.

이전 장

기타

다음 장

Badge 배지