Axure 动态面板初使用-实现简单的tab切换页面效果

使用工具版本

Axure 9

实现的效果

在这里插入图片描述

步骤过程

1、打开Axure 9,默认进入一个空白页,首先从元件库拉一个动态面板到页面中,位置肯定是C位咯~
1

2、将面板尺寸调整一下,设置成你喜欢的数字,比如我就喜欢800×600
2

3、然后给动态面板起个名字,随便起一个你容易识别的名字就可以,我这里就叫tab面板吧~
3

4、尺寸、名称设置好后,双击页面中的面板,进入面板编辑模式
4

5、从元件库拉3个按钮到面板内,用作tab点击按钮,放好对应的位置,文字分别改成A、B、C
5
6、再从元件库拉一个矩形到里面,并调整适合的尺寸大小
6

7、在矩形上面放一些内容,这里我拉了一段文本放在上面,调整一下字号、行距
7

8、然后我们将此面板状态命名为tabA,到这里就做好了tab切换的默认初始页面了。
8

9、下面我们复制tabA状态,点击复制按钮

9

10、点击复制按钮两次,并命名为tabB和tabC
10

11、选择tabB,进入tabB状态面板进入编辑,调整按钮及页面内容
11

12、tabB编辑好后,再进入tabC进行编辑调整
12

13、这3个面板状态编辑好之后,我们下面给这3个tab按钮要加上交互效果。我们先回到tabA状态,选中[B按钮],然后在交互面板中点击[新交互]按钮

13

14、然后选择[鼠标单击 时]
14

15、再选择[设置面板状态]
15

16、再选择[tab面板],就是我们之前创建的动态面板
16

17、接着我们将面板状态设置到[tabB]
17

18、点击[确定]按钮,保存好
18

19、然后给[C按钮],重复上面13-18的步骤,区别在于我们要把面板状态设置到[tabC]。

19

20、同样的,我们在面板状态tabB给[A按钮]、[C按钮]设置交互效果

20

21、再在面板状态tabC给[A按钮]、[B按钮]设置交互效果
21

22、3个面板状态都设置完成后,点击关闭按钮,关闭面板编辑
22

23、然后按F5或者点击预览按钮,到浏览器中就可以看到我们做出来的效果了。
在这里插入图片描述
以上就是本次关于 Axure 动态面板的初级使用教程,希望对你有一些帮助。


[1] 原文阅读

我是Just,这里是「设计师工作日常」,求点赞求关注!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/663065.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习日志以及个人总结(13) 指针!

指针 定义 访问内存地址 操控硬件 指针: 指针基本数据据类 指针数组 指针函数 指针指针 1.指针:就是地址-----就是内存的单元的编号 2.指针变量 语法: 基类型* 指针变量名; 基类型-------数据类型//基础数据类型 //数组…

python脚本将照片按时间线整理

说明:有一次自己瞎折腾,然后把服务器相册搞崩了,后来做了备份同步给找了回来,但是相册的时间线全乱了,看起来非常难受。所以就想通过文件夹的形式把照片重新分类,分类后的结构如下(红色字体为文件夹)&#…

《区块链简易速速上手小册》第7章:区块链在其他行业的应用(2024 最新版)

文章目录 7.1 供应链管理7.1.1 供应链管理中区块链的基础7.1.2 主要案例:食品安全追踪7.1.3 拓展案例 1:制药供应链7.1.4 拓展案例 2:汽车行业的零部件追踪 7.2 区块链在医疗保健中的应用7.2.1 医疗保健中区块链的基础7.2.2 主要案例&#xf…

1451A/D/F捷变信号发生器

01 1451A/D/F捷变信号发生器 产品综述: 1451系列捷变信号发生器采用直接数字合成(DDS)技术和直接模拟合成技术(ADS)相结合的设计方案,实现覆盖10MHz~3/20/40GHz全频段的频率捷变,捷变时间小于…

分布式事务(四)——TCC补偿模式解决方案

系列目录: 《分布式事务(一)—— 事务的基本概念》 《分布式事务(二)—— CAP和Base理论》 《分布式事务(三)—— 两阶段提交解决方案(2PC)》 一、常见分布式事务解决…

QML自定义ComboBox组件,支持动态筛选

QtQuick.Controls提供了ComboBox组件,该组件能够满足日常的下拉选择框的需求,但当需要用户在ComboBox中通过输入关键字进行自动匹配时,原生的组件虽然提供了editable属性用于输入关键字,但是匹配内容不弹出下拉框,无法…

03、全文检索 -- Solr -- Solr 身份验证配置(给 Solr 启动身份验证、添加用户、删除用户)

目录 全文检索 -- Solr -- Solr 身份验证配置启用身份验证&#xff1a;添加用户&#xff1a;删除用户&#xff1a; 全文检索 – Solr – Solr 身份验证配置 学习之前需要先启动 Solr 执行如下命令即可启动Solr&#xff1a; solr start -p <端口>如果不指定端口&#xf…

7-2.递归思想代码练习题

