Popover

2023-03-10 05:00

Bubble It is possible to set Popover-item width and height to change the bubble size. Text adaptive width & height is not supported.
Note: The setting popover is located right below the specific element. It is possible to place the element within the popover and set the position as bottom.

Sample Code

copy
    // API-DEMO page/component/popover.json
    {  
      "defaultTitle": "Popover",
      "usingComponents": {
        "popover": "mini-antui/es/popover/index",
        "popover-item": "mini-antui/es/popover/popover-item/index"
      }
    }

copy
    <!-- API-DEMO page/component/popover/.axml-->
    <view class="demo-popover">
      <popover
        position="{{position}}"
        show="{{show}}"
        showMask="{{showMask}}"
        onMaskClick="onMaskClick"
      >
        <view class="demo-popover-btn" onTap="onShowPopoverTap">Click {{show ? 'hide' : 'show'}}</view>
        <view slot="items">
          <popover-item onItemClick="itemTap1">
            <text>{{position}}</text>
          </popover-item>
          <popover-item onItemClick="itemTap2">
            <text>line2</text>
          </popover-item>
        </view>
      </popover>
    </view>
    <view class="demo-popover-test-btns">
      <button class="demo-popover-test-btn" onTap="onNextPositionTap">Next position</button>
      <button class="demo-popover-test-btn" onTap="onMaskChangeTap">Mask{{showMask ? 'hide' : 'show'}}</button>
    </view>

copy
    // API-DEMO page/component/popover.js
    const position = ['top', 'topRight', 'rightTop', 'right', 'rightBottom', 'bottomRight', 'bottom', 'bottomLeft', 'leftBottom', 'left', 'leftTop', 'topLeft'];
    Page({
      data: {
        position: position[0],
        show: false,
        showMask: true,
      },
      onShowPopoverTap() {
        this.setData({
          show: !this.data.show,
        });
      },
      onNextPositionTap() {
        let index = position.indexOf(this.data.position);
        index = index >= position.length - 1 ? 0 : index + 1;
        this.setData({
          show: true,
          position: position[index],
        });
      },
      onMaskChangeTap() {
        this.setData({
          showMask: !this.data.showMask,
        });
      },
      onMaskClick() {
        this.setData({
          show: false,
        });
      },
      itemTap1() {
        my.alert({
          content: 'Click1',
        });
      },
      itemTap2() {
        my.alert({
          content: 'Click2',
        });
      },
    });

copy
    /* API-DEMO page/component/popover.css */
    .demo-popover {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 400px;
    }
    .demo-popover-btn {
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      background-color: #fff;
      border: 1px solid #dddddd;
      border-radius: 2px;
    }
    .demo-popover-test-btns {
      display: flex;
      justify-content: space-around;
    }
    .demo-popover-test-btn {
      width: 45%;
    }

Attributes

Property	Description	Type	Default	Required
className	Outmost layout style.	String	-	No
show	Show bubble or not.	Boolean	false	Yes
showMask	Show mask or not.	Boolean	true	No
position	Bubble position options: top, topRight, topLeft, bottom, bottomLeft, bottomRight, right, rightTop, rightBottom, left, leftBottom, leftTop.	String	bottomRight	No

Property	Description	Type
className	Single item style.	String
onItemClick	Single item click event.	() => void