@alita/popup v0.2.3

Popup 弹出动画

介绍

弹出层容器，用于展示弹窗、信息提示等内容。

引入

通过以下方式来引入组件

import React from 'react';
import { Popup } from '@alitajs/popup';

代码演示

基础用法

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

const [show, setShow] = useState(false);
return (
  <>
    <Button onClick={() => setShow(true)}>展示弹出层</Button>
    <Popup show={show} onClose={() => setShow(false)}>
      <div style={{ height: '50vh' }}>内容区域</div>
    </Popup>
  </>
);

弹出位置

通过 mode 属性设置弹出位置，默认从下部弹出，可以设置为 popup、dropdown、 sliderLeft、 sliderRight、alert;。

// 从左侧弹出
<Popup show={show} onClose={() => setShow(false)} mode="sliderLeft"></Popup>

关闭图标

设置 closeable 属性后，会在弹出层的合适位置显示关闭图标。 图标显示位置如下：

// 示例代码
<Popup closeable show={show} onClose={() => setShow(false)}></Popup>

圆角弹窗

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

// 示例代码
<Popup round show={show} onClose={() => setShow(false)}></Popup>

自定义内容区域

通过 custom 属性可以自定义内容区域，弹出内容区域进行自定义设置。不再受内置样式影响

<Popup custom show={show} onClose={() => setShow(false)}>
  <div style={{ height: '80vh', backgroundColor: '#f40' }}>内容区域</div>
</Popup>

API

Props

Events