Skeleton
Skeleton (스켈레톤)
Skeleton은 콘텐츠가 로딩되는 동안 자리 표시자(placeholder)를 렌더링할 때 사용해요. 로딩이 끝나면 실제 콘텐츠로 자연스럽게 전환돼요.
출처: 문서
본문
사용법 (Usage)
import { Skeleton, SkeletonCircle, SkeletonText } from "@chakra-ui/react"
<Stack gap="6" maxW="xs">
<HStack width="full">
<SkeletonCircle size="10" />
<SkeletonText noOfLines={2} />
</HStack>
<Skeleton height="200px" />
</Stack>
예시 (Examples)
피드 (Feed)
Skeleton 컴포넌트를 사용해 피드(feed) 스켈레톤을 만들 수 있어요.
텍스트 (Text)
SkeletonText 컴포넌트를 사용해 텍스트용 스켈레톤을 만들 수 있어요.
children과 함께 (With Children)
콘텐츠가 로딩되는 동안 스켈레톤을 보여주려면 loading prop을 사용해요.
변형 (Variants)
variant prop을 사용해 Skeleton의 시각적 스타일을 바꿀 수 있어요.
콘텐츠 로딩 (Content Loading)
loading이 false로 바뀌면 Skeleton 컴포넌트는 페이드 인(fade in)돼요.
시작·끝 색상 (Start and End Color)
--start-color와 --end-color CSS 변수를 사용해 스켈레톤의 시작·끝 색상을 바꿀 수 있어요.
Props
Skeleton 컴포넌트에서 사용 가능한 props는 공식 문서에서 확인할 수 있어요.