---
title: Skeleton 骨架屏 (done)
order: 40
group:
  path: /components
nav:
  title: 组件
  path: /components
---

## 使用

### 基本使用

```jsx
import React from 'react';
import { Skeleton } from 'quanta-design';

export default () => <Skeleton />;
```

### 复杂组合

```jsx
import React from 'react';
import { Skeleton } from 'quanta-design';

export default () => <Skeleton avatar paragraph={{ rows: 4 }} />;
```

### 动画效果

```jsx
import React from 'react';
import { Skeleton } from 'quanta-design';

export default () => <Skeleton active />;
```

### 包含子组件

```jsx
import React, { useState } from 'react';
import { Skeleton, Button } from 'quanta-design';

export default () => {
  const [loading, setLoading] = useState(false);

  const showSkeleton = () => {
    setLoading(true);
    setTimeout(() => setLoading(false), 2000);
  };

  return (
    <div>
      <Skeleton loading={loading}>
        <h4>打工人</h4>
        <p>
          打工人，打工魂，打工都是人上人。打工人，打工魂，打工都是人上人。打工人，打工魂，打工都是人上人。打工人，打工魂，打工都是人上人。打工人，打工魂，打工都是人上人。打工人，打工魂，打工都是人上人。
        </p>
      </Skeleton>
      <Button onClick={showSkeleton} disabled={loading}>
        显示骨架屏
      </Button>
    </div>
  );
};
```

### 按钮/头像/输入框/图像

```jsx
import React from 'react';
import { Skeleton } from 'quanta-design';

export default () => (
  <div>
    <Skeleton.Button />
    <p />
    <Skeleton.Avatar />
    <p />
    <Skeleton.Input style={{ width: 200 }} active />
    <p />
    <Skeleton.Image />
  </div>
);
```