肥猫SEO论坛»论坛首页 › 行业交流 › 软件下载 › Axure教程：用动态面板制作Tab切换

高端网站建设可签合同可上门沟通	站群程序定制/蜘蛛池租用	全行业SEO接单QQ1624516415	全行业SEO接单QQ1624516415
2000+站点外链一键通发	原创SEO文章代写【点击】	点击加入本站VIP 发帖免审核	广告位招租

honghu2

23万积分	0 好友	7万主题

发消息

Axure教程：用动态面板制作Tab切换

TA的其它主题

发表于 2021-9-26 16:22 | 查看: 524| 回复: 0

Axure教程：用动态面板建造Tab切换

天天前进一点，离大神的方针又近了一些。小教程小履历，只是为了提高你的技术程度，把学到的履历机动的应用到你的交互设计上，才是迈入大神圈子的第一步。动态面板是一个很是有效组件，不单具备多页面属性，还具备绝对定位，溢出转动等多种超强属性，以是动态面板的应用是必需要把握的axure 技能。

此案例里的一些重点以下：
原件多种交互样式的应用原件选项组的应用动态面板多状况的应用1、画Tab标签1. 拖入一个矩形
去掉3个边，只留下下单边，若是你用的我的《快速原型组件库》，可以直接拖入“下单边矩形”，设置一下尺寸为100×40（尺寸这类工具，可以按本身需求来，下同），起个名字Tab1（给原件起名字这个习气必定要养成，便利本身，也便利他人）。

2. 交互样式设置
设置了鼠标悬停样式及选定样式，此处可按照你的需求自行调解样式。

3. 设置选项组名称
选项组的功效，一般用在表单的单选框上，不异的选项组，可以联动单选。此处，咱们可以将平凡元件编组，一样让其具备单选框的结果。

4. 添加根基交互动作
【动作】

“鼠标点击时”，设置“选中状况”，当前元件（This），设置选中状况为“值”、true。

5. 复制多个Tab标签
复制多个Tab标签，一字排开，别离改下名称，便于辨认，Tab一、Tab二、Tab3；把Tab1的选中勾上，Tab2和Tab3的选中都去掉。

做完这一步，便可以看到开端的结果了。
2、画Tab页面1. 拖入一个矩形
设置一下尺寸300×191（按照你的需求来可以），简略调下演示，输入文字，便于结果区分。

2. 将矩形转换为动态面板
给动态面板起个名字，便于辨认Tab-box。

3. 复制动态面板状况
经由过程复制状况，一共三个状况State1 – State3

4. 编纂状况内容
简略编纂下各状况内容，演示的时辰，结果更好。

3、设置动作1. 添加点击切换联动
别离给方才画的三个tab切换按钮，添加动态面板联动动作。

【动作1】

设置面板状况“Tab-box”选择状况“State1”（Tab1对应State1,、Tab2对应State二、Tab3对应State3），进入和退出动画Tab1为“向右滑动”时候“500”毫秒，Tab2和Tab3为“向左滑动”时候“500”毫秒。