Taroify

介绍

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

引入

import { Popup } from "@taroify/core"
// or
import Popup from "@taroify/core/popup"

代码演示

基础用法

通过 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>
    <Cross />
  </Popup.Close>
</Popup>

圆角弹窗

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

<Popup open rounded placement="bottom" style={{ height: '30%' }} />

API

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

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 弹出层

介绍

引入