Avatar

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

<sy-avatar>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

사용자 이름색상크기

선택 허용비활성화

코드 보기

HTML

<sy-avatar
  text="Alex Kim"
  variant="purple"
  size="medium"
></sy-avatar>

사용 가이드

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

표시 우선순위

image
icon
letter
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>

기능별 예제

18개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Group Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.