Skeleton

불러올 콘텐츠의 형태를 미리 보여주는 자리 표시자입니다.

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

Live preview

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

모양행 수너비

애니메이션 중지

코드 보기

HTML

<sy-skeleton
  type="text"
  rows="3"
  width="100%"
  id="sample"
></sy-skeleton>

사용 가이드

콘텐츠를 불러오는 동안 최종 화면의 구조와 공간을 미리 유지합니다. 로딩이 끝났는데 데이터가 없다면 Empty로 전환하세요.

글·프로필·이미지

type의 text·avatar·image·gallery로 실제 콘텐츠와 비슷한 형태를 선택합니다.

버튼·표·트리

button·table·tree로 복잡한 영역의 형태를 보여주고 rows와 width를 조절하세요.

예제

본문 로딩

여러 줄의 텍스트가 들어올 영역을 표시합니다.

코드 보기

HTML

<sy-skeleton type="text" rows="4"></sy-skeleton>

프로필과 이미지

실제 콘텐츠가 들어올 모양에 맞춰 로딩 화면을 구성합니다.

코드 보기

HTML

<div style="display:grid;gap:16px;width:100%">
  <sy-skeleton type="avatar"></sy-skeleton>
  <sy-skeleton type="image"></sy-skeleton>
</div>

표 로딩

행과 열 구조를 유지하면서 데이터를 기다립니다.

코드 보기

HTML

<sy-skeleton type="table" rows="4"></sy-skeleton>

계층 데이터 로딩

트리 구조의 자리 표시자입니다.

코드 보기

HTML

<sy-skeleton type="tree" rows="4"></sy-skeleton>

움직임 제어

필요할 때 애니메이션을 멈추거나 다시 시작합니다.

코드 보기

HTML

<sy-skeleton
  type="text"
  rows="3"
  id="sample"
></sy-skeleton>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">움직임 중지</sy-button>
  <sy-button id="action-1" size="small">다시 시작</sy-button>
</div>
<output id="demo-result" 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;
  }) ?? '완료';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.stopAnimation();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.resetAnimation();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

애니메이션 없는 자리 표시자

disabled를 켜면 로딩 영역의 모양을 유지하며 움직임을 멈춥니다.

코드 보기

HTML

<sy-skeleton
  type="text"
  rows="3"
  width="100%"
  disabled
  id="sample"
></sy-skeleton>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "disabled": true
  });
</script>

기능별 예제

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

기능 찾기

사용 예제 · Overview

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

코드 보기

HTML

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

속성 · Disabled

설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.

코드 보기

HTML

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

속성 · Rows

설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.

코드 보기

HTML

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

속성 · Type

설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.

코드 보기

HTML

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

속성 · Width

설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.

코드 보기

HTML

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

메서드 · Stop & Reset Animation

예제 안의 버튼으로 메서드를 호출하고 실제 결과를 확인하세요.

코드 보기

HTML

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

API reference

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

`<sy-skeleton>`

Properties

Type	Default	Description
`'text' \| 'avatar' \| 'image' \| 'gallary' \| 'gallery' \| 'button' \| 'table' \| 'tree'`	`'text'`	실제 콘텐츠에 맞춘 자리 표시자 모양입니다.
`number`	`0`	텍스트·표·트리 등 반복되는 내용의 행 수입니다.
`string`	`'100%'`	레이블 영역 너비입니다. CSS 길이 값을 사용합니다.
`boolean`	`false`	Skeleton을 표시하면서 애니메이션만 멈춥니다.

Methods

Method	Returns	Description
	`Promise<void>`	Skeleton의 애니메이션을 멈춥니다.
	`Promise<void>`	Skeleton의 애니메이션을 다시 시작합니다.