antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。
203 lines (169 loc) • 13.5 kB
Markdown
---
nav:
path: /components
group:
title: Feedback
order: 12
toc: 'content'
---
Slide or pop-up a custom content area from the screen. It is used to display pop-up windows, information prompts, selection input, switching, and other content. It supports multiple pop-up layers for overlay display.
In `index.json` Introducing Components in
```json
"usingComponents": {
"ant-popup": "antd-mini/es/Popup/index"
"ant-popup": "antd-mini/Popup/index"
}
```
> - `ant-popup` components must pass through `visible` Property controls the show/hide state.`position` Specifies the direction of occurrence, optional `top` `bottom` `left` `right`. The contents of the pop-up window are filled in the form of slots.
> - `close` The event will be triggered when you click the upper right corner to close the icon or click the layer to close.
> - `clickBack` event is triggered when the back button in the upper left corner is clicked.
```xml
<ant-popup
visible="{{visible}}"
position="bottom"
title="title"
height="{{250}}"
width="{{250}}"
showClose="{{true}}"
showBack="{{true}}"
onClickBack="onClickBack"
onClose="handlePopupClose"
bindclickback="onClickBack"
bindclose="handlePopupClose"
>
<view style="padding: 12px">
A custom content area slides out or pops up from the screen to display pop-up windows, information prompts, selection input, switching, etc.
</view>
</ant-popup>
```
```js
Page({
data: {
visible: true,
},
onClickBack() {
my.showToast({ content: 'clicked icon', duration: 1000 });
wx.showToast({ content: 'clicked icon', duration: 1000 });
},
handlePopupClose() {
this.setData({
visible: false,
});
},
});
```
> `backgroundImage` property, you can set the background for the entire bullet layer.
```xml
<ant-popup
visible="{{true}}"
height="{{450}}"
className="customize-top-image-popup"
backgroundImage="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*jVxmQq4bhoUAAAAAAAAAAAAADiWwAQ/original"
position="bottom"
showClose="{{false}}">
<view class="customize-content">
Ea consectetur ipsum consequat exercitation laboris excepteur pariatur
excepteur labore dolor cillum tempor esse. Ad adipisicing nostrud fugiat eu
mollit. Proident nisi voluptate sunt ea laboris Lorem ullamco deserunt aute
incididunt cillum tempor duis est. Elit voluptate laboris laborum anim
</view>
</ant-popup>
```
> If the content in the pop-up window is too long and needs to support scrolling, please use [scroll-view](https://opendocs.alipay.com/mini/component/scroll-view?pathHash=8292073d) component and add the following properties:
```xml
<ant-popup
visible="{{true}}"
position="bottom"
showClose="{{true}}"
>
<scroll-view
scroll-y
style="padding: 12px; height: 300px"
disable-lower-scroll="out-of-bounds"
disable-upper-scroll="out-of-bounds">
Ea consectetur ipsum consequat exercitation laboris excepteur pariatur
excepteur labore dolor cillum tempor esse. Ad adipisicing nostrud fugiat eu
mollit. Proident nisi voluptate sunt ea laboris Lorem ullamco deserunt aute
incididunt cillum tempor duis est. Elit voluptate laboris laborum anim
exercitation consequat laboris ad. Quis ad enim fugiat.
</scroll-view>
</ant-popup>
```
<code src='../../demo/pages/Popup/index'></code>
| Property | Description | Type | Default Value |
| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ----------- |
| animation | Whether to turn on transition animation | boolean | true |
| animationType | Animation type, optional`transform` `position`, the default is used`transform`Animation performance is better. However, when there is a fixed positioning or picker-view element inside the pop-up window, there may be a style problem, which can be switched`position`Solve | string | `transform` |
| className | Class Name | string | - |
| title | Title | string | '' |
| destroyOnClose | Unload content when invisible | boolean | false |
| duration | Transition animation duration, in milliseconds | number | 300 |
| height | height, in position `top` or `bottom` When used, the unit is px. Optional, when not transmitted, it is highly adaptive according to the content area. | number | - |
| maskClassName | Class name of the layer | string | - |
| maskStyle | The style of the layer | string | - |
| position | Pop-up window layout, optional`top` `bottom` `left` `right` | string | `bottom` |
| showMask | Whether to show the layer | boolean | true |
| style | Style | string | - |
| visible | Whether to display | boolean | false |
| width | The width, in position, is `left` or `right` unit px | number | - |
| zIndex | Pop-up Level | number | 998 |
| backgroundImage | Background map of the bullet box | string | - |
| showClose | Show the icon with the bullet box closed. | boolean | false |
| showBack | Show the icon returned by the bullet box | boolean | false |
|
|
|
|
|
|
|
|
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 |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
| --popover-list-content-bg | <div style="width: 150px; height: 30px; background-color: rgba(0, 0, 0, 0.93); color: #ffffff;">rgba(0, 0, 0, 0.93)</div> | <div style="width: 150px; height: 30px; background-color: rgba(0, 0, 0, 0.93); color: #ffffff;">rgba(0, 0, 0, 0.93)</div> | Popover List Content Background Color |
| --popover-list-content-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">
| --popover-list-badge-color | <div style="width: 150px; height: 30px; background-color: #ff411c; color: #ffffff;">
| --popover-list-content-color | <div style="width: 150px; height: 30px; background-color: #333333; color: #ffffff;">
Preventing page scrolling after the layer is currently not effective in IDE and emulator, please debug on real machine.
If you need to scroll in the pop-up window, use the scroll-view component and add the following attributes:
```html
<popup height="{{250}}" visible="{{visible}}">
<scroll-view
scroll-y
disable-lower-scroll="out-of-bounds"
disable-upper-scroll="out-of-bounds"
>
...你的内容...
</scroll-view>
</popup>
```
Popup is passed by default. `display:none` Hidden, and picker-view cannot be placed in `display:none` in the components. There are two solutions:
1. Add attribute on picker-view `a:if="{{popupVisible}}"`, the picker-view is displayed when the Popup is displayed.
2. Set on Popup `destroyOnClose="{{true}}"`to unload content when the Popup is not visible.