Skeleton 스켈레톤

콘텐츠 로딩을 기다려야 할 때 사용하는 자리 표시자입니다.

기본 사용법

기본 사용법

import { LhSkeleton } from '@lh-ui/react'

export default function Demo() {
  return <LhSkeleton avatar rows={2} sx={{ w: 300 }} />
}

Skeleton Props

프로퍼티	설명	타입	옵션	기본값
loading	스켈레톤 표시 여부(false이면 자식 노드를 렌더링)	boolean	—	true
rows	텍스트 줄 수	number	—	3
avatar	원형 아바타 자리 표시 포함 여부	boolean	—	false
animated	애니메이션 활성화 여부	boolean	—	true
sx	간편 레이아웃 프로퍼티	SxProps	—	—

SkeletonItem Props

LhSkeletonItem은 개별적으로 내보낸 자리 표시 블록으로, 단독으로 사용해 임의의 스켈레톤 구조를 조합할 수 있습니다.

프로퍼티	설명	타입	옵션	기본값
variant	자리 표시 블록 모양	'text' | 'rect' | 'circle'	—	'text'
animated	애니메이션 활성화 여부	boolean	—	true
className	추가 클래스명	string	—	—
style	추가 인라인 스타일	CSSProperties	—	—
sx	간편 레이아웃 프로퍼티	SxProps	—	—

import { LhSkeletonItem } from '@lh-ui/react'

export default function Demo() {
  return (
    <div style={{ display: 'flex', gap: 16, width: 300 }}>
      <LhSkeletonItem variant="circle" />
      <div style={{ flex: 1 }}>
        <LhSkeletonItem style={{ marginBottom: 8 }} />
        <LhSkeletonItem style={{ width: '60%' }} />
      </div>
    </div>
  )
}

행 너비 알고리즘

rows > 1이면 마지막 줄이 60%로 줄어들어 실제 단락 조판을 흉내 냅니다. 루트 요소는 반드시 확정된 너비를 가져야 합니다(행 너비가 백분율이기 때문).

접근성

스켈레톤 컨테이너는 aria-busy="true" + aria-live="polite"를 출력하고, 자리 표시 블록은 전부 aria-hidden입니다. 데이터가 준비되면 스크린 리더가 실제 콘텐츠를 다시 읽어줍니다. prefers-reduced-motion에서는 애니메이션이 정적 자리 표시로 자동 저하됩니다.

스타일

import '@lh-ui/react/style/skeleton'