antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。
168 lines (133 loc) • 8.61 kB
Markdown
---
nav:
path: /components
group:
title: 反馈引导
order: 12
toc: 'content'
---
# Skeleton 骨架屏
在需要等待加载内容的位置提供一个占位图形组合。
- 网络较慢，需要长时间等待加载，并且只在第一次加载的时候使用。
- 在确保手机性能的前提下，尽量使用预加载，最好不用骨架屏。
- 适用于图文信息较多且重要的首页、列表、卡片中。小的模块类组件（例如弹窗）不要使用。
## 引入
在 `index.json` 中引入组件
```json
"usingComponents": {
#if ALIPAY
"ant-skeleton": "antd-mini/es/Skeleton/index",
"ant-skeleton-avatar": "antd-mini/es/Skeleton/Avatar/index",
"ant-skeleton-title": "antd-mini/es/Skeleton/Title/index",
"ant-skeleton-button": "antd-mini/es/Skeleton/Button/index",
"ant-skeleton-paragraph": "antd-mini/es/Skeleton/Paragraph/index",
"ant-skeleton-input": "antd-mini/es/Skeleton/Input/index",
#endif
#if WECHAT
"ant-skeleton": "antd-mini/Skeleton/index",
"ant-skeleton-avatar": "antd-mini/Skeleton/Avatar/index",
"ant-skeleton-title": "antd-mini/Skeleton/Title/index",
"ant-skeleton-button": "antd-mini/Skeleton/Button/index",
"ant-skeleton-paragraph": "antd-mini/Skeleton/Paragraph/index",
"ant-skeleton-input": "antd-mini/Skeleton/Input/index",
#endif
}
```
## 代码示例
### 基本使用
```xml
<ant-skeleton animate="{{true}}" />
```
### 带头像
```xml
<ant-skeleton avatar="{{true}}" />
```
### 自定义组合
```xml
<ant-skeleton-avatar />
<ant-skeleton-paragraph rows="{{1}}" />
<ant-skeleton-input />
<ant-skeleton-input />
<ant-skeleton-input />
<ant-skeleton-button size="small" />
```
### 复杂组合
```xml
<ant-skeleton
loading="{{showLoading}}"
title="{{false}}"
avatar="{{true}}"
paragraph="{{paragraph}}">
<view class="container">
<ant-avatar
src="https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ" />
<view class="content">
We supply a series of design principles, practical patterns and high
quality design resources, to help people create their product prototypes
beautifully and efficiently.
</view>
</view>
</ant-skeleton>
```
### Demo 代码
<code src='../../demo/pages/Skeleton/index'></code>
## API
### Skeleton
| 属性 | 说明 | 类型 | 默认值 |
| --------- | -------------------------------------------- | --------------------- | ------ |
| animate | 是否展示动画效果 | boolean | false |
| avatar | 是否显示头像占位图 | `boolean \| Avatar` | false |
| className | 类名 | string | - |
| loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | true |
| paragraph | 段落 | `number \| Paragraph` | true |
| style | 样式 | CSSProperties | - |
| title | 是否显示标题占位图 | boolean | true |
### Avatar
| 属性 | 说明 | 类型 | 默认值 |
| --------- | ------------------------------------------------ | ------------- | -------- |
| animate | 是否展示动画效果 | boolean | false |
| className | 类名 | string | - |
| loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | true |
| shape | 头像形状 `circle` 或 `square` | string | `square` |
| size | 头像大小 `x-small`、`small`、`medium` 或 `large` | string | `medium` |
| style | 样式 | CSSProperties | - |
#### Paragraph 段落
| 属性 | 说明 | 类型 | 默认值 |
| --------- | -------------------------------------------- | ------------- | ------ |
| animate | 是否展示动画效果 | boolean | false |
| className | 类名 | string | - |
| loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | true |
| rows | 段落行数，大于 0 展示 | number | 3 |
| style | 样式 | CSSProperties | - |
#### Title 标题
| 属性 | 说明 | 类型 | 默认值 |
| --------- | -------------------------------------------- | ------------- | ------ |
| animate | 是否展示动画效果 | boolean | false |
| className | 类名 | string | - |
| loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | true |
| style | 样式 | CSSProperties | - |
#### Button 按钮
| 属性 | 说明 | 类型 | 默认值 |
| --------- | -------------------------------------------- | ------------- | -------- |
| animate | 是否展示动画效果 | boolean | false |
| className | 类名 | string | - |
| loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | true |
| size | 大小，`small`、`medium` 或 `large` | string | `medium` |
| style | 样式 | CSSProperties | - |
#### Input 输入框
| 属性 | 说明 | 类型 | 默认值 |
| --------- | -------------------------------------------- | ------------- | ------ |
| animate | 是否展示动画效果 | boolean | false |
| className | 类名 | string | - |
| loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | true |
| style | 样式 | CSSProperties | - |
### 主题定制
#### 样式变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 变量名 | 默认值 | 深色模式默认值 | 备注 |
| --------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | -------------------- |
| --selector-background-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">#ffffff</div> | <div style="width: 150px; height: 30px; background-color: #1a1a1a; color: #ffffff;">#1a1a1a</div> | 选择器背景颜色 |
| --selector-item-background | <div style="width: 150px; height: 30px; background-color: #f5f5f5; color: #333333;">#f5f5f5</div> | <div style="width: 150px; height: 30px; background-color: #121212; color: #ffffff;">#121212</div> | 选择器项背景颜色 |
| --selector-item-active-background | <div style="width: 150px; height: 30px; background-color: #e7f1ff; color: #333333;">#e7f1ff</div> | <div style="width: 150px; height: 30px; background-color: #0d2543; color: #ffffff;">#0d2543</div> | 选择器激活项背景颜色 |
| --selector-item-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #ffffff;">#1677ff</div> | <div style="width: 150px; height: 30px; background-color: #3086ff; color: #ffffff;">#3086ff</div> | 选择器项颜色 |
| --selector-item-sub-color | <div style="width: 150px; height: 30px; background-color: #999999; color: #ffffff;">#999999</div> | <div style="width: 150px; height: 30px; background-color: #616161; color: #ffffff;">#616161</div> | 选择器项子颜色 |