antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。
168 lines (133 loc) • 9.07 kB
Markdown
---
nav:
path: /components
group:
title: Feedback
order: 12
toc: 'content'
---
Provide a placeholder graphic combination where you need to wait for content to load.
- The network is slow, requires a long wait to load, and is only used when loading for the first time.
- On the premise of ensuring the performance of the mobile phone, try to use preloading, preferably without skeleton screen.
- It is suitable for home pages, lists and cards with more graphic information and important information. Do not use small module class components (such as pop-up windows).
## Introduction
In `index.json` Introducing Components in
```json
"usingComponents": {
"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",
"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",
}
```
```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>
```
<code src='../../demo/pages/Skeleton/index'></code>
| Property | Description | Type | Default Value |
| --------- | -------------------------------------------- | --------------------- | ------ |
| animate | Show animation effect | boolean | false |
| avatar | Whether to display avatar bitmap | `boolean \| Avatar` | false |
| className | Class Name | string | - |
| loading | When true, the accounting bitmap is displayed. Otherwise, the subassembly is displayed directly. | boolean | true |
| paragraph | Paragraph | `number \| Paragraph` | true |
| style | Style | CSSProperties | - |
| title | Whether to display title bitmap | boolean | true |
| Property | Description | Type | Default Value |
| --------- | ------------------------------------------------ | ------------- | -------- |
| animate | Show animation effect | boolean | false |
| className | Class Name | string | - |
| loading | When true, the accounting bitmap is displayed. Otherwise, the subassembly is displayed directly. | boolean | true |
| shape | Avatar Shape `circle` or `square` | string | `square` |
| size | Avatar size `x-small`、`small`、`medium` or `large` | string | `medium` |
| style | Style | CSSProperties | - |
| Property | Description | Type | Default Value |
| --------- | -------------------------------------------- | ------------- | ------ |
| animate | Show animation effect | boolean | false |
| className | Class Name | string | - |
| loading | When true, the accounting bitmap is displayed. Otherwise, the subassembly is displayed directly. | boolean | true |
| rows | Number of paragraph lines, greater than 0 | number | 3 |
| style | Style | CSSProperties | - |
| Property | Description | Type | Default Value |
| --------- | -------------------------------------------- | ------------- | ------ |
| animate | Show animation effect | boolean | false |
| className | Class Name | string | - |
| loading | When true, the accounting bitmap is displayed. Otherwise, the subassembly is displayed directly. | boolean | true |
| style | Style | CSSProperties | - |
| Property | Description | Type | Default Value |
| --------- | -------------------------------------------- | ------------- | -------- |
| animate | Show animation effect | boolean | false |
| className | Class Name | string | - |
| loading | When true, the accounting bitmap is displayed. Otherwise, the subassembly is displayed directly. | boolean | true |
| size | size,`small`、`medium` or `large` | string | `medium` |
| style | Style | CSSProperties | - |
| Property | Description | Type | Default Value |
| --------- | -------------------------------------------- | ------------- | ------ |
| animate | Show animation effect | boolean | false |
| className | Class Name | string | - |
| loading | When true, the accounting bitmap is displayed. Otherwise, the subassembly is displayed directly. | boolean | true |
| style | Style | CSSProperties | - |
Component provides the following CSS variables, which can be used to customize styles. For more information, see ConfigProvider Components.
| Variable name | Default Value | Dark Mode Default | Remarks |
| --------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | -------------------- |
| --selector-background-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">
| --selector-item-background | <div style="width: 150px; height: 30px; background-color: #f5f5f5; color: #333333;">
| --selector-item-active-background | <div style="width: 150px; height: 30px; background-color: #e7f1ff; color: #333333;">
| --selector-item-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #ffffff;">
| --selector-item-sub-color | <div style="width: 150px; height: 30px; background-color: #999999; color: #ffffff;">