用相同形状的占位符替换内容，以指示加载状态。
<Skeleton>加载中</Skeleton>
该组件基于 span 元素，并支持 常见边距属性。
| Prop | Type | Default |
|---|---|---|
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 |
使用宽度和高度属性手动控制骨架的大小。
<Skeleton width="48px" height="48px" />
使用 loading 属性控制是显示骨架还是其子元素。骨架在隐藏时保留子元素的尺寸，并禁用交互元素。
<Flex gap="4">
<Skeleton loading={true}>
<Switch defaultChecked />
</Skeleton>
<Skeleton loading={false}>
<Switch defaultChecked />
</Skeleton>
</Flex>
在与文本一起使用骨架时，通常应该将文本节点本身包裹起来，而不是其父元素。这样确保文本被相同大小的占位符替换：
<Container size="1">
<Flex direction="column" gap="2">
<Text>
<Skeleton>罗马字母假文。</Skeleton>
</Text>
<Skeleton>
<Text>罗马字母假文</Text>
</Skeleton>
</Flex>
</Container>
当包裹更长的段落时，差异会更加明显：
<Container size="1">
<Flex direction="column" gap="3">
<Text>
<Skeleton>
罗马字母假文，主题是关于优雅。牠有美丽的吸引力，发展出更广泛的生活方式。
</Skeleton>
</Text>
<Skeleton>
<Text>
罗马字母假文，主题是关于优雅。牠有美丽的吸引力，发展出更广泛的生活方式。
</Text>
</Skeleton>
</Flex>
</Container>