# Skeleton 骨架屏
在需要等待加载内容的位置提供一个占位图形组合。

## 何时使用
* 网络较慢，需要长时间等待加载处理的情况下。
* 图文信息内容较多的列表/卡片中。


### 基本使用
最简单的占位效果。

@[demo](demo/basic.vue)

### 更复杂的组合
更复杂的组合。

@[demo](demo/more-complex.vue)

### 动画效果
显示动画效果。

@[demo](demo/active.vue)

### 包含自组件
加载占位图包含子组件。

@[demo](demo/loading.vue)



### props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| active | 是否展示动画效果 | `boolean` | `false` |
| avatar | 是否显示头像占位图 | `boolean` \| [AvatarPropObject](#avatarpropobject) | `false` |
| loading | 为 true 时，显示占位图。反之则直接展示子组件 | `boolean` | `false` |
| paragraph | 是否显示段落占位图 | `boolean` \| [ParagraphPropObject](#paragraphpropobject) | `true` |
| title | 是否显示标题占位图 | `boolean` \| [TitlePropObject](#titlepropobject) | `true` |


### AvatarPropObject
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| size | 设置头像占位图的大小 | `Enum{ 'large', 'small', 'default' }` | large |
| shape | 指定头像的形状 | `Enum{ 'circle', 'square' }`	 | circle |

### ParagraphPropObject
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| rows | 设置段落占位图的行数 | `number` | 3 |
| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | `number | string | Array<number | string>`	 | 61% |

### TitlePropObject
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| width | 设置标题占位图的宽度 | `number | string` | 50% |

### slots
| name | 说明 | slot-scope |
| --- | --- | --- |
| default | loading完成之后展示的内容 | - |