# 骨架

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

```jsx
<Skeleton>加载中</Skeleton>
```

## [API 参考](#api-参考)

该组件基于 `span` 元素，并支持 [常见边距属性](/themes/docs/overview/layout#margin-props)。

| 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 |

## [示例](#示例)

### [尺寸](#尺寸)

使用宽度和高度属性手动控制骨架的大小。

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

### [带子元素](#带子元素)

使用 `loading` 属性控制是显示骨架还是其子元素。骨架在隐藏时保留子元素的尺寸，并禁用交互元素。

```jsx
<Flex gap="4">
  <Skeleton loading={true}>
    <Switch defaultChecked />
  </Skeleton>

  <Skeleton loading={false}>
    <Switch defaultChecked />
  </Skeleton>
</Flex>
```

### [带文本](#带文本)

在与文本一起使用骨架时，通常应该将文本节点本身包裹起来，而不是其父元素。这样确保文本被相同大小的占位符替换：

```jsx
<Container size="1">
  <Flex direction="column" gap="2">
    <Text>
      <Skeleton>罗马字母假文。</Skeleton>
    </Text>

    <Skeleton>
      <Text>罗马字母假文</Text>
    </Skeleton>
  </Flex>
</Container>
```

当包裹更长的段落时，差异会更加明显：

```jsx
<Container size="1">
  <Flex direction="column" gap="3">
    <Text>
      <Skeleton>罗马字母假文，主题是关于优雅。牠有美丽的吸引力，发展出更广泛的生活方式。</Skeleton>
    </Text>

    <Skeleton>
      <Text>罗马字母假文，主题是关于优雅。牠有美丽的吸引力，发展出更广泛的生活方式。</Text>
    </Skeleton>
  </Flex>
</Container>
```

<!--$-->

<!--/$-->