Skeleton 스켈레톤

콘텐츠 로딩이 완료되기 전까지 자리표시자를 제공합니다. 자리표시 블록은 aria-hidden으로 스크린 리더에서 숨겨지고, 컨테이너는 aria-busy와 aria-live로 로딩 상태 변화를 알립니다. 유광 애니메이션은 prefers-reduced-motion을 존중합니다.

기본 사용법

기본 사용법

<script setup lang="ts">
import { ref } from 'vue'

const skeletonLoading = ref(true)
</script>

<template>
  <!-- 기본 사용법 -->
  <LhSkeleton :rows="3" :loading="skeletonLoading">
    <p>콘텐츠 로딩 완료: 새들은 높이 날아가고, 외로운 구름만 한가로이 가네.</p>
  </LhSkeleton>
  <!-- 로딩 상태 토글 -->
  <LhButton size="small" @click="skeletonLoading = !skeletonLoading">
    {{ skeletonLoading ? '콘텐츠 표시' : '스켈레톤 표시' }}
  </LhButton>
</template>

<script>
export default {
  data() {
    return { skeletonLoading: true }
  },
}
</script>

<template>
  <!-- 기본 사용법 -->
  <LhSkeleton :rows="3" :loading="skeletonLoading">
    <p>콘텐츠 로딩 완료: 새들은 높이 날아가고, 외로운 구름만 한가로이 가네.</p>
  </LhSkeleton>
  <!-- 로딩 상태 토글 -->
  <LhButton size="small" @click="skeletonLoading = !skeletonLoading">
    {{ skeletonLoading ? '콘텐츠 표시' : '스켈레톤 표시' }}
  </LhButton>
</template>

아바타 조합

아바타 조합

<script setup lang="ts">
</script>

<template>
  <LhSkeleton avatar :rows="2" />
</template>

<script>
export default {}
</script>

<template>
  <LhSkeleton avatar :rows="2" />
</template>

애니메이션 끄기

정적 스켈레톤

<script setup lang="ts">
</script>

<template>
  <LhSkeleton :rows="3" :animated="false" />
</template>

<script>
export default {}
</script>

<template>
  <LhSkeleton :rows="3" :animated="false" />
</template>

SkeletonItem 독립 자리표시 블록

SkeletonItem

<script setup lang="ts">
</script>

<template>
  <LhSkeletonItem variant="circle" />
  <LhSkeletonItem variant="rect" style="width: 120px; height: 60px" />
</template>

<script>
export default {}
</script>

<template>
  <LhSkeletonItem variant="circle" />
  <LhSkeletonItem variant="rect" style="width: 120px; height: 60px" />
</template>

Skeleton API

Props

프로퍼티	설명	타입	기본값
loading	로딩 상태 여부 (false일 때 default 슬롯을 렌더링)	boolean	true
rows	텍스트 줄 수	number	3
avatar	원형 아바타 자리표시 포함 여부	boolean	false
animated	애니메이션 활성화 여부	boolean	true
sx	sx 빠른 레이아웃 속성	LhSxProps	—

Slots

슬롯	설명
default	loading이 false일 때 렌더링되는 실제 콘텐츠

SkeletonItem API

Props

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

테마 변수

변수	설명	기본값
--lh-skeleton-bg	자리표시 블록 배경색	먹색(text-regular) 10% 투명 혼합
--lh-skeleton-highlight	유광 하이라이트 색	배경색을 흰색으로 45% 밝게
--lh-skeleton-radius	기본 둥근 모서리	--lh-border-radius-small

무장애

• 자리표시 블록은 aria-hidden="true"이며 스크린 리더에 읽히지 않습니다
• 컨테이너는 aria-busy="true" + aria-live="polite"이며, 로딩 완료 후 콘텐츠로 전환되면 자동으로 방송됩니다
• prefers-reduced-motion: reduce일 때 유광 애니메이션이 자동으로 꺼집니다

타입 정의

이 컴포넌트가 외부로 노출하는 TypeScript 타입 구조는 다음과 같습니다 (packages/components/skeleton/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 펼쳐 전체 정의를 확인하세요. 프로퍼티 설명은 위쪽 Props 표를 참조하세요):

LhSkeletonProps

export interface LhSkeletonProps {
  /** 로딩 상태 여부 (false일 때 default 슬롯의 실제 콘텐츠를 렌더링) */
  loading?: boolean
  /** 텍스트 줄 수 */
  rows?: number
  /** 원형 아바타 자리표시 포함 여부 */
  avatar?: boolean
  /** 애니메이션 활성화 여부 */
  animated?: boolean
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhSkeletonItemProps

export interface LhSkeletonItemProps {
  /** 자리표시 블록 모양 */
  variant?: LhSkeletonVariant
  /** 애니메이션 활성화 여부 */
  animated?: boolean
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhSkeletonVariant _{(출처: @lh-ui/share/core/skeleton)}

/** 스켈레톤 자리표시 블록 모양 */
export type LhSkeletonVariant = 'text' | 'rect' | 'circle'