Skeleton

실제 콘텐츠를 불러오는 동안 해당 영역의 레이아웃 형태를 임시로 보여줍니다. 데이터가 로딩되고 있음을 직관적으로 인지할 수 있도록 돕고, 콘텐츠가 갑자기 나타날 때 발생할 수 있는 화면 깜빡임을 방지합니다.

Design

Web

iOS

Android

WantedSkeletonCircle

원형 Skeleton 컴포넌트입니다. 내부적으로 WantedSkeletonRectangle을 CircleShape로 설정하여 사용합니다.

WantedSkeletonCircle(
    modifier = Modifier.size(100.dp)
)

이름	타입	설명
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`color`	Color	배경 색상입니다.

사각형 Skeleton 컴포넌트입니다. Shimmer 애니메이션이 자동으로 적용됩니다.

WantedSkeletonRectangle(
    modifier = Modifier.size(200.dp, 50.dp),
    shape = RoundedCornerShape(8.dp)
)

Parameters

텍스트를 표현하는 Skeleton 컴포넌트입니다. 다양한 길이 비율과 정렬 방식을 지원하며, Shimmer 애니메이션이 자동으로 적용됩니다.

WantedSkeletonText(
    length = WantedSkeletonLength.Ratio75,
    align = WantedSkeAlign.Left
)

Parameters

커스텀 비율 기반의 텍스트를 표현하는 Skeleton 컴포넌트입니다. widthRadio 파라미터를 통해 너비 비율을 직접 지정할 수 있습니다.

Parameters