syidaxdesign system
홈 가격 내 정보
ComponentsData display

Avatar

사람이나 팀을 이미지, 아이콘 또는 이니셜로 표현합니다.

<sy-avatar>설치 안내 기본 사용법
Live preview
컴포넌트를 조작하면 여기에 결과가 표시됩니다.
코드 보기
HTML
<sy-avatar
  text="Alex Kim"
  variant="purple"
  size="medium"
></sy-avatar>

사용 가이드

#

사람·조직을 이름과 함께 빠르게 식별하게 합니다. 사용할 수 있는 표현 중 우선순위가 높은 값이 표시됩니다.

표시 우선순위

  1. image
  2. icon
  3. letter
  4. text의 이니셜
이미지가 없을 때
이니셜을 표시할 수 있도록 이름을 함께 제공하세요.
프로필 이동
clickable의 selected 이벤트에서 앱이 직접 화면 이동을 처리합니다.
여러 사용자
그룹의 maxCount를 넘은 사용자는 더보기 영역에 표시됩니다. stack 또는 grid 배치를 선택하세요.

예제

#

크기

맥락에 맞는 세 가지 크기를 제공합니다.

코드 보기
HTML
<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-avatar
    text="Alex Kim"
    variant="purple"
    size="small"
  ></sy-avatar>
  <sy-avatar
    text="Alex Kim"
    variant="purple"
    size="medium"
  ></sy-avatar>
  <sy-avatar
    text="Alex Kim"
    variant="purple"
    size="large"
  ></sy-avatar>
</div>

프로필 이미지

image에 이미지 URL을 지정합니다. 이름도 함께 전달하세요.

코드 보기
HTML
<sy-avatar
  text="Alex Kim"
  variant="purple"
  image="/assets/examples/avatar.svg"
></sy-avatar>

이니셜과 색상

팀이나 사용자를 구분하되 색상만으로 의미를 전달하지 마세요.

코드 보기
HTML
<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-avatar text="Alex Kim" variant="purple"></sy-avatar>
  <sy-avatar text="Alex Kim" variant="blue"></sy-avatar>
  <sy-avatar text="Alex Kim" variant="teal"></sy-avatar>
  <sy-avatar text="Alex Kim" variant="orange"></sy-avatar>
</div>

선택과 비활성화

클릭 가능한 아바타는 키보드로도 선택할 수 있습니다.

코드 보기
HTML
<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-avatar
    text="Alex Kim"
    variant="purple"
    clickable
  ></sy-avatar>
  <sy-avatar
    text="Alex Kim"
    variant="purple"
    clickable
    disabled
  ></sy-avatar>
</div>

그룹과 더보기

최대 세 명을 표시하고 나머지는 더보기로 확인합니다.

코드 보기
HTML
<sy-avatar-group maxcount="3" clickable>
  <sy-avatar text="Alex Kim" variant="purple"></sy-avatar>
  <sy-avatar text="Jin Park" variant="blue"></sy-avatar>
  <sy-avatar text="Min Lee" variant="teal"></sy-avatar>
  <sy-avatar text="Sam Cho" variant="orange"></sy-avatar>
  <sy-avatar text="Yun Han" variant="magenta"></sy-avatar>
</sy-avatar-group>

그리드 배치

겹치지 않는 목록 형태로 배치합니다.

코드 보기
HTML
<sy-avatar-group variant="grid">
  <sy-avatar text="Alex Kim" variant="purple"></sy-avatar>
  <sy-avatar text="Jin Park" variant="blue"></sy-avatar>
  <sy-avatar text="Min Lee" variant="teal"></sy-avatar>
  <sy-avatar text="Sam Cho" variant="orange"></sy-avatar>
  <sy-avatar text="Yun Han" variant="magenta"></sy-avatar>
</sy-avatar-group>

이벤트와 전달 값

컴포넌트를 조작하고 최근 이벤트의 이름과 detail 값을 확인하세요. 코드에는 이 컴포넌트와 하위 구성 요소가 보내는 이벤트의 구독 방법이 모두 포함되어 있습니다.

코드 보기
HTML
<sy-avatar
  text="Alex Kim"
  variant="purple"
  size="medium"
></sy-avatar>
<output id="demo-events" aria-live="polite">컴포넌트를 조작하면 최근 이벤트와 전달 값이 표시됩니다.
</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  for (const name of ["selected", "disableStatus"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

아바타 설명

tooltipContent에 전체 이름이나 역할을 적습니다. 아바타에 포인터를 올려 확인하세요.

코드 보기
HTML
<sy-avatar
  text="Alex Kim"
  variant="purple"
  size="medium"
  tooltipcontent="Alex Kim · 제품 디자인 담당"
  id="supplement-1"
></sy-avatar>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "tooltipContent": "Alex Kim · 제품 디자인 담당"
  });
</script>

API reference

#

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

<sy-avatar>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalse사용자 선택을 허용하고 selected 이벤트를 전달합니다.
booleanfalse사용자 조작과 키보드 포커스를 차단합니다.
string''프로필 이미지 URL입니다.
string''프로필에 표시할 SVG 문자열입니다.
string''이니셜을 계산할 사용자 이름입니다.
string''직접 지정한 최대 두 글자 이니셜입니다.
| 'lightgray' | 'red' | 'orange' | 'yellow' | 'lime' | 'green' | 'teal' | 'blue' | 'purple' | 'magenta' | 'darkgray''lightgray'컴포넌트의 표시 스타일입니다.
'small' | 'medium' | 'large''medium'컴포넌트의 크기입니다.
string''마우스를 올리면 표시할 사용자 설명입니다.

Events

EventDetailDescription
CustomEvent<{ letter: string; text: string; icon: string; image: string; }>사용자가 항목을 선택했을 때 발생합니다.
CustomEvent<{ disabled: boolean }>이벤트의 detail에서 결과를 확인하세요.

<sy-avatar-group>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalse사용자 선택을 허용하고 selected 이벤트를 전달합니다.
numberInfinity as any화면에 표시할 최대 인원입니다. 나머지는 더보기로 표시합니다.
'small' | 'medium' | 'large''medium'컴포넌트의 크기입니다.
'stack' | 'grid''stack'stack은 겹침, grid는 나란히 배치합니다.

Events

EventDetailDescription
CustomEvent<{ letter: string; text: string; icon: string; image: string; }>사용자가 항목을 선택했을 때 발생합니다.

Slots

SlotDescription
컴포넌트의 본문 또는 자식 항목입니다.
Design SystemTab 이동 Enter 열기