跳到主要内容

弹窗页配置

弹窗页以浮层形式覆盖在主页面上,适合表单填写、详情查看等场景。弹窗页通过窗口按钮触发打开。

弹窗页配置


弹窗类型

窗口模式

居中弹窗,类似传统的对话框:

  • 居中显示在画布上方
  • 可配置宽度和高度(不超过主页面尺寸)
  • 可配置圆角半径(0–64px)
  • 带阴影效果
  • 支持淡入动画或无动画

抽屉模式

从屏幕侧边滑入的面板:

  • 可选择从左侧、右侧、顶部或底部滑入
  • 可配置抽屉厚度
  • 占据对应方向的全部长度
  • 支持滑入动画或无动画

弹窗页配置


背景遮罩

弹窗打开时的背景遮罩样式:

预设说明
不显示遮罩
暗化半透明黑色遮罩
模糊背景内容模糊效果
暗化+模糊半透明遮罩 + 背景模糊

标题栏

弹窗顶部的标题区域:

  • 可启用或隐藏
  • 支持配置标题文字、文字颜色、大小、粗细和对齐方式
  • 可配置关闭按钮的图标、位置和背景样式

底部操作栏

弹窗底部的操作按钮区域:

  • 可启用或隐藏
  • 显示取消和确认按钮,可自定义按钮文字
  • 确认按钮支持数据绑定:
    • 绑定数据点,点击确认时将值写入
    • 支持公式表达式计算下发值
    • 支持条件表达式控制可用状态
    • 支持操作权限等级控制
  • 可配置点击确认后自动关闭弹窗
  • 取消按钮始终关闭弹窗

关闭方式

弹窗支持多种关闭方式:

  • 点击标题栏的关闭按钮
  • 点击背景遮罩关闭(可启用/禁用)
  • 点击底部取消按钮关闭
  • 确认操作后自动关闭(可配置)

打开方式

弹窗页由窗口按钮触发打开:

  • 选中窗口按钮组件,配置目标弹窗页
  • 预览模式下点击按钮即可打开对应的弹窗
  • 支持多个弹窗同时打开,按打开顺序层叠显示

样式模式

弹窗的标题栏和底部栏颜色支持两种模式:

  • 画布自适应:自动跟随弹窗页面的画布背景色生成配色
  • 手动配置:自定义标题栏和底部栏的背景色、文字颜色
  • 可为确认按钮设置强调色