Skeleton
콘텐츠 구조가 불러와지는 동안 자리를 유지합니다.
- 성숙도
- 후보
- 소스 경로
components/ui/skeleton.tsx- 소스
- 소스
실제 미리보기
사용할 때
사용 기준
최종 레이아웃의 크기를 알고 짧게 기다릴 때 씁니다.
사용하지 않을 때
오래 걸리는 작업의 진행률이나 빈 상태를 대신하지 않습니다.
변형과 상태
loading고정 예시최종 콘텐츠와 비슷한 크기로 배치되는지 확인합니다.
reduced-motion환경에서 확인동작 줄이기에서 정적인 면으로 남는지 확인합니다.
운영체제나 브라우저 설정을 바꾼 뒤 이 상태를 확인합니다.
접근성
보조 기술에서는 항상 숨기고 별도 상태 문구로 로딩을 알립니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
className | string | 아니요 | 구체적인 플레이스홀더 크기와 배치에 씁니다. |
style | CSSProperties | 아니요 | 알려진 최종 크기를 직접 지정할 때 씁니다. |
사용 예시
지원 importimport { Skeleton } from "@/components/ui/skeleton"
<Skeleton style={{ height: 48 }} />