Skeleton

내용이 들어올 위치를 미리 보여주는 자리 표시.

개요

미리보기

예시 언어동작 줄이기

variant

count

widgetSize

이름	타입	기본값	설명
`variant?`	`'row' \| 'card' \| 'widget'`	`row`	row는 목록 행(첫 가져오기 3행), card는 카드 해부, widget은 내용을 가린 위젯 틀.
`count?`	`1 \| 3 \| 5`	`3`	자리 표시 개수. 첫 가져오기는 3.
`widgetSize?`	`'s' \| 'm' \| 'l' \| 'xl'`	`m`	위젯 격자 크기 S 1×1 · M 2×1 · L 2×2 · XL 4×2. variant="widget"에서만.
그 밖의 속성	—	—	className·style은 받지 않는다. 나머지 네이티브 속성은 바깥 요소로 전달된다.

이렇게 · 이렇게 하지 않기

이렇게 빈 상태와 다른 모양이어야 “아직 오는 중”과 “없음”이 구분된다. 첫 가져오기는 3행으로 시작하고 도착하는 대로 바꾼다.

이렇게 최종 레이아웃과 같은 크기로 둔다. 내용이 들어와도 레이아웃이 움직이지 않는다.

이렇게 하지 않기 반짝임·맥동 애니메이션을 쓰지 않는다. Skeleton은 항상 정지 면이다.

이렇게 하지 않기 다시 불러올 때(이미 데이터가 있을 때) Skeleton으로 바꾸지 않는다. 데이터를 두고 aria-busy만 켠다.

토큰과 속성

이름	타입	기본값	설명
`variant?`	`'row' \| 'card' \| 'widget'`	`row`	row는 목록 행(첫 가져오기 3행), card는 카드 해부, widget은 내용을 가린 위젯 틀.
`count?`	`1 \| 3 \| 5`	`3`	자리 표시 개수. 첫 가져오기는 3.
`widgetSize?`	`'s' \| 'm' \| 'l' \| 'xl'`	`m`	위젯 격자 크기 S 1×1 · M 2×1 · L 2×2 · XL 4×2. variant="widget"에서만.
그 밖의 속성	—	—	className·style은 받지 않는다. 나머지 네이티브 속성은 바깥 요소로 전달된다.