【Axure RP9基础】 Axure标签页切换详解
【Axure RP9基础】 标签页切换
在设计原型中，PC和APP端标签页切换是常用的功能，那么在用Axure画原型时我们可以用矩形和动态面板做出标签页切换的效果。
最终效果：点击标签页，显示标签页选中状态，并切换至对应的标签页
App中常见的效果：
标签可以横版，也可以竖版，PC端效果：
步骤1：拖动矩形至画布，为矩形命名为1，输入内容：1，添加交互单击时 设置选中当前元件为真；
步骤2：为矩形添加交互样式,元件选中的样式 ，设置选中时的填充颜色、字体颜色等，可点击更多设置更多内容（一般选中时会给一个反色，抓住视线）
步骤3：拖动元件 动态面板至画布矩形1下方（动态面板的大小就是你展示数据可显示的大小），给动态面板命名，并再添加2个动态面板状态，给状态命名以示区分(因为这里我要演示三个标签页，所以对应的动态面板要用3个状态页。)
步骤4：为矩形1添加交互，单击时设置面板状态，选择对应的动态面板（所以一定要养成给元件命名的好习惯，不然加交互时找不到想找的元件），状态到：1（这里的1，2，3是动态面板的状态 ），双击进入动态面板1，随便给个状态用以区分状态123；
步骤5：复制两个矩形1（选中矩形1，按住Ctrl，用鼠标拉即可复制，当然也可以右键复制，也可以Ctrl+C，都是一样的），给新的矩形命名为2和3，调整动态面板大小（还是那句话，动态面板的大小就是你打开页面默认显示的数据大小），将矩形1，2，3全部选中添加到一个选项组，可直接输入新名称（相当于新建了一个选项组），也可以选择添加到原来有的选项组（即默认下拉出的数据）
步骤6：修改矩形2和矩形3的名称和交互，直接点击想修改的交互，将动态面板调整至对应的面板状态，矩形2单击时设置面板状态到状态2，矩形3单击时设置面板状态到状态3；
步骤7：以示区分，双击进入动态面板，在不同的状态中放入一些不同的内容；（通过页面上方中间来切换动态面板状态）
步骤8：将矩形1设置为选中，这样预览或生成时，进到该页面，矩形1是默认选中状态；
步骤9：点击预览可查看效果。
【Axure RP9基础】 Axure标签页切换详解相关推荐
- 【Axure RP9基础】CSDN登录框（二）之验证码倒计时
[Axure RP9基础]CSDN登录框(二)之验证码倒计时 需求: 先来看一下我们对点击验证码的需求: 手机号为空,提示:手机号不能为空! 手机号格式不正确,提示:手机号码格式不正确 手机号输入11 ...
- php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...
- BootStrap之标签页切换
标签页切换 标签页切换 标签页插件 第一个官方例子 调用tab("show")显示tab-pane中的内容 第一个例子的HTML+CSS代码 fade in效果 函数介绍 前提条件 ...
- JavaScript 实现 标签页 切换效果
JavaScript 实现 标签页 切换效果 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id="tab">& ...
- 微信小程序中标签页切换效果是怎么做出来的
于传统网页开发中的标签页切换效果不同的是,小程序的标签页切换更接近原生APP的交互体验!也就是可以通过左右滑动页面进行切换,类似于网页开发中的焦点图切换的效果. --这当然是通过微信小程序强大的组件和 ...
- Python爬虫之selenium对标签页切换、切换frame标签、cookie处理、执行js代码、开启无界面、以及使用代理ip和替换user-agent等方法
一.selenium对标签页切换.切换frame标签.cookie处理.执行js代码.开启无界面.以及使用代理ip和替换user-agent等方法 (一).selenium标签页的切换 当seleni ...
- 关于计算机应用基础问题,《计算机应用基础》习题及问题详解
<计算机应用基础>习题及问题详解 (17页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 19.90 积分 实用文档第一章 计算机基础知识填空题 ...
- devexpress 中的checkboxlist怎么设置间距_HTML中怎么设置h1的字体样式你知道吗？关于设置h1标签的样式详解
本篇文章主要为大家讲解了html中的h1标签的样式解析,但是如果不用css样式来做的话,那就只能在html4.01中显示了,所以我们还是尽快学习css层叠样式表吧,好了,现在让我们来说说这篇文章吧. ...
- Python基础学习之 os 模块详解
Python基础学习之 os 模块详解 文章目录 Python基础学习之 os 模块详解 1. 路径操作 1.1 os.chdir(),切换当前工作目录: 1.2 os.getcwd(),返回工作目录 ...
最新文章
- 用tarball实现liferay自动安装部署15-复制定制后的catalina.sh
- pdjango 连接mysql_Django连接MySQL
- 【Python】函数的可变可选参数传递及返回值
- 不相交集的求并算法（按集合大小求并+按高度求并）
- CentOS6.5卸载默认安装的mysql5.1，并安装mysql5.5（亲测有效）
- 深度学习和OpenCV-python读书笔记一（DNN介绍）
- 推荐系统实战第一部分 协同过滤
- mac 连接百度云服务器地址,教你怎么在 Mac 下把百度网盘映射到另一个文件夹
- 6 月 Android 系统份额：7.1 发布半年仅占比 0.6 %
- java 父子级json组装不用递归_揭秘java中无数人伤透脑筋最为神秘的技术之一——ClassLoader...
- 瑞友虚拟化系统搭建服务器,瑞友云电脑虚拟化系统 | 瑞友天翼-应用虚拟化|远程接入|桌面虚拟化|国内虚拟化整体解决方案领导者...
- 这些年的项目管理心得
- 计算机时代汉字书写有了新的方式,网络时代的汉字书写
- 激光清洗的优点和实际案例
- keil格式化代码方法
- 堰流实验报告思考题_水力学思考题 -
- 智能驾驶大数据前沿研究进展与典型应用
- b站视频下载日记新篇2021年4月3日
- 那么telnet到底是一个协议还是一个软件呢？
- vue 2.0 图片懒加载