A Popover component is a pop-up box that appears when a user taps on an element. It can only be opened by an icon on the navigation bar and generally used for implementing functions that are less used.
Property
Popover
Property | Type | Required | Default value | Description |
visible | boolean | No | false | Whether the popover is visible. |
mode | 'dark' | 'light' | No | 'dark' | The display mode of the popover. |
placement | 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom' | 'right' | 'right-top' | 'right-bottom' | No | 'bottom-right' | The direction. |
className | string | No | - | The class name. |
mask | boolean | No | false | Whether to display the mask layer. |
maskClosable | boolean | No | true | Whether to close the mask layer upon taps. |
fixMaskFull | boolean | No | false | This property is used to fix the problem that the mask layer cannot be fully displayed due to the transform property. |
PopoverItem
Property | Type | Required | Default value | Description |
icon | string | No | - | The icon type. |
className | string | No | - | The class name. |
Event
Popover
Event name | Description | Type |
onVisibleChange | Callback fired when the popover state is being switched from hidden to visible or vise versa. |
|
PopoverItem
Event name | Description | Type |
onTap | Callback fired when the popover is tapped. |
|
Slot
Popover
Name | Description |
items | The tooltip slot. You can use PopoverItem to render the list. |
PopoverItem
Name | Description |
icon | The icon slot. |
Style class
Popover
Class name | Description |
amd-popover | The style of the entire popover. |
amd-popover-container | The style of the main content. |
amd-popover-content | The content style. |
amd-popover-arrow | The arrow style. |
amd-popover-inner | The internal content style. |
amd-popover-inner-pseudo | The style of the entire tooltip content. |
Class name | Description |
amd-popover-item | The style of the entire popover. |
amd-popover-item-icon | The icon style. |
amd-popover-item-icon-item | The icon style. |
amd-popover-item-text | The text style. |
Code sample
Basic usage
The following shows an example of the code in the index.axml file:
<view>
<demo-block title="Basic usage">
<view class="wrap dark">
<popover
placement="bottom"
visible="{{showDark}}"
onVisibleChange="handleDarkVisibleChange">
<button inlineSize="large" inline>Click me</button>
<view slot="items" class="tooltip">Hello World</view>
</popover>
</view>
</demo-block>
<demo-block title="Light bubble">
<view class="wrap">
<popover
placement="right"
mode="light"
visible="{{showLight}}"
onVisibleChange="handleLightVisibleChange">
<button inlineSize="large" inline>Click me</button>
<view slot="items" class="tooltip">Hello World</view>
</popover>
</view>
</demo-block>
<demo-block title="Bubble position" className="multi-demo">
<view class="multi-wrap">
<popover
placement="{{placement}}"
visible="{{show}}"
mask="{{showMask}}"
onVisibleChange="handleVisibleChange">
<view class="multi">
<view>Click{{show ? 'Hide' : 'Display'}}</view>
<view>
{{placement}}
</view>
</view>
<view slot="items" class="tooltip">
<view>Popover</view>
<view>
Content
</view>
</view>
</popover>
</view>
<view class="demo-btn-container">
<button
class="demo-btn"
onTap="handleNextPosition">
Next position
</button>
<button
class="demo-btn"
onTap="handleToggleMask">
{{showMask?'Hide':'Display'}}Mask
</button>
</view>
</demo-block>
</view>The following shows an example of the code in the index.js file:
const placement = [
'top',
'top-right',
'top-left',
'bottom',
'bottom-left',
'bottom-right',
'left',
'left-top',
'left-bottom',
'right',
'right-top',
'right-bottom',
];
Page({
data: {
placement: placement[0],
show: true,
showMask: false,
showLight: true,
showDark: true,
},
handleLightVisibleChange(e) {
this.setData({
showLight: e,
});
},
handleDarkVisibleChange(e) {
this.setData({
showDark: e,
});
},
handleNextPosition() {
let index = placement.indexOf(this.data.placement);
index = index >= placement.length - 1 ? 0 : index + 1;
this.setData({
show: true,
placement: placement[index],
});
},
handleVisibleChange(visible, mode) {
this.setData({
show: visible,
});
if (mode === 'mask') {
my.showToast({ content: 'Click mask to close', duration: 2000 });
}
},
handleToggleMask() {
this.setData({
showMask: !this.data.showMask,
});
},
});The following shows an example of the code in the index.acss file:
.wrap {
display: flex;
}
.wrap.dark {
padding-bottom: 100rpx;
}
.wrap.dark .tooltip {
color: #fff;
}
.wrap .tooltip {
white-space: nowrap;
font-size: 24rpx;
padding: 16rpx;
}
.multi-demo .demo-block-content {
background: transparent;
}
.multi-wrap {
height: 600rpx;
display: flex;
align-items: center;
justify-content: center;
}
.multi-wrap .multi {
background: #aaa;
border-radius: 12rpx;
height: 200rpx;
width: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
}
.multi-wrap .tooltip {
color: #fff;
font-size: 24rpx;
padding: 16rpx;
}
.demo-btn-container {
display: flex;
justify-content: space-around;
}
.demo-btn {
width: 45%;
}The following shows an example of the code in the index.json file:
{
"defaultTitle": "PopoverBase",
"usingComponents": {
"popover": "antd-mini/es/Popover/index",
"demo-block": "../../components/DemoBlock/index",
"button": "antd-mini/es/Button/index"
}
}
Used with the PopoverItem component
The following shows an example of the code in the index.axml file:
<view>
<demo-block title="Dark bubble menu">
<view class="wrap">
<popover
placement="bottom-left"
visible="{{showDark}}"
mask
onVisibleChange="handleDarkVisibleChange">
<button inline inlineSize="large">Click me</button>
<block slot="items">
<popover-item
onTap="handleTapItem"
icon="ScanningOutline"
data-type="showDark"
data-name="Scan">
Scan
</popover-item>
<popover-item
onTap="handleTapItem"
icon="ReceivePaymentOutline"
data-type="showDark"
data-name="pay/receive money">
pay/receive money
</popover-item>
<popover-item
onTap="handleTapItem"
icon="TransportQRcodeOutline"
data-type="showDark"
data-name="Passenger code">
Passenger code
</popover-item>
<popover-item
onTap="handleTapItem"
data-type="showDark"
data-name="icon slot">
<image
slot="icon"
mode="scaleToFill"
src="{{url}}"
style="width: 100%;height: 100%;"/>
icon slot
</popover-item>
</block>
</popover>
</view>
</demo-block>
<demo-block title="Light bubble menu">
<view class="wrap">
<popover
placement="bottom-left"
visible="{{showLight}}"
mode="light"
mask
onVisibleChange="handleLightVisibleChange">
<button inline inlineSize="large">Click</button>
<block slot="items">
<popover-item
onTap="handleTapItem"
icon="ScanningOutline"
data-type="showLight"
data-name="Scan">
Scan
</popover-item>
<popover-item
onTap="handleTapItem"
icon="ReceivePaymentOutline"
data-type="showLight"
data-name="pay/receive money">
pay/receive money
</popover-item>
<popover-item
onTap="handleTapItem"
icon="TransportQRcodeOutline"
data-type="showLight"
data-name="passenger code">
passenger code
</popover-item>
<popover-item
onTap="handleTapItem"
data-type="showLight"
data-name="icon slot">
<image
slot="icon"
mode="scaleToFill"
src="{{url}}"
style="width: 100%;height: 100%;"/>
icon slot
</popover-item>
</block>
</popover>
</view>
</demo-block>
<demo-block title="bubble menu without icon">
<view class="wrap">
<popover
placement="bottom-left"
visible="{{showNoIcon}}"
mask
onVisibleChange="handleNoIconVisibleChange">
<button inline inlineSize="large">Click</button>
<block slot="items">
<popover-item
onTap="handleTapItem"
data-type="showNoIcon"
data-name="Scan">
Scan
</popover-item>
<popover-item
onTap="handleTapItem"
data-type="showNoIcon"
data-name="pay/receive money">
ay/receive money
</popover-item>
<popover-item
onTap="handleTapItem"
data-type="showNoIcon"
data-name="passenger code">
passenger code
</popover-item>
</block>
</popover>
</view>
</demo-block>
</view>The following shows an example of the code in the index.js file:
Page({
data: {
showLight: false,
showDark: false,
showNoIcon: false,
url: 'https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*XMCgSYx3f50AAAAAAAAAAABkARQnAQ',
},
handleLightVisibleChange(e, mode) {
this.setData({
showLight: e,
});
if (mode === 'mask') {
my.showToast({ content: 'click mask to close', duration: 2000 });
}
},
handleDarkVisibleChange(e, mode) {
this.setData({
showDark: e,
});
if (mode === 'mask') {
my.showToast({ content: 'click mask to close', duration: 2000 });
}
},
handleNoIconVisibleChange(e, mode) {
this.setData({
showNoIcon: e,
});
if (mode === 'mask') {
my.showToast({ content: 'click mask to close', duration: 2000 });
}
},
handleTapItem(e) {
this.setData({
[e.target.dataset.type]: false,
});
my.showToast({ content: `Clicked${e.target.dataset.name}` });
},
});The following shows an example of the code in the index.acss file:
.wrap {
display: flex;
}The following shows an example of the code in the index.json file:
{
"defaultTitle": "Popover: combine PopoverItem component",
"usingComponents": {
"popover": "antd-mini/es/Popover/index",
"popover-item": "antd-mini/es/Popover/PopoverItem/index",
"demo-block": "../../components/DemoBlock/index",
"button": "antd-mini/es/Button/index"
}
}