@ray-js/smart-ui
Version:
轻量、可靠的智能小程序 UI 组件库
338 lines (301 loc) • 8.98 kB
Markdown
---
category: 反馈
new: true
version: v2.3.0
---
# Popover 弹出提示
### 介绍
v2.3.0开始加入，弹出层容器，用于展示弹窗、信息提示等轻量内容。
### 引入
```jsx
import { Popover } from '@ray-js/smart-ui';
```
## 代码演示
### 基础用法
```jsx
import { View } from '@ray-js/ray';
import { Popover, Icon, Button } from '@ray-js/smart-ui';
import React from 'react';
import Sun from '@tuya-miniapp/icons/dist/svg/Sun';
export default function Demo() {
const [show, setShow] = React.useState(false);
const showPopup = () => setShow(true);
const onClose = () => setShow(false);
return (
<View style={{paddingBottom: '64px'}}>
<View
style={{
padding: '10vh',
paddingTop: 0,
paddingLeft: 8,
}}
>
<Popover
show={show}
onClose={() => setShow(false)}
placement="bottomLeft"
customStyle={{
padding: '0px',
width: '200px',
}}
slot={{
overlay: (
<View>
{[1, 2, 3].map(n => (
<View className={styles.listItem} key={n}>
<Icon name={Sun} size="24px" color="#3678E3" />
<Text className={styles.listText}>Title</Text>
</View>
))}
</View>
),
}}
>
<Button>下左弹出</Button>
</Popover>
</View>
<View
style={{
padding: '10vh',
paddingTop: 0,
paddingLeft: '20vw',
}}
>
<Popover
placement="bottom"
customStyle={{
padding: '0px',
width: '200px',
}}
slot={{
overlay: (
<View>
{[1, 2, 3].map(n => (
<View className={styles.listItem} key={n}>
<Icon name={Sun} size="24px" color="#3678E3" />
<Text className={styles.listText}>Title</Text>
</View>
))}
</View>
),
}}
>
<Button>下中弹出</Button>
</Popover>
</View>
<View
style={{
padding: '10vh',
paddingTop: 0,
paddingLeft: '40vw',
}}
>
<Popover
placement="bottomRight"
customStyle={{
padding: '0px',
width: '200px',
}}
slot={{
overlay: (
<View>
{[1, 2, 3].map(n => (
<View className={styles.listItem} key={n}>
<Icon name={Sun} size="24px" color="#3678E3" />
<Text className={styles.listText}>Title</Text>
</View>
))}
</View>
),
}}
>
<Button>下右弹出</Button>
</Popover>
</View>
<View
style={{
paddingLeft: 8,
paddingTop: '10vh',
}}
>
<Popover
placement="top"
slot={{
overlay: <View>tip</View>,
}}
>
<Button>上侧弹出</Button>
</Popover>
</View>
<View
style={{
paddingLeft: '20vw',
paddingTop: '10vh',
}}
>
<Popover
placement="left"
slot={{
overlay: <View>tip</View>,
}}
>
<Button>左侧弹出</Button>
</Popover>
</View>
<View
style={{
paddingLeft: '8px',
paddingTop: '10vh',
}}
>
<Popover
placement="right"
slot={{
overlay: <View>tip</View>,
}}
>
<Button>右侧弹出</Button>
</Popover>
</View>
<View
style={{
paddingLeft: '8px',
paddingTop: '10vh',
}}
>
<Popover
placement="bottom"
slot={{
overlay: <View>tip</View>,
}}
>
<Button>下中弹出</Button>
</Popover>
</View>
</View>
);
}
```
less 样式如下
```less
.listItem {
height: 96rpx;
padding: 0 32rpx;
line-height: 96rpx;
display: flex;
align-items: center;
position: relative;
&:nth-child(n + 2)::after {
display: block;
content: '';
height: 1px;
background-color: #ebebeb;
width: 90%;
position: absolute;
right: 0;
top: 0;
}
}
.listText {
margin-left: 20rpx;
font-size: 16px;
color: rgba(0, 0, 0, 0.9);
}
```
### 受控用法
通过`show`属性控制弹出层是否展示。
```tsx
import { View } from '@ray-js/ray';
import { Popover, Button } from '@ray-js/smart-ui';
import React from 'react';
export default function Demo() {
const [show, setShow] = React.useState(false);
return (
<Popover placement="bottom" show={show} onClose={() => setShow(false)} onShowChange={e => setShow(e.detail)} slot={{
overlay: <View>tip</View>
}}>
<Button>下方弹出</Button>
</Popover>
)
}
```
### 弹出位置
通过`position`属性设置弹出位置，默认居右弹出，可以设置为`top`、`topLeft`、`topRight`、`bottom`、`bottomLeft`、`bottomRight`、`left`、`leftTop`、`leftBottom`、`right`、`rightTop`、`rightBottom`。
```jsx
import { View } from '@ray-js/ray';
import { Popover, Button } from '@ray-js/smart-ui';
import React from 'react';
export default function Demo() {
return (
<Popover placement="right" slot={{
overlay: <View>弹框内容</View>
}}>
<Button>右侧弹出</Button>
</Popover>
);
}
```
### 自定义遮罩样式 `v2.13.1`
通过 `overlayStyle` 可自定义遮罩层样式，透传至内部 `smart-overlay` 的 `custom-style`。
```jsx
import { View, Text } from '@ray-js/ray';
import { Popover, Button } from '@ray-js/smart-ui';
import React from 'react';
export default function Demo() {
return (
<View style={{ paddingLeft: 8, paddingTop: '10vh' }}>
<Popover
placement="bottom"
overlayStyle={{
backgroundColor: 'rgba(64, 128, 255, 0.25)',
}}
customStyle={{
padding: '0px',
width: '200px',
}}
slot={{
overlay: (
<View>
<Text>tip</Text>
</View>
),
}}
>
<Button>自定义遮罩样式</Button>
</Popover>
</View>
);
}
```
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| customStyle | 自定义弹出层样式 | _React.CSSProperties_ | - |
| overlayStyle `v2.13.1` | 自定义遮罩层样式，透传至内部 `smart-overlay` 的 `custom-style` | _React.CSSProperties_ | - |
| duration | 延迟关闭的时间(ms) | number | `3000` |
| placement | 弹出层的位置，支持值：`top`、`topLeft`、`topRight`、`bottom`、`bottomLeft`、`bottomRight`、`left`、`leftTop`、`leftBottom`、`right`、`rightTop`、`rightBottom` | _string_ | `right` |
| show | 控制弹出层是否显示，并监听状态变化，值变更时更新 `currentShow` | _boolean_ | `false` |
| trigger `v2.5.0` | 控制弹出层触发方式，支持 `tap`、`longpress` | _string_ | `tap` |
### Events
| 事件名 | 说明 | 参数 |
| ---------------- | --------------- | ---- |
| onClose | 关闭时触发 | - |
| onShowChange | 显示/隐藏时触发 | - |
### Popover Slot
| 名称 | 说明 |
| ------- | -------- |
| overlay | 弹窗内容 |
### 外部样式类
| 类名 | 说明 |
| ------------ | ------------ |
| customClass | 根节点样式类 |
### 样式变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider)。
| 名称 | 默认值 | 描述 |
| -------------------------------- | ----------------------------------- | ---------------- |
| --popover-background-color | #fff | 弹出层背景色 |
| --popover-border-radius | 12px | 弹出层圆角 |
| --popover-box-shadow | 0px 6px 12px 0px rgba(0, 0, 0, 0.1) | 弹出层阴影 |
| --popover-overlay-color `v2.8.0` | var(--app-B1-N1, rgba(0, 0, 0, 1)) | 遮照插槽文字颜色 |
| --popover-padding | 12px | 弹出层内边距 |