antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。
179 lines (149 loc) • 11.2 kB
Markdown
---
nav:
path: /components
group:
title: Feedback
order: 12
toc: 'content'
---
# Popover
Click on the element to pop up the bubble menu. The bubble menu for navigation functions is evoked, usually used to accommodate functions used at low frequencies. This function can only be activated via the icon on the navigation bar.
## Introduction
In `index.json` Introducing Components in
```json
"usingComponents": {
#if ALIPAY
"ant-popover": "antd-mini/es/Popover/index"
#endif
#if WECHAT
"ant-popover": "antd-mini/Popover/index"
#endif
}
```
## Code Sample
### Basic use
```xml
<popover
content="simple tips"
placement="top-left"
showCloseIcon="{{true}}"
style="display: inline-block">
<ant-button
size="small"
inline>
Point me
</ant-button>
</popover>
```
### Support for pictures and action point buttons
```xml
<popover
content="这里是一个提示文案很长的Tips，酌情使用文案。单一Tips最多可容纳2行文案这里是一个提示文案很长的Tips，酌情使用文案。单一Tips最多可容纳2行文案…"
placement="top"
actionText="operation"
imageUrl="https://mdn.alipayobjects.com/huamei_mnxlps/afts/img/A*tLCBTqxataIAAAAAAAAAAAAADkqGAQ/original"
#if ALIPAY
onVisibleChange="onVisibleChange"
onTapAction="onTapAction"
#endif
#if WECHAT
bindvisiblechange="onVisibleChange"
bindtapaction="onTapAction"
#endif
>
<ant-button>Point me</ant-button>
</popover>
```
### Custom
#### Color
```xml
<popover
content="red"
color="red">
<ant-button style="margin-right: 24rpx;" inline type="primary">Custom Colors</ant-button>
</popover>
```
#### Slot
```xml
<popover content="left & right slots">
<ant-button inline style="margin-right: 24rpx;">Slot</ant-button>
<icon slot="leftContent" style="font-size: 48rpx; margin-right: 24rpx;" type="FaceRecognitionOutline" />
<icon slot="rightContent" style="font-size: 48rpx; margin-left: 24rpx;" type="FaceRecognitionOutline" />
</popover>
```
#### Location
Optional `top`、`top-right`、`top-left`、`bottom`、`bottom-left`、`bottom-right`、`left`、`left-top`、`left-bottom`、`right`、`right-top`、`right-bottom`
```xml
<popover placement="top-right">
<ant-button size="small" inline>Point me</ant-button>
<view slot="content" />
</popover>
```
### Controlled
```xml
<view>
<popover
content="prompt"
placement="right"
showMask="{{false}}"
visible="{{visible}}"
style="display: inline-block">
<text>Click the button to modify the visible</text>
</popover>
</view>
<ant-button
size="small"
inline
style="margin-top: 8px"
#if ALIPAY
onTap="handleVisibleChange"
#endif
#if WECHAT
bindtap="handleVisibleChange"
#endif
>
Change visible
</ant-button>
```
```js
Page({
data: { visible: false },
handleVisibleChange() {
this.setData({
visible: !this.data.visible,
});
},
});
```
### Demo Code
<code src='../../demo/pages/Popover/index' noChangeButton></code>
## API
| Property | Description | Type | Default Value |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ------ |
| autoAdjustOverflow | Automatically adjust the position when the bubble is blocked | boolean | true |
| className | Class Name | string | - |
| color | Background Color | string | - |
| contentClassName | content Class Name | string | - |
| contentStyle | content Style | string | - |
| content | Content | string \| slot | - |
| defaultVisible | Display by default | boolean | false |
| destroyOnClose | Whether to unload content when invisible | boolean | false |
| maskClassName | Class name of the layer | string | - |
| maskStyle | Mask Style | string | - |
| placement | Bubble box position, optional `top`、`top-right`、`top-left`、`bottom`、`bottom-left`、`bottom-right`、`left`、`left-top`、`left-bottom`、`right`、`right-top` or `right-bottom` | string | top |
| showMask | Whether to show the layer, if true, click the blank to close the Popover. | boolean | true |
| style | Style | string | - |
| visible | Whether to display | boolean | - |
| #if ALIPAY onVisibleChange | Callback at the time of visible change | (visible: boolean, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| #if ALIPAY onTapAction | Operation button click callback | () => void | - |
| #if WECHAT bindvisiblechange | Callback at the time of visible change | (visible: boolean, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| #if WECHAT bindtapaction | Operation button click callback | () => void | - |
### Theme customization
#### Style Variables
Component provides the following CSS variables, which can be used to customize styles. For details, see ConfigProvider Components.
| Variable name | Default Value | Dark Mode Default | Remarks |
| -------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------- |
| --popover-color-background | <div style="width: 150px; height: 30px; background-color: #404040; color: #ffffff;">#404040</div> | <div style="width: 150px; height: 30px; background-color: #404040; color: #ffffff;">#404040</div> | Popover default background color |
| --popover-bg | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">#ffffff</div> | <div style="width: 150px; height: 30px; background-color: #1a1a1a; color: #ffffff;">#1a1a1a</div> | Popover background color |
| --popover-inner-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #000000;">#ffffff</div> | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #000000;">#ffffff</div> | Popover internal text color |
| --popover-text-color | <div style="width: 150px; height: 30px; background-color: #000000; color: #ffffff;">#000000</div> | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #000000;">#ffffff</div> | Popover operation button text color |