Radix Homepage
Radix Homepage
主题主题基础组件基础组件图标图标颜色颜色
文档演练博客
Components

骨架

用相同形状的占位符替换内容，指示加载状态。

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

API 参考

¥API Reference

此组件基于 span 元素并支持 常用边距属性。

¥This component is based on the span element and supports 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

使用 width 和 height 属性手动控制骨架的大小。

¥Use the width and height props to manually control the size of the skeleton.

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

使用子元素

¥With children

使用 loading 属性控制是否显示骨架或其子项。Skeleton 在子组件隐藏时会保留其尺寸，并禁用交互元素。

¥Use the loading prop to control whether the skeleton or its children are displayed. Skeleton preserves the dimensions of children when they are hidden and disables interactive elements.

<Flex gap="4">

	<Skeleton loading={true}>

		<Switch defaultChecked />

	</Skeleton>



	<Skeleton loading={false}>

		<Switch defaultChecked />

	</Skeleton>

</Flex>

与文本一起使用

¥With text

将 Skeleton 与文本一起使用时，通常会包裹文本节点本身，而不是父元素。这确保文本被替换为相同大小的占位符：

¥When using Skeleton with text, you’d usually wrap the text node itself rather than the parent element. This ensures that the text is replaced with a placeholder of the same size:

<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>
Previous分隔符
Next滑块