智能小程序 Ray 开发实践——视图容器组件 PageContainer 和 CoverView 介绍

PageContainer

页面容器

导入

import { PageContainer } from '@ray-js/ray';

属性说明

属性	类型	默认值	说明	支持平台
className	string		样式名	涂鸦、微信
show	boolean	false	是否显示容器组件	涂鸦、微信
duration	number	300	动画时长，单位毫秒	涂鸦、微信
zIndex	number	100	z-index 层级	涂鸦、微信
overlay	boolean	true	是否显示遮罩层	涂鸦、微信
position	string	bottom	弹出位置，可选值为 top bottom right center	涂鸦、微信
round	boolean	false	是否显示圆角	涂鸦、微信
overlayStyle	string 或 React.CSSProperties		自定义遮罩层样式	涂鸦、微信
customStyle	string 或 React.CSSProperties		自定义弹出层样式	涂鸦、微信
onBeforeEnter	eventhandle		进入前触发	涂鸦、微信
onEnter	eventhandle		进入中触发	涂鸦、微信
onAfterEnter	eventhandle		进入后触发	涂鸦、微信
onBeforeLeave	eventhandle		离开前触发	涂鸦、微信
onLeave	eventhandle		离开中触发	涂鸦、微信
onAfterLeave	eventhandle		离开后触发	涂鸦、微信
onClickOverlay	eventhandle		点击遮罩层时触发	涂鸦、微信

 

示例代码

基本使用

import React from 'react';
 
import { PageContainer, Button, View } from '@ray-js/components';
 
export default function Demo() {
  const [isShow, setIsShow] = React.useState(false);
  const toggleIsShow = () => {
    setIsShow(!isShow);
  };
  return (
    <React.Fragment>
      <Button onClick={toggleIsShow}>从顶部弹出无蒙层</Button>
      <PageContainer
        show={isShow}
        position="top"
        onClickOverlay={toggleIsShow}
        overlay={false}
      >
        <View style={{ height: '200px' }}>
          <Button onClick={toggleIsShow}>关闭</Button>
        </View>
      </PageContainer>
    </React.Fragment>
  );
}

 

CoverView

覆盖在原生组件之上的文本视图

导入

import { CoverView } from '@ray-js/ray';

属性说明

属性	类型	默认值	说明	支持平台
className	string		样式名	涂鸦、微信

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。