动态面板:元件样式联动

时间:2024-05-21 09:42:44

动态面板:
①动态面板像一个透明袋(可调整大小)
②动态面板里面的状态State1…(层级)不透明(可调整大小)
③动态面板属性中的【自动调整为内容尺寸】(不勾选)

1.元件准备
动态面板:元件样式联动
注意:要调整好动态面板的大小和距离
动态面板:元件样式联动
动态面板:元件样式联动
2.设置交互样式,分两部分设置图片和矩形元件
动态面板:元件样式联动
动态面板:元件样式联动
动态面板:元件样式联动
动态面板:元件样式联动
3.要矩形与图标同时显示鼠标悬停的效果,可以在动态面板的元件属性中勾选【触发内部元件鼠标交互】
动态面板:元件样式联动

效果:边框互相遮挡情况;解决办法是为每个动态面板【鼠标移入时】事件的用例都添加一个动作,这个动作为【置于顶层】,选择元件为“当前元件”
动态面板:元件样式联动
4.新建交互——鼠标移入时——置于顶层
动态面板:元件样式联动
效果
动态面板:元件样式联动
动态面板:元件样式联动
5.设置"关注矩形框"的字色和边框颜色的交互样式
动态面板:元件样式联动
6.设置"Focus"动态面板的交互样式
新建交互——鼠标移入时——显示/隐藏
动态面板:元件样式联动
7.新建交互——鼠标移出时——显示/隐藏
动态面板:元件样式联动
8.在"Focus"动态面板上要把动态面板属性中的触发内部元件鼠标交互选上(同上第3步)

效果:边框被挡住
动态面板:元件样式联动
9.在【鼠标移入时】插入动作【置于顶层/底层】
动态面板:元件样式联动
效果
动态面板:元件样式联动
完成!