Popup 弹出层

介绍

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。

引入

import { Popup } from "@taroify/core"

代码演示

基础用法

通过 open 控制弹出层是否展示。

<Popup open>内容</Popup>

弹出位置

通过 placement 属性设置弹出位置，默认居中弹出，可以设置为 top、bottom、left、right。

<Popup defaultOpen placement="top" style={{ height: "30%" }} />

关闭图标

设置 Popup.Close 属性后，会在弹出层的右上角显示关闭图标，并且可以通过 closeIcon 属性自定义图标。

<Popup defaultOpen placement="bottom" style={{ height: '30%' }}>
  <Popup.Close />
</Popup>

<!-- 自定义图标 -->
<Popup defaultOpen placement="bottom" style={{ height: '30%' }}>
  <Popup.Close>
    <Close />
  </Popup.Close>
</Popup>

圆角弹窗

设置 rounded 属性后，弹窗会根据弹出位置添加不同的圆角样式。

<!-- 圆角弹窗（居中） -->
<Popup
  open
  style={{
    padding: "64px",
  }}
  rounded
  lock={false}
>
  内容
</Popup>

<!-- 圆角弹窗（底部） -->
<Popup open rounded placement="bottom" style={{ height: '30%' }} />

禁止滚动穿透

<Popup lock>
  <View>无法滑动</View>
</Popup>

如果需要内容支持溢出滚动，则需要包裹一层 ScrollView 组件。

<Popup lock>
  <ScrollView>可以滑动</ScrollView>
</Popup>

API

参数	说明	类型	默认值
defaultOpen	默认是否显示弹出层	boolean	`false`
open	是否显示弹出层	boolean	`false`
placement	弹出位置，可选值为 `top` `bottom` `right` `left` `center`	string	`center`
duration	动画时长，单位毫秒	number \| string	`300`
rounded	是否显示圆角	boolean	`false`
lock	是否锁定背景滚动	boolean	`true`

动画相关参数继承自 Transition 组件，详细属性参见：Transition 组件

Popup 参数	Transition 对应参数
mountOnEnter	mountOnEnter
transactionName	name
transitionAppear	appear
transactionTimeout	timeout
onTransitionEnter	onEnter
onTransitionEntered	onEntered
onTransitionExit	onExit
onTransitionExited	onExited

Popup.Backdrop Props

参数	说明	类型	默认值
className	背景板类名	string	`false`
style	背景板样式	CSSProperties	`false`
open	是否显示背景板	boolean	`false`
closeable	是否在点击遮罩层后关闭	boolean	`true`
duration	动画时长，单位毫秒	number \| string	`300`

Popup.Close Props

参数	说明	类型	默认值
placement	关闭图标位置，可选值 `top-left` `bottom-left` `bottom-right`	string	`top-right`
children	图标内容	ReactNode	`<Cross />`

Events

事件名	说明	回调参数
onClick	点击弹出层时触发	event: ITouchEvent
onClose	关闭弹出层时触发	-

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
--popup-z-index	1010	-
--popup-background-color	var(--background-color-light)	-
--popup-animation-duration	var(--animation-duration-base)	-
--popup-rounded-border-radius	16px $hd*	-
--popup-close-icon-z-index	1	-
--popup-close-icon-size	22px $hd*	-
--popup-close-icon-color	var(--gray-5)	-
--popup-close-icon-active-color	var(--gray-6)	-
--popup-close-icon-margin	16px $hd*	-

#Popup 弹出层

#介绍

#引入

#代码演示

#基础用法

#弹出位置

#关闭图标

#圆角弹窗

#禁止滚动穿透

#API

#Popup Props

#Popup.Backdrop Props

#Popup.Close Props

#Events

#主题定制

#样式变量