用相同形状的占位符替换内容，表示加载状态。
<Skeleton>Loading</Skeleton>
此组件基于 span 元素，并支持 常见的边距属性.
| 属性 | 类型 | 默认值 |
|---|---|---|
loading | boolean | true |
width | Responsive<string> | 无默认值 |
minWidth | Responsive<string> | 无默认值 |
maxWidth | Responsive<string> | 无默认值 |
height | Responsive<string> | 无默认值 |
minHeight | Responsive<string> | 无默认值 |
maxHeight | Responsive<string> | 无默认值 |
使用 width 和 height 属性手动控制骨架的尺寸。
<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>Lorem ipsum dolor sit amet.</Skeleton>
</Text>
<Skeleton>
<Text>Lorem ipsum dolor sit amet</Text>
</Skeleton>
</Flex>
</Container>
这种区别在包装更长的段落时尤其明显
<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>