p79n6a / rax-modal

描述

rax-modal 提供了弹出遮罩层的能力，为 Alert, Confirm 等对话框组件提供底层能力。

安装

$ npm install rax-modal --save

引用

import RaxModal from 'rax-modal';

属性

属性	类型	默认值	** 必填 **	描述	** 支持 **
visible	boolean	undefined	true	控制弹层是否显示
contentStyle	Object	undefined	false	自定义内容容器样式
onShow	Function	undefined	false	当弹层显示的时候触发回调
onHide	Function	undefined	false	当弹层关闭的时候触发回调
maskCanBeClick	boolean	true	false	是否可以通过点击背景蒙层关闭弹层
delay	number	0	false	延迟，毫秒
duration	number 或者 [number, number]	[300, 300]	false	动画持续时间(毫秒), 如果是数组，则分别表示打卡动画时间和关闭动画时间

注：支持列表中的 代表h5 代表weex 代表小程序

示例

import {createElement, Component, render} from 'rax';
import Modal from 'rax-modal';

const Demo = (props) => {
  const [visible, setVisible] = useState(false);
  return ([
      <View onClick={() => setVisible(true)}><Text>open</Text></View>,
      <Modal
        visible={visible}
        onHide={() => {
          setVisible(false)
        }}
        onShow ={() => {
          setVisible(true)
        }}
        maskCanBeClick={true}
        contentStyle={{
          position: "absolute",
          top: "150rpx",
          width: "400rpx",
          left: "175rpx"
        }}
        >
        <Text>这里是弹窗内容</Text>
      </Modal>
  ]);
}

render(<Demo />);