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脚本将照片按时间线整理

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

item_get-根据ID取商品详情(shopee.item_get):跨境电商的未来趋势

根据您的需求,我为您撰写了一篇关于“item_get-根据ID取商品详情(shopee.item_get):跨境电商的未来趋势”的文章。由于篇幅限制,我将提供文章的概要和部分内容,完整的文章将需要更多细节和展开。 item_get-根据ID取商品详情(shope…

《区块链简易速速上手小册》第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…

今天聊聊软件研发部门孵化策略

声明:上述内容纯属个人瞎说,如有雷同请联系删除。 引:公司研发二部的同事召回来了,这边先恭喜他们荣耀而归。大家都欢心鼓舞、人事嘘寒问暖、综合端盘倒水;真热闹……。我们部门的同事就在边上办公,感触很深…

如何处理缓存一致性问题

* 如何解决缓存一致性问题 * 1. 更新缓存 * ①先更新缓存,再更新数据库. 如果先更新缓存成功了,但是更新数据库失败了,那么数据库将出现脏数据,否掉 * ②先更新数据库,再更新缓存. 如果先更新数据库,但更…

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

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

UMI初始化脚手架 Simple App、 Ant Design Pro、Vue Simple App、Umi Plugin 4者的区别

这四个概念分别代表不同的工具和框架,它们的主要区别如下: Simple App:这通常指的是一个基础的、最小化的应用程序。它可能只包含最基础的功能,如用户界面、一些简单的交互等。这种应用程序通常用于学习和实验目的,或者…

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

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

Android selinux调试(rk3588 android 12平台)

Android selinux调试(rk3588 android 12平台): 参考文档: Android系统10 RK3399 init进程启动(二十七) Selinux Type和Attribute https://www.jb51.net/article/277418.htm Android selinux策略文件的编译与加载 https://c.biancheng.net/view/1151.h…

WPF DataTemplate内重写BorderBrush,VisualBrush内数据源绑定提示绑定失败

定义DataTemplate 数据模板文件&#xff0c;内容如下 <DataTemplate x:Key"{DataTemplateKey {x:Type VM:TemplateListVM}}" DataType"{x:Type VM:TemplateListVM}"> <Grid Margin"0" Grid.Row"3" Height"50" Ver…

python:lxml 生成思维导图 Freemind(.mm)文件

请参阅&#xff1a;从PDF中提取目录 或者 java : pdfbox 读取 PDF文件内书签 pip install lxml ; lxml-5.1.0-cp310-cp310-win_amd64.whl (3.9 MB) 读目录.txt文件&#xff0c;使用 lxml 生成思维导图 Freemind&#xff08;.mm&#xff09;文件 编写 txt_etree_mm.py 如下…

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

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

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…

centos7 安装nacos

在 CentOS 7 上安装 Nacos 的步骤可以概括如下&#xff1a; 前提条件&#xff1a; 安装Java环境&#xff1a;Nacos依赖于Java 8或以上版本&#xff0c;确保系统已安装Java。可以通过以下命令检查和安装&#xff08;假设使用OpenJDK&#xff09;&#xff1a; # 检查是否已安装…

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

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

【AudioPolicy To AudioHAL笔记(一)】AudioPolicy启动过程

AudioPolicy启动过程 一、总体启动过程二、代码分析三、动态分析 /*****************************************************************************************************************/ 声明: 本博客内容均由https://blog.csdn.net/weixin_47702410原创&#xff0c;转载or…