Popup
Popup window.
Property | Description | Type | Default | Required |
className | Custom class. | String | No | |
show | Show menu or not. | Boolean | false | No |
animation | Enable animation or not. | Boolean | true | No |
mask | Show mask or not. Clicking outside does not trigger onClose when it is not shown. | Boolean | true | Yes |
position | Control the direction in which the menu pops up. Bottom indicating the bottom side, left the left side, top the top side and right the right side. | String | bottom | No |
disableScroll | Disable page scroll or not when mask is shown. | Boolean | true | No |
zIndex | Define the number of popup levels. | Number | 0 | No |
Slots
It is possible to define the parts to be shown in the popup component. See the following example for details.
Example
copy
{
"defaultTitle": "AntUI Component Library",
"usingComponents": {
"popup": "mini-antui/es/popup/index"
}
}
copy
<view>
<view class="btn-container">
<button onTap="onTopBtnTap">Popup</button>
</view>
<popup show="{{showTop}}" position="top" onClose="onPopupClose">
<view style="height: 200px; background: #fff; display: flex; justify-content: center; align-items: center;">hello world</view>
</popup>
</view>
copy
Page({
data: {
showTop: false,
},
onTopBtnTap() {
this.setData({
showTop: true,
});
},
onPopupClose() {
this.setData({
showTop: false,
});
},
});