Themes
Advanced
Utils
Components

Skeleton

로딩 상태를 나타내는 동일한 모양의 플레이스홀더로 콘텐츠를 대체합니다.

View sourceReport an issueView in Playground
<Skeleton>Loading</Skeleton>

API Reference

이 컴포넌트는 span 요소를 기반으로 하며 common margin props를 지원합니다.

PropTypeDefault
loading
boolean
true
width
Responsive<string>
No default value
minWidth
Responsive<string>
No default value
maxWidth
Responsive<string>
No default value
height
Responsive<string>
No default value
minHeight
Responsive<string>
No default value
maxHeight
Responsive<string>
No default value

Examples

Size

너비와 높이 props를 사용하여 스켈레톤의 크기를 수동으로 조절합니다.

<Skeleton width="48px" height="48px" />

With children

loading prop을 사용하여 스켈레톤 또는 자식 요소가 표시되는지 제어합니다. 스켈레톤은 숨겨질 때 자식의 치수를 유지하고 상호작용 요소를 비활성화합니다.

<Flex gap="4">

	<Skeleton loading={true}>

		<Switch defaultChecked />

	</Skeleton>



	<Skeleton loading={false}>

		<Switch defaultChecked />

	</Skeleton>

</Flex>

With text

스켈레톤을 텍스트와 함께 사용할 때는 일반적으로 텍스트 노드 자체를 감싸는 것이 좋습니다. 이렇게 하면 텍스트가 동일한 크기의 플레이스홀더로 대체됩니다.

<Container size="1">

	<Flex direction="column" gap="2">

		<Text>

			<Skeleton>Lorem ipsum dolor sit amet.</Skeleton>

		</Text>



		<Skeleton>

			<Text>Lorem ipsum dolor sit amet</Text>

		</Skeleton>

	</Flex>

</Container>

The difference is especially noticeable when wrapping longer paragraphs:

<Container size="1">

	<Flex direction="column" gap="3">

		<Text>

			<Skeleton>

				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque

				felis tellus, efficitur id convallis a, viverra eget libero. Nam magna

				erat, fringilla sed commodo sed, aliquet nec magna.

			</Skeleton>

		</Text>



		<Skeleton>

			<Text>

				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque

				felis tellus, efficitur id convallis a, viverra eget libero. Nam magna

				erat, fringilla sed commodo sed, aliquet nec magna.

			</Text>

		</Skeleton>

	</Flex>

</Container>
PreviousSeparator
NextSlider
Edit this page on GitHub.