让提示更智能,弹窗更灵动:Choerodon UI 浮层交互体验优化

1. 引言

在企业级应用的复杂场景下,UI 组件不仅要"长得好看",更要"显示得聪明"。

本次 Choerodon UI 迎来了一波针对交互精细化的重点更新。我们聚焦于"浮层定位"、"模态交互"与"输入提示"多个核心场景,优化了多项体验痛点,让组件能更好地服务用户:

  • **更智动的"定位":**Tooltip 新增 autoPlacement 属性,告别显示死角。

  • **更聪明的"跟随":**提示框告别"漂移",支持跟随页面滚动与元素位移跟随。

  • **更弹性的"扩展":**Modal 新增底部额外扩展区域。

  • **更顺滑的"跨端":**Modal 适配触摸拖动,打通移动端的使用边界。

  • **更详细的"提示":**输入框占位提示词溢出增加 Tooltip 提示。

2. 更智动的"定位",提示"出现得刚刚好"

过去展示提示层时,一个很常见的问题是:

  • 当弹窗位置不够时,容易遮挡住触发弹窗显示的元素,影响系统操作。

这次 Tooltip 新增配置:

  • autoPlacement :自动选择最佳气泡框位置。

当当前方向空间不足时,组件会自动寻找更合适的位置展示提示内容,而不是"硬挤"在原位置。

👉 带来的变化是:

  • 减少手动适配

  • 降低复杂布局下的遮挡问题

3. 更聪明的"跟随":告别"各走各路",让提示始终如影随形

在长表格或滚动容器中,当用户触发一个 Tooltip 后直接滚动页面,气泡往往会停留在原位,或者在定位临界点时发生反复跳动,甚至在部分特殊场景触发元素被移除后,气泡还"挂"在屏幕上,产生视觉残留。

这些问题,本质上都是:

  • 提示层"没有感知页面变化"。

本次优化:

  • **动态跟随:**优化了弹框在页面滚动、触发元素位置变化时的逻辑,确保气泡始终贴合目标,不再掉队。

  • **智能销毁:**解决了部分特殊场景触发 DOM 移除后弹窗不消失的顽疾,让 UI 界面保持整洁。

  • **动态变化:**Popover 内容尺寸异步变化后重新定位。

此外,弹窗内容显示也做了升级:

  • 优化了 Tooltip 和 Popover 组件超长内容的滚动显示。当弹窗内容超出可视范围时,会自动出现滚动条,确保完整信息可被浏览。

4. 模态框进化:更自由的定制,更直觉的控制

(1)更弹性的"扩展"

标准的 Modal 底部通常只有"确定"和"取消"按钮。但在复杂的 B 端业务中,底部可能定制额外内容,例如加个"帮助说明"的链接。

这次新增:

  • footerExtra :支持 footer 额外渲染元素

👉 带来的变化是:

  • 在保留标准操作按钮的同时,提供了一个额外的扩展区,轻松插入自定义业务逻辑,同时简化了开发,也更加稳定。

(2)更顺滑的"跨端"

在移动端或触控设备上,大尺寸弹窗经常会遮挡内容。

这次新增:

  • Modal 支持通过触摸事件拖动位置。

👉 带来的变化是:

  • 用户可以直接调整弹窗位置,而不是被固定布局"困住"。让用户在移动端操作更灵活。

5. 更详细的"提示",更好的输入体验

在紧凑的表单设计中,由于输入框宽度有限,较长的 Placeholder(占位提示词)经常会溢出,用户看不全提示。

本次优化:

  • **新增 placeholderTooltip :**现在 TextField 的占位符也支持悬浮提示了。当文字过长被截断时,用户只需悬停即可查看到完整的填写说明。

  • **配置增强:**全局 configure 支持 text-field-placeholder 类型,这意味着你可以一次性为全系统的输入框开启这一贴心功能。

欢迎试用

我们将持续迭代优化组件库,提升客户体验。如果您有更好的想法和建议,欢迎您积极反馈给我们。

Github

Modal 模态框

Tooltip文字提示

Popover气泡卡片

相关推荐
兰亭妙微UI设计公司21 小时前
兰亭妙微B端界面设计分享:Vantary海事无人系统任务平台UI/UX设计解析
ui·ux
伊玛目的门徒1 天前
deepseek harness DSH 安装皮肤脚手架(dsh‑client‑ui‑skin‑center)踩坑完整记录
ui·插件·皮肤·harness·dsh
zhchyun20082 天前
【Unity UI 进阶】仿 Element UI 打造企业级 Unity UI 组件库(05)
ui·unity·游戏引擎
tanghonghanhaoli2 天前
【图书翻译】有意义的游戏设计:桌面游戏的方法论与心理学(第1、2章)
前端·游戏·ui
bugcome_com2 天前
Avalonia UI 样式进阶实战:外置样式 + MVVM 主题切换 + 样式优先级全解析
ui
李高钢3 天前
【WPF】高级 UI 与性能优化实战:从卡顿到丝滑
ui·性能优化·wpf
MOONICK3 天前
QT的UI开发框架
qt·ui
界面开发小八哥4 天前
界面控件DevExpress Blazor v26.1新版亮点 - Filter Builder等功能升级
ui·界面控件·blazor·devexpress·ui开发
兰亭妙微UI设计公司4 天前
兰亭妙微UI设计:Neemo Project 企业AI项目管理后台全案运营价值解析
人工智能·ui
枫叶丹45 天前
MCP、A2A、AG-UI:一篇讲清 Agent 协议栈
人工智能·ui·chatgpt·agent·codex