antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。
147 lines (124 loc) • 12.1 kB
Markdown
---
nav:
path: /components
group:
title: Navigation
order: 6
toc: 'content'
---
# PopoverList
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-list": "antd-mini/es/PopoverList/index"
#endif
#if WECHAT
"ant-popover-list": "antd-mini/PopoverList/index"
#endif
}
```
## Code Sample
### Basic use
```xml
<ant-popover-list
visible="{{visible}}"
list="{{list}}"
placement="bottom-right"
#if ALIPAY
onTapItem="handleTapItem"
onVisibleChange="handleVisibleChange"
#endif
#if WECHAT
bindtapitem="handleTapItem"
bindvisiblechange="handleVisibleChange"
#endif
>
<ant-button inline>Point me</ant-button>
</ant-popover-list>
```
```js
Page({
data: {
visible: true,
list: [
{ text: '扫一扫', icon: 'ScanningOutline', showBadge: true, id: 'scan', },
{ text: '付钱/收钱', icon: 'ReceivePaymentOutline', showBadge: false, id: 'pay', },
{ text: '乘车码', icon: 'TransportQRcodeOutline', showBadge: false, id: 'code', },
{ text: '图片', iconImage: 'https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*XMCgSYx3f50AAAAAAAAAAABkARQnAQ', showBadge: false, id: 'image', },
],
},
handleVisibleChange(visible, e) {
console.log(visible, e);
#if ALIPAY
this.setData({ visible });
#endif
#if WECHAT
this.setData({ visible: visible.detail });
#endif
},
handleTapItem(e, item) {
console.log(e, item);
this.setData({ visible: false });
#if ALIPAY
my.showToast({ content: '点击列表', duration: 1000 });
#endif
#if WECHAT
wx.showToast({ title: '点击列表' });
#endif
},
});
```
### bubble position adaptive
> `autoAdjustOverflow` Property to automatically adjust the position of the bubble when it is blocked
```xml
<ant-popover-list
visible="{{true}}"
list="{{list}}"
autoAdjustOverflow="{{true}}"
>
<ant-button inline style="margin-top: 500px;">bubble position adaptive</ant-button>
</ant-popover-list>
```
### Demo Code
<code src='../../demo/pages/PopoverList/index'></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 | The style of the layer | 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 onTapItem | Callback at the time of visible change | (item: [PopoverListItem](#popoverlistitem), event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => 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 bindtapitem | Callback at the time of visible change | (item: [PopoverListItem](#popoverlistitem), event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
### PopoverListItem
| Property | Description | Type | Default Value |
| --------- | ------------------------------------------------------- | ------- | ------ |
| icon | The icon of the menu | string | - |
| iconImage | The icon picture of the menu is taken first iconImage the icon field is not taken again. | string | - |
| text | Class Name | string | - |
| showBadge | Disable | boolean | false |
| id | Extra right | string | - |
### Theme customization
#### Style Variables
Component provides the following CSS variables, which can be used to customize styles. For more information, see ConfigProvider Components.
| Variable name | Default Value | Dark Mode Default | Remarks |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
| --popover-list-content-bg | <div style="width: 150px; height: 30px; background-color: rgba(0, 0, 0, 0.93); color: #ffffff;">rgba(0, 0, 0, 0.93)</div> | <div style="width: 150px; height: 30px; background-color: rgba(0, 0, 0, 0.93); color: #ffffff;">rgba(0, 0, 0, 0.93)</div> | Popover List Content Background Color |
| --popover-list-content-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">#ffffff</div> | <div style="width: 150px; height: 30px; background-color: #c5cad1; color: #ffffff;">#c5cad1</div> | Popover List Content Color |
| --popover-list-badge-color | <div style="width: 150px; height: 30px; background-color: #ff411c; color: #ffffff;">#ff411c</div> | <div style="width: 150px; height: 30px; background-color: #ff411c; color: #ffffff;">#ff411c</div> | Popover List Badge Color |
| --popover-list-item-bg | <div style="width: 150px; height: 30px; background-color: #e5e5e5; color: #333333;">#e5e5e5</div> | <div style="width: 150px; height: 30px; background-color: #444444; color: #ffffff;">#444444</div> | Popover list content text color |