【移动元件库】11.提示条

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