All Products
Search
Document Center

Popover

Last Updated: Feb 04, 2021

This section describes the popover.

popover

Property Description Type Default value Mandatory
className Style of the outermost cover. String - false
show Whether to display the popover. Boolean false true
showMask Whether to display the mask. Boolean true false
position Position of the popover. The value can be top, topRight, topLeft, bottom, bottomLeft, bottomRight, right, rightTop, rightBottom, left, leftBottom, leftTop. String bottomRight false

popover-item

Property Description Type Default value Mandatory
className Style of the single item. String - false
onItemClick Single tapping event. () => void - false

Code sample

 
  1. {
  2. "usingComponents": {
  3. "popover": "mini-antui/es/popover/index",
  4. "popover-item": "mini-antui/es/popover/popover-item/index"
  5. }
  6. }
 
  1. <popover
  2. position="{{position}}"
  3. show="{{show}}"
  4. showMask="{{showMask}}"
  5. onMaskClick="onMaskClick"
  6. >
  7. <view onTap="onShowPopoverTap">Tap to view.</view>
  8. <view slot="items">
  9. <popover-item onItemClick="itemTap1">
  10. <text>line1</text>
  11. </popover-item>
  12. <popover-item>
  13. <text>line2</text>
  14. </popover-item>
  15. </view>
  16. </popover>
 
  1. Page({
  2. data: {
  3. position: 'bottomRight',
  4. show: false,
  5. showMask: true,
  6. },
  7. onMaskClick() {
  8. this.setData({
  9. show: false,
  10. });
  11. },
  12. onShowPopoverTap() {
  13. this.setData({
  14. show: true,
  15. });
  16. },
  17. itemTap1() {
  18. my.alert({
  19. content: 'Tap 1',
  20. });
  21. },
  22. });