Skeleton 스켈레톤

콘텐츠 로딩 중의 자리 표시입니다. LhSkeleton은 조합형 자리 표시 (아바타 + 텍스트 행)를, LhSkeletonItem은 모양별 자유 조립을 제공합니다.

스켈레톤

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 24px; align-items: flex-start; flex-wrap: wrap">
      <div style="width: 260px">
        <p class="demo-note">avatar + rows + animated</p>
        <LhSkeleton :loading="loading" :rows="3" avatar animated>
          <div>
            <strong>계산행려도</strong>
            <p>범관 · 북송. 우점준 기법으로 산석을 그려 기세가 장엄합니다.</p>
          </div>
        </LhSkeleton>
      </div>
      <div style="width: 260px">
        <p class="demo-note">SkeletonItem 자유 조립 모양</p>
        <LhSkeletonItem variant="rect" style="width: 100%; height: 120px" animated />
        <LhSkeletonItem variant="text" style="margin-top: 12px" animated />
        <div class="demo-row" style="gap: 12px; margin-top: 12px">
          <LhSkeletonItem variant="circle" style="width: 40px; height: 40px" animated />
          <LhSkeletonItem variant="text" style="flex: 1" animated />
        </div>
      </div>
    </div>
    <p class="demo-note">loading=false이면 실제 콘텐츠를 렌더링합니다</p>
    <LhSkeleton :loading="false" :rows="2">
      <p>이것이 실제 콘텐츠입니다: loading이 꺼지면 스켈레톤이 자리를 슬롯에 내어줍니다.</p>
    </LhSkeleton>
    <LhButton size="small" style="margin-top: 12px" @click="toggle">
      {{ loading ? '로딩 상태 끄기' : '다시 로딩' }}
    </LhButton>
  </div>
</template>

<script>
export default {
  data: () => ({
    loading: true,
  }),
  methods: {
    toggle() {
      this.loading = !this.loading
    },
  },
}
</script>

Skeleton Props

프로퍼티	설명	타입	기본값
loading	로딩 상태 여부 (false이면 default 슬롯의 실제 콘텐츠를 렌더링)	boolean	false
rows	텍스트 행 수	number	—
avatar	원형 아바타 자리 표시 포함 여부	boolean	false
animated	애니메이션 활성화 여부	boolean	false
sx	sx 레이아웃 단축 속성	—	—

SkeletonItem Props

프로퍼티	설명	타입	기본값
variant	자리 표시 블록 모양	'text' \| 'rect' \| 'circle'	'text'
animated	애니메이션 활성화 여부	boolean	false
sx	sx 레이아웃 단축 속성	—	—

슬롯

LhSkeleton 기본 슬롯: loading=false일 때 렌더링되는 실제 콘텐츠입니다.