Taro React组件使用（1） —— Overlay 遮罩层【渐入渐出动画遮罩层】

Rattenking

发布于 2022-11-02 18:15:45

1.8K0

发布于 2022-11-02 18:15:45

文章被收录于专栏：RattenkingRattenking

Overlay 遮罩层

提供一个简单的 Overlay 遮罩层，在页面上的层级为 1026;

1. 使用指南

在 Taro 文件中引入组件，将组件放入src下的components文件夹中

import RuiOverlay from "../../components/RuiOverlay/RuiOverlay";

2. 基础用法

2.1 组件使用

{/* 基本案例 */}
<RuiOverlay isOpened={isShowBase}
  onClose={() => { this.setState({ isShowBase: false }) }} />

2.2 显示遮罩层

<View className="rui-flex-ac rui-list-item"
  onClick={() => { this.setState({isShowBase: true}) }}>
  <Text className="rui-fs30 rui-fg">基本案例</Text>
  <Text className="rui-icon rui-icon-arrow-right rui-fa rui-fs30"></Text>
</View>

3. 嵌入内容居中

3.1 组件使用

{/* 嵌入内容居中 */}
<RuiOverlay isOpened={isShowContent}
  onClose={() => { this.setState({isShowContent: false}) }}>
  <View className="rui-flex-cc"
    style={`background:#fff;width:100px;height:100px;`}>123456</View>
</RuiOverlay>

3.2 显示遮罩层

<View className="rui-flex-ac rui-list-item"
  onClick={() => { this.setState({isShowContent: true}) }}>
  <Text className="rui-fs30 rui-fg">嵌入内容居中</Text>
  <Text className="rui-icon rui-icon-arrow-right rui-fa rui-fs30"></Text>
</View>

4. 嵌入内容底部

4.1 组件使用

{/* 嵌入内容底部 */}
<RuiOverlay isOpened={isShowBottom}
  position="bottom"
  onClose={() => { this.setState({isShowBottom: false}) }}>
  <View className="rui-flex-cc"
    style={`background:#fff;width:100%;height:50vh;`}>123456</View>
</RuiOverlay>

4.2 显示遮罩层

<View className="rui-flex-ac rui-list-item"
  onClick={() => { this.setState({isShowBottom: true}) }}>
  <Text className="rui-fs30 rui-fg">嵌入内容底部</Text>
  <Text className="rui-icon rui-icon-arrow-right rui-fa rui-fs30"></Text>
</View>

5. 设置透明度

5.1 组件使用

{/* 设置透明度 */}
<RuiOverlay isOpened={isShowOpacity}
  onClose={() => { this.setState({isShowOpacity: false}) }}
  opacity="0.5" />

5.2 显示遮罩层

<View className="rui-flex-ac rui-list-item"
  onClick={() => { this.setState({isShowOpacity: true}) }}>
  <Text className="rui-fs30 rui-fg">设置透明度</Text>
  <Text className="rui-icon rui-icon-arrow-right rui-fa rui-fs30"></Text>
</View>

6. 设置动画时间

6.1 组件使用

{/* 设置动画时间 */}
<RuiOverlay isOpened={isShowDuration}
  duration={1000}
  onClose={() => { this.setState({isShowDuration: false}) }}/>

6.2 显示遮罩层

<View className="rui-flex-ac rui-list-item"
  onClick={() => { this.setState({isShowDuration: true}) }}>
  <Text className="rui-fs30 rui-fg">设置动画时间</Text>
  <Text className="rui-icon rui-icon-arrow-right rui-fa rui-fs30"></Text>
</View>

7. RuiOverlay 参数

参数	说明	类型	可选值	默认值
isOpened	是否显示遮罩层	Boolean	-	false
zIndex	页面上的层级	Number	-	1026
opacity	遮罩层的透明度	Number	-	0.4
position	内容所在位置	String	top、left、right、bottom、center	center
duration	渐入渐出动画时长	Number	-	300