一、制作Tab页面
1、 拖入一个矩形
去掉3个边,只留下下单边,如果你用的我的《快速原型组件库》,可以直接拖入“下单边矩形”,设置一下尺寸为100×40(尺寸这种东西,可以按自己需求来,下同),起个名字Tab1(给原件起名字这个习惯一定要养成,方便自己,也方便别人)
2、 交互样式设置
设置了鼠标悬停样式及选定样式,此处可根据你的需求自行调整样式
3、设置选项组名称
选项组的功能,一般用在表单的单选框上,相同的选项组,可以联动单选,此处,我们可以将普通元件编组,同样让其具有单选框的效果
4、添加基本交互动作
【动作】
“鼠标点击时”
设置“选中状态”,当前元件(This),设置选中状态为“值”、true
5、复制多个Tab标签
复制多个Tab标签,一字排开,分别改下名称,便于识别,Tab1、Tab2、Tab3;把Tab1的选中勾上 ,Tab2和Tab3的选中都去掉。
做完这一步,就可以看到初步的效果了
二、制作Tab页面
1、 拖入一个矩形
设置一下尺寸300x191(根据你的需求来可以),简单调下演示,输入文字,便于效果区别
2、 将矩形转换为动态面板
给动态面板起个名字,便于识别Tab-box
3、 复制动态面板状态
通过复制状态,一共三个状态State1 – State3
4、 编辑状态内容
简单编辑下各状态内容,演示的时候,效果更好