提示条是对页面信息或功能的补充说明、场景拓展与风险警示类组件。元件库目前提供两类提示条:气泡提示条与自动消失提示条。前者主要用于页面信息补充与功能入口拓展,后者用于用户操作后的即时状态反馈。
1️⃣动图效果
气泡提示条的核心应用场景为信息补充说明与隐藏功能拓展。
🔹信息提示场景:当用户点击或悬停在页面内的指定图标、文字上时,将以悬浮弹窗的形式展示该元素对应的补充说明信息,辅助用户理解内容含义。
🔹功能操作场景:当用户点击或悬停在页面内的指定图标、按钮上时,将以悬浮弹窗的形式展示更多折叠的功能操作项,扩展操作入口的承载能力。
自动消失提示条通常出现在页面顶部或居中位置,用于实时反馈用户操作的执行结果,支持信息提示、成功通知、失败告警、错误警示等多种反馈类型。
2️⃣使用方法
1.气泡提示条
- 在【元件库->提示条】目录下,选取红框标注范围内的气泡提示条组件,直接拖拽至原型画布即可完成初始添加。
- 同时选中已拖拽添加的气泡提示条,以及用于触发该提示条显示的目标图标,右键选择创建动态面板,将两个元素归入同一动态面板中。
- 将气泡提示条组件设置为默认隐藏状态,注意:该组件为组合结构,操作时需选中整体进行设置。
- 参考提示条官方示例,为触发图标配置点击或鼠标移入交互事件,通过该事件触发气泡提示条的显示动作。
2.自动消失提示条
为原型页面创建全局统一的自动消失提示条动态面板,页面内所有自动消失提示条均需放置在该面板中,单个提示条对应一个独立的状态页。默认设置该动态面板为隐藏状态,放置于页面层级最底部,并勾选内容自适应属性(Fit to Content)。
完成动态面板创建、并向对应状态页中添加自动消失提示条组件后,为触发提示条显示的按钮配置点击交互事件,具体配置规则可参考提示条官方示例。
3️⃣制作方法
🔹制作思路
气泡提示条与自动消失提示条的核心实现逻辑大体相近,二者均通过监听触发组件的鼠标移入或点击交互事件,来唤起原本处于隐藏状态的对应提示条。二者的差异主要体现在展示规则与交互逻辑上:气泡提示条会与触发组件绑定联动,位置随触发组件同步变化,二者在交互逻辑上为一体化结构,且需单独配置鼠标移出的交互事件来实现提示条的关闭;自动消失提示条则无需与触发组件保持位置绑定,可统一收纳至同一动态面板下进行管理,被触发后会在预设时长内自动消失,无需额外配置独立的关闭交互事件。
🔹组件结构
气泡提示条与自动消失提示条的基础构成一致,仅包含底板、提示图标、提示文本三部分。
若要实现完整可用的交互效果,还需额外配置用于触发显示的图标、文字或按钮。相比气泡提示条,自动消失提示条的结构更为复杂,还需配套添加蒙层,以及用于统一收纳所有自动消失提示条的动态面板。
🔹交互逻辑
1.气泡提示条
气泡提示条共包含两类交互事件:一类是前文提到的、由触发元素执行鼠标移入/点击操作时触发的显示事件;另一类是作用于提示条本身的鼠标移出事件,用于实现提示条的隐藏动作。
2.自动消失提示条
自动消失提示条仅需配置一类点击交互事件,该事件同时实现两个动作:一是触发提示条的显示,二是启动计时逻辑,在预设时长后自动关闭提示条。具体配置规则可参考前文的交互事件截图。
4️⃣要点总结
🔹 提示条组件的灵活运用,是对动态面板特性、鼠标移入/移出等交互事件掌握熟练度的综合考验。
🔹 自动消失提示条与气泡提示条的核心差异在于,前者的样式与展示位置相对标准化,统一收纳在同一动态面板中更便于全局管理。