<Skeleton>Loading</Skeleton>
此组件基于 span 元素，并支持 常用外边距属性。
| 属性 | 类型 | 默认值 |
|---|---|---|
loading | 布尔值 | true |
width | 响应式<字符串> | 无默认值 |
minWidth | 响应式<字符串> | 无默认值 |
maxWidth | 响应式<字符串> | 无默认值 |
height | 响应式<字符串> | 无默认值 |
minHeight | 响应式<字符串> | 无默认值 |
maxHeight | 响应式<字符串> | 无默认值 |
使用 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>