Popover
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 |
popover-item
Property | Description | Type |
className | Single item style. | String |
onItemClick | Single item click event. | () => void |