Skeleton 스켈레톤

원문 보기 위키 갱신 2026.10.11

콘텐츠가 로딩되는 동안 자리 표시 그래픽을 보여 주는 컴포넌트예요.

출처: 문서

본문

콘텐츠 로딩 과정에서 자리 표시 그래픽 묶음을 보여 주는 데 사용해요.

언제 사용하나요?

로딩을 기다려야 하는 자리에 스켈레톤을 배치하면, 상황에 따라서는 Loading보다 시각 효과가 더 좋아요.

기본 사용법

:::demo 기본 배치는 제목 하나 + 문단 세 개로, 제목 너비는 40%, 가운데 두 문단은 100%, 마지막 문단은 60%이에요.

<template>
  <d-skeleton></d-skeleton>
</template>

:::

배치 커스터마이즈

:::demo 기본 배치로 요구를 충족하지 못할 때는 배치 구조를 직접 정할 수 있어요. class와 style로 너비·높이 같은 스타일을 자유롭게 조정해요.

<template>
  <d-button @click="loading = !loading">显示/隐藏</d-button>
  <br />
  <br />
  <d-skeleton :loading="loading">
    <div>
      <d-avatar name="MyAvatar" :width="36" :height="36"></d-avatar>
      <p style="width: 150px;">内容比较短的一段文字</p>
      <d-button variant="solid">一个按钮</d-button>
    </div>
    <template #placeholder>
      <d-skeleton-item variant="circle" style="width: 36px; height: 36px;"></d-skeleton-item>
      <d-skeleton-item style="width: 150px; height: 24px; margin: 1rem 0;"></d-skeleton-item>
      <d-skeleton-item round style="width: 90px; height: 32px;"></d-skeleton-item>
    </template>
  </d-skeleton>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const loading = ref(true);

    return { loading };
  },
});
</script>

:::

세분화 모드

:::demo d-skeleton-item 컴포넌트는 circle、square 두 가지 추상 유형과 image라는 구상 유형을 제공해요. circle과 image 두 유형에는 size 파라미터가 있고 세 가지 크기가 내장되어 있어요. d-skeleton 컴포넌트는 round와 show-animation 파라미터로 각각 둥근 모서리와 애니메이션을 설정해요.

<template>
  <div class="demo-skeleton-wrapper">
    <div>
      大小：
      <d-radio-group direction="row" v-model="size">
        <d-radio v-for="item in sizeList" :key="item.label" :value="item.value">
          {{ item.label }}
        </d-radio>
      </d-radio-group>
    </div>
    <div>
      圆角：
      <d-switch v-model="round" />
    </div>
    <div>
      动画：
      <d-switch v-model="animate" />
    </div>
  </div>
  <d-skeleton :round="round" :show-animation="animate">
    <template #placeholder>
      <d-skeleton-item></d-skeleton-item>
      <br />
      <d-skeleton-item variant="circle" :size="size"></d-skeleton-item>
      <br />
      <d-skeleton-item variant="image" :size="size"></d-skeleton-item>
    </template>
  </d-skeleton>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue';

export default defineComponent({
  setup() {
    const size = ref('md');
    const round = ref(false);
    const animate = ref(true);
    const sizeList = [
      {
        label: 'Small',
        value: 'sm',
      },
      {
        label: 'Middle',
        value: 'md',
      },
      {
        label: 'Large',
        value: 'lg',
      },
    ];

    return { size, round, animate, sizeList };
  },
});
</script>

<style>
.demo-skeleton-wrapper {
  display: flex;
  margin-bottom: 1rem;
}
.demo-skeleton-wrapper > div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 1.2rem;
  margin-bottom: 12px;
}
</style>

:::

Skeleton 파라미터

파라미터	타입	기본값	설명	Demo 링크
loading	`boolean`	`true`	스켈레톤 표시 여부. `false`를 넘기면 로딩이 끝난 뒤의 내용을 보여 줘요	배치 커스터마이즈
show-animation	`boolean`	`true`	애니메이션을 켤지 여부	세분화 모드
round	`boolean`	`false`	둥근 모서리 스타일을 표시할지 여부	세분화 모드
rows	`number`	`3`	기본 배치에서 문단 표시 행 수를 설정할 수 있어요

Skeleton 슬롯

슬롯명	설명
default	로딩이 끝난 뒤 표시할 내용
placeholder	스켈레톤 구조를 직접 정의해요

SkeletonItem 파라미터

파라미터	타입	기본값	설명	Demo 링크
variant	IVariant	`square`	스켈레톤 형태	세분화 모드
size	ISize	`md`	`image`와 `circle` 형태에 적용되는 세 가지 내장 크기	세분화 모드

SkeletonItem 타입 정의

IVariant

type IVariant = 'image' | 'circle' | 'square';

ISize

type ISize = 'lg' | 'md' | 'sm';

더 알아보기 (Learn more)

d-skeleton은 로딩 중인 화면에 실제 레이아웃과 비슷한 자리 표시를 그려 주는 컴포넌트예요. 기본 배치가 어색하다면 #placeholder 슬롯과 d-skeleton-item으로 실제 콘텐츠 모양을 그대로 흉내 내는 편이 좋아요.