antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。
117 lines (99 loc) • 4.71 kB
Markdown
---
nav:
path: /components
group:
title: Information Display
order: 8
toc: 'content'
---
The page-level container component provides common capabilities such as loading status, page exception handling, top/bottom safe margins, and so on, out of the box.
In `index.json` Introducing Components in
```json
"usingComponents": {
"ant-page": "antd-mini/es/PageContainer/index"
}
```
```xml
<ant-page
loading="{{loading}}"
status="{{status}}"
title="{{title}}"
message="{{message}}"
image="{{image}}"
safeArea="{{safeArea}}"
loadingColor="#ccc"
loadingSize="medium"
loadingType="spin"
actionText="refresh"
secondaryActionText="internet error"
onActionTap="handleRefresh"
onSecondaryActionTap="handleSwitchToDisconnected"
>
<view class="content">
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</view>
</ant-page>
```
```js
Page({
data: {
loading: true,
status: 'failed',
safeArea: 'both',
},
onLoad() {
setTimeout(() => {
this.setData({
loading: false,
});
}, 1000);
},
handleRefresh() {
my.reLaunch({
url: 'index',
fail(e) {
console.log(e);
},
});
},
handleSwitchToDisconnected() {
this.setData({
status: 'disconnected',
title: undefined,
message: undefined,
image: '',
});
},
});
```
<code src='../../demo/pages/PageContainer/index'></code>
| Property | Description | Type | Default Value |
| -------------------- | ------------------------------------------------------- | ---------------- | -------- |
| className | Class Name | string | - |
| style | Style | string | - |
| safeArea | Location of margin inside the safety zone,`top`、`bottom`、`both` | string | `both` |
| loading | Loading | boolean \| slot | false |
| loadingType | Load style type,`spin`、`mini` | string | `spin` |
| loadingSize | Load Style Size,`small`、`medium`、`large`、`x-large` | string | `medium` |
| loadingColor | Load Style Color | string | '#ccc' |
| status | Page exception status,`failed`、`busy`、`disconnected`、`empty` | string \| slot | - |
| image | Page Exception State Custom Image | string | - |
| title | Page Exception Status Custom Title | string | - |
| message | Page Exception Status Custom Description | string | - |
| actionText | Page Exception Status Button Copy | string | - |
| secondaryActionText | Page Exception Secondary Button Copy | string | - |
| extra | Page Exception Custom Button | slot | - |
| onActionTap | Page abnormal state button click event | (e: any) => void | - |
| onSecondaryActionTap | Page Exception Status Secondary Button Click Event | (e: any) => void | - |
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 |
| --------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------- |
| --page-container-background-color | <div style="width: 150px; height: 30px; background-color: #333333;">