Popup

2023-04-28 21:00

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