UNPKG

antd-mini

Version:

antd-mini 是支付宝小程序 UI 组件库,遵循 Ant Design 规范。

117 lines (99 loc) 4.71 kB
--- nav: path: /components group: title: Information Display order: 8 toc: 'content' --- # PageContainer 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. ## Introduction In `index.json` Introducing Components in ```json "usingComponents": { "ant-page": "antd-mini/es/PageContainer/index" } ``` ## Code Sample ### Basic use ```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: '', }); }, }); ``` ### Demo Code <code src='../../demo/pages/PageContainer/index'></code> ## API | 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 | - | ### Theme customization #### Style Variables 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;">#f5f5f5</div> | <div style="width: 150px; height: 30px; background-color: #121212; color: #ffffff;">#121212</div> | Page Container Background Color |