> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/components/skeleton.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms-full.txt.

# Skeleton 骨架屏

在内容加载时展示结构占位。

## 基础用法


切换加载状态

内容加载

静态占位

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/skeleton/basic.tsx"
import { Button, Flex, Skeleton, Space, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function SkeletonBasic() {
  const [loading, setLoading] = useState(true);
  return (
    <Space direction="vertical" align="stretch">
      <Button variant="outline" onClick={() => setLoading(!loading)}>
        切换加载状态
      </Button>
      <Flex direction="column" gap="sm">
        <Text>内容加载</Text>
        <Skeleton loading={loading} avatar rows={3} rowWidths={['100%', '85%', '55%']} round>
          <p>项目内容已加载完成。</p>
        </Skeleton>
      </Flex>
      <Flex direction="column" gap="sm">
        <Text>静态占位</Text>
        <Skeleton active={false} title={false} rows={2} />
      </Flex>
    </Space>
  );
}
```

展开代码

## Skeleton API

| 属性                 | 类型                              | 默认值     | 说明           |
| ------------------ | ------------------------------- | ------- | ------------ |
| `loading / active` | `boolean`                       | `true`  | 展示占位 / 过渡动画  |
| `avatar / round`   | `boolean`                       | `false` | 头像占位 / 圆形条目  |
| `title`            | `boolean`                       | `true`  | 标题占位         |
| `titleWidth`       | `number \| string`              | `'38%'` | 标题宽度         |
| `rows`             | `number`                        | `3`     | 正文行数，最多 20 行 |
| `rowWidths`        | `readonly (number \| string)[]` | —       | 各行宽度         |
| `children`         | `ReactNode`                     | —       | 加载完成后展示的内容   |

## 类型

定义组件属性或组装列表时可导入相关类型。

```ts
import type { SkeletonProps } from '@ifhover/leaf-ui';
```

## 使用说明

loading 为 false 时展示 children。减少动画偏好以及 ConfigProvider 的 motion 设置会控制占位动画。