例题1.按顺序打印一个数据的每一位 1234 输出 1 2 3 4 解决问题的思路 如何拿到这个数的每一位 1234%104 1234/10123 123%103 123/1012 12%102 12/101 1%101 递推公式&#xff1a;%10 /10 初始条件&#xff1a;1-9之间的数直接打印&#xff08;n<10&#xff09; n>10 进行…

最近nvm安装报错的原因找到了——npm原淘宝镜像正式到期!

前言 &#x1f4eb; 大家好&#xff0c;我是南木元元&#xff0c;热爱技术和分享&#xff0c;欢迎大家交流&#xff0c;一起学习进步&#xff01; &#x1f345; 个人主页&#xff1a;南木元元 目录 背景 错误原因 问题排查 淘宝镜像 证书到期 问题解决 结语 背景 我们…

HAL库配置CAN通信

一、CAN总线波特率计算 CAN总线通信的各节点通信时会产生相位差&#xff0c;所以要进行位同步&#xff0c;两个节点保持步调一致。 CAN_SJW&#xff1a;重新同步跳跃宽度(SJW) 。定义了在每位中可以延长或缩短多少个时间单元的上限。其值可以编程为1到4个时间单元。 CAN_BS1&a…

【数据分享】1929-2023年全球站点的逐日最低气温数据(Shp\Excel\免费获取)

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、湿度等指标&#xff0c;其中又以气温指标最为常用&#xff01;说到气温数据&#xff0c;最详细的气温数据是具体到气象监测站点的气温数据&#xff01; 之前我们分享过1929-2023年全球气象站…

wsl + vscode 离线配置 ERROR: Faild to download https://update.code.visualstudio.com

内网情况配置 wsl 和 vscode。在wsl中下载不了 vscode 的核心。 报错&#xff1a; ERROR: Faild to download https://update.code.visualstudio.com/commit:8b3775030ed1a69b13e4f4c628c612102e30a681/server-linux-x64/stable 很多情况下是没有现成的VS Code Server程序的&…

三好夫人:真爱战胜一切

真爱如同飞蛾扑火&#xff0c;明知前方是毁灭&#xff0c;却仍心甘情愿地奔赴。如果一个男人真心爱你&#xff0c;他会倾尽所有&#xff0c;不遗余力地满足你的需求。这份爱&#xff0c;会在他的言行举止中流露出来。男人对你的爱&#xff0c;常常表现在他的言语之中。 如果他爱…

桌面显示器应用Type-C接口有什么好处

随着科技的不断发展&#xff0c;桌面显示器作为我们日常工作中不可或缺的设备之一&#xff0c;也在不断更新换代。其中&#xff0c;Type-C接口的应用成为了桌面显示器发展的一个重要趋势。那么&#xff0c;桌面显示器应用Type-C接口究竟有什么好处呢&#xff1f; 首先&#xff…

本地运行面壁智能的“贺岁模型”:MiniCPM 2B

简单聊聊可以在端侧运行的 Mini CPM 2B SFT / DPO 版本的模型。 写在前面 模型是好是坏&#xff0c;其实不用看公众号们的营销&#xff0c;小马过河问题&#xff0c;自己试试就知道了。当然&#xff0c;2B 参数量的模型&#xff0c;适合的场景肯定不是 34B / 70B 所擅长的&am…

VBA_MF系列技术资料1-325

MF系列VBA技术资料 为了让广大学员在VBA编程中有切实可行的思路及有效的提高自己的编程技巧&#xff0c;我参考大量的资料&#xff0c;并结合自己的经验总结了这份MF系列VBA技术综合资料&#xff0c;而且开放源码&#xff08;MF04除外&#xff09;&#xff0c;其中MF01-04属于…

项目安全问题及解决方法------使用合适的算法

Spring Security 已经废弃了 MessageDigestPasswordEncoder&#xff0c;推荐使用 BCryptPasswordEncoder private static BCryptPasswordEncoder passwordEncoder new BCryptPasswordEncoder(); GetMapping("performance")public void performance() {StopWatch st…

android开发---简单购物商城(JAVA) (一)

包括&#xff1a;商品展示&#xff0c;商品详情&#xff0c;购物车&#xff0c;删除&#xff0c;一键清除&#xff0c;返回 运用sqllist 另外因为一篇写不下 继续可看 源码二 下面是目录 运行样子 下面是源码 AndroidManifest.xml <?xml version"1.0" e…

统计图表在线配置服务-百度 SugarBI的学习笔记

最近&#xff0c;有个产品要支持统计图表在线可配置&#xff0c;这样&#xff0c;当用户有新增统计指标的需求时&#xff0c;运维人员通过界面化配置&#xff0c;就可以增加统计指标了&#xff0c;不用开发写代码&#xff0c;画页面了。 上网查了下相关的组件&#xff0c;感觉…

SG2520CAA汽车用晶体振荡器

爱普生SG2520CAA是简单的封装晶体振荡器&#xff08;SPXO&#xff09;&#xff0c;具有CMOS输出&#xff0c;这款SPXO是汽车和高可靠性应用的理想选择&#xff0c;符合AEC-Q200标准&#xff0c;功耗低&#xff0c;工作电压范围为1.8 V ~ 3.3 V类型&#xff0c;宽工作温度-40℃~…