SafeArea 安全区域

安全区域组件，用于处理刘海屏、底部安全区域等适配问题

演示

9:41

代码示例

<!-- 基础用法(bottom) -->
  <re-safe-area class="demo-safe-area-default" position="bottom"> <view class="demo-safe-area-content"> <text class="demo-safe-area-text">底部安全区域</text> </view> </re-safe-area>

<!-- top位置 -->
  <re-safe-area class="demo-safe-area-top" position="top"> <view class="demo-safe-area-content"> <text class="demo-safe-area-text">顶部安全区域</text> </view> </re-safe-area>

<!-- both位置 -->
  <re-safe-area class="demo-safe-area-both" position="both"> <view class="demo-safe-area-content"> <text class="demo-safe-area-text">上下安全区域</text> </view> </re-safe-area>

<!-- 自定义背景色 -->
  <re-safe-area class="demo-safe-area-bg" position="bottom" bgColor="#0052d9"> <view class="demo-safe-area-content"> <text class="demo-safe-area-text demo-safe-area-text--white">蓝色背景</text> </view> </re-safe-area>

<!-- 自定义样式 -->
  <re-safe-area class="demo-safe-area-custom-style" position="bottom" customStyle="border: 1px solid #e7e7e7;"> <view class="demo-safe-area-content"> <text class="demo-safe-area-text">自定义样式</text> </view> </re-safe-area>

<!-- 带内容 -->
  <re-safe-area class="demo-safe-area-content-area" position="bottom"> <view class="demo-safe-area-rich"> <text class="demo-safe-area-rich-title">内容标题</text> <text class="demo-safe-area-rich-desc">这是一段内容描述文字</text> </view> </re-safe-area>

<!-- 多个safe-area -->
  <re-safe-area class="demo-safe-area-multi-1" position="bottom"> <view class="demo-safe-area-content"> <text class="demo-safe-area-text">安全区域1</text> </view> </re-safe-area>
  <re-safe-area class="demo-safe-area-multi-2" position="bottom" bgColor="#f0f0f0"> <view class="demo-safe-area-content"> <text class="demo-safe-area-text">安全区域2</text> </view> </re-safe-area>

<!-- 不同背景色对比 -->
  <re-safe-area class="demo-safe-area-color-1" position="bottom" bgColor="#ff0000"> <view class="demo-safe-area-content"> <text class="demo-safe-area-text demo-safe-area-text--white">红色背景</text> </view> </re-safe-area>
  <re-safe-area class="demo-safe-area-color-2" position="bottom" bgColor="#00aa00"> <view class="demo-safe-area-content"> <text class="demo-safe-area-text demo-safe-area-text--white">绿色背景</text> </view> </re-safe-area>

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-safe-area />。

API

SafeArea Props

名称类型默认值描述必传
positionstringbottom @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}安全区域位置 @default bottom @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
bgColorstring#ffffff @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}背景色 @default #ffffff @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
customStylestring"" @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}自定义样式 @default "" @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y

SafeArea Events

名称参数描述
---

SafeArea Slots

名称描述
default默认插槽
List 虚拟列表
虚拟列表组件，用于大数据量列表的高性能渲染
Transition 过渡动画
过渡动画组件，用于元素的显示/隐藏过渡效果，支持淡入淡出、滑动、缩放等