Popup

2022-07-29 06:32

Popup window.

Attribute Name	Description	Type	Default	Mandatory
className	Custom class	String		false
show	Show menu or not	Boolean	false	false
animation	Enable animation or not	Boolean	true	false
mask	Show mask or not. Clicking outside does not trigger onClose when it is not shown.	Boolean	true	true
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	false
disableScroll	Disable page scroll or not when mask is shown	Boolean	true	false
zIndex	Define the number of popup levels	Number	0	false

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,
    });
  },
});