Axure RP9使用指南

news2025/2/25 22:20:35

1、快捷键

选中图层移动到上一层
ctrl + [
选中图层移动到下一层
ctrl + ]
选中图层移动到顶层
ctrl + shift + [
选中图层移动到底层
ctrl + shift + ]
合并为一组
ctrl + G
取消合并
ctrl + shift + G
锁定位置和尺寸
ctrl + K
解锁
ctrl + shift + K
拖动页面可以按住空格再通过鼠标拖动,这样不会失误拖动绘制的页面元素

2、元件

(1)引入外部元件库。常用的是AntDesign的常用组件和AxhubCharts常用图表库
在这里插入图片描述
(2)自定义元件库
a、新建元件库
在这里插入图片描述
b、绘制完成后(举栗说明)
在这里插入图片描述c、另存为
在这里插入图片描述
d、后续将它作为一个元件库引入即可

3、母版

一些组件需要重复使用,就可以建立一个母版。使用起来很灵活。
(1)先创建一个公共组件
在这里插入图片描述右键将其转换为母版
(2)在其他页面选择创建的母版,拖动到页面即可
(3)在拖动后创建的组件 右键可以可以看到当前是 锁定到母版中的位置,现在改变模板中组件的位置,其他页面该组件的位置也会改变。
如果选择脱离母版,这个组件就会变成一个正常的组件。

在这里插入图片描述

4、动态面板(重要)

动态面板中可以设置状态,是axure中页面动态交互的主要手段
在这里插入图片描述

(1) 双击动态面板,创建状态。

在这里插入图片描述

(2) 添加交互按钮来切换页面

在这里插入图片描述

选中按钮后,新建交互

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

(3) 在浏览器预览

在这里插入图片描述

5、内联框架

(1)创建一个内联框架

在这里插入图片描述

可以将滚动条去掉来更好的模拟显示一个单页面应用

在这里插入图片描述

(2)将这个内联框架和想要动态切换的内容区相关联。举个例子

在这里插入图片描述
在这里插入图片描述

(3)浏览器预览查看效果

在这里插入图片描述

6、中继器

一个中继器可以分为样式、数据、动作三个部分。直接上例子

(1)模拟一个销售平台,可以按照销量价格排序。

在这里插入图片描述

(2)双击中继器进入样式编辑状态,添加销售商品的 商品名、价格、销量

在这里插入图片描述

保存后:
在这里插入图片描述

(3)填充数据

单击中继器,在中继器的样式中可以看到数据属性。表格的表头是属性名,表格列是具体的值
在这里插入图片描述

右键可引入图片

在这里插入图片描述

(4)添加数据和样式的连接

a、单击中继器设置每项加载事件

在这里插入图片描述

b、设置文本

在这里插入图片描述

c、选择中继器其中一项

在这里插入图片描述

d、点击函数 fx

在这里插入图片描述

e、选择销量对应先前配置的数据变量

在这里插入图片描述

设置完成后:

在这里插入图片描述

f、结果:

在这里插入图片描述

(5)添加 销量和价格排序 ‘动作’

a、点击销量(价格)按钮添加单击时排序

在这里插入图片描述

b、添加排序方式和对应的变量

在这里插入图片描述

c、浏览器预览并查看结果

在这里插入图片描述

7、未完待续。。。

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

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

相关文章

CSS实现文字颜色渐变

三行代码即可实现: background: linear-gradient(to bottom, #ffff, #f8fdff, #acf5ff, #67eeff, #24d8ff);-webkit-background-clip: text;color: transparent; 一 先设置背景颜色渐变 background 渐变属性可选值: 1 linear-gradient 为线性渐变…

JavaScript的节点操作 —— 增加节点

目录 JavaScript中的节点操作分为:增、删、改、查(获取),四大类型。 我们直接利用案例来学习: HTML布局代码: JavaScript代码实现: 第一步:获取所有要用到的元素对象&#xff…

Vue3中toRef以及toRefs的基本使用

toRef以及toRefs 作用:创建一个ref对象,其value值指向另一个对象中的某个属性。 语法:const name toRef(obj,name) 应用:要将响应式对象中的某个属性单独提供给外部使用时 拓展:toRefs与toRef功能一致,但可以批量创建多个ref对…

vue报错 Error in render: “TypeError: Cannot read properties of undefined (reading ‘nickname‘)“

起因:我用axios请求数据(可以看见数据了,已经请求成功的),最后加载在模板上(页面模板上有内容),但是控制台出现了一个奇怪的错误 在created()钩子函数请求接口并报错数据&#xff0…

css 如何实现文本竖排、横排展示

writing-mode 该属性定义了文本在水平或垂直方向上如何排布 writing-mode:horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr接下来和我一起看看各个属性值的用法吧&#xff01;Go! <style>.root {border: 1px solid green;width: 400px;height: 4…

Vue内置组件的component标签

component标签&#xff1a;它的用途是可以动态绑定我们的组件,根据数据不同更换不同的组件. 有一个is属性&#xff0c;is的作用就是显示指定的组件 官方说明&#xff1a;渲染一个“元组件”为动态组件。依 is 的值&#xff0c;来决定哪个组件被渲染 使用方式也很简单&#xf…

nvue基础快速入门

一、uniapp连接手机 1、用USB让手机和电脑连接 2、点击3---8次手机版本信息打开开发者模式 3、在更多设置里面找到开发者选项 4、打开USB调试和允许手机可以USB安装&#xff0c;以及不要让手机只允许充电&#xff0c;要打开文件传输模式&#xff08;在手机消息栏里面会有提示…

前后端交互流程

1.前后端交互: 前后端交互&#xff0c;也可以理解为数据交互。前端需要获取&#xff08;GET&#xff09;的数据获取上传&#xff08;POST&#xff09;的数据&#xff0c;要通过 请求 来完成的&#xff0c;前端发送请求&#xff0c;后端接收到请求后&#xff0c;便进行对数据库…

若依移动端Ruoyi-App——引入uview2.0开发项目

1. 背景&#xff1a; 若依移动端Ruoyi-App只有个人中心&#xff0c;登录&#xff0c;其他模块都是建设中&#xff0c;因uniapp本身样式不够美观&#xff0c;所以本文基于ruoyi移动端引入uview2.0&#xff0c;实现基本功能。 RuoYi-App: &#x1f389; RuoYi APP 移动端框架&am…

element plus 的表单form使用详解

首先在你需要使用form组件的Vue文件里引入 import type { FormInstance } from element-plus 拿这一张图解释一下属性&#xff0c;第一项ref"ruleFormRef",&#xff0c;ruleFormRef就是我们定义并使用各个属性的必要条件&#xff0c;const ruleFormRef ref<Form…

vue 项目启动失败 ‘webpack-dev-server‘ 不是内部或外部命令,也不是可运行的程序

报错描述 我使用命令 npm run dev 启动项目 报了下面的错。 webpack-dev-server 不是内部或外部命令&#xff0c;也不是可运行的程序 > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js webpack-dev-server 不是内部或外部命令&#xff0c;也不…

Vue3 框架使用报错以及解决办法

1、TypeError: Failed to fetch dynamically imported module: 引入组件时&#xff0c;没有添加.vue后缀 或者引入的组建没有被使用 2、SyntaxError: The requested module /node_modules/_schart.js3.0.4schart.js/lib/sChart.min.js?v0343bb8c does not provide an export…

前后端分离项目,如何解决跨域问题?

跨域问题是前后端分离项目中非常常见的一个问题&#xff0c;举例来说&#xff0c;编程猫&#xff08;codingmore&#xff09;学习网站的前端服务跑在 8080 端口下&#xff0c;后端服务跑在 9002 端口下&#xff0c;那么前端在请求后端接口的时候就会出现跨域问题。 403 Forbidd…

在uniapp中获取可视区域的高度(uni.getSystemInfo)

前言在实际开发中我们会遇到不确定高度的情况&#xff0c;那么在uniapp中我们如何获取区域的高度呐&#xff1f;一起来看看吧使用到的&#xff1a;uni-app提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息uni.getSystemInfo(OBJECT)异步获取系…

Google Chrome装到D盘的方法

1. 下载chrome安装包 Google Chrome 网络浏览器 2. 创建自定义安装目录 D:\Program Files\Google\Chrome 3. 创建个人数据目录 D:\Program Files\Google\PersonData 4. 创建chrome浏览器的默认安装目录&#xff08;目录中的文件删除掉&#xff09; C:\Program Files\Google …

手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】

???作者&#xff1a;bug菌 博客&#xff1a;CSDN、掘金等 ??公众号&#xff1a;猿圈奇妙屋 ??特别声明&#xff1a;原创不易&#xff0c;转载请附上原文出处链接和本文声明&#xff0c;谢谢配合。 ??版权声明&#xff1a;文章里可能部分文字或者图片来源于互联网或者百…

React中CodeMirror插件的使用及封装

目录 一、CodeMirror是什么 二、React中CodeMirror的基本使用介绍 &#xff08;一&#xff09;引入CodeMirror 1. 安装CodeMirror插件 2.引入 CodeMirror 插件 &#xff08;二&#xff09;引入文件配置 &#xff08;三&#xff09;关键属性解读 1.value 2.mode 3.the…

Vue3 从零开始 搭建 简单 干净 的 后台管理系统

前言&#xff1a; 记得自己大二时&#xff08;2017年&#xff09;&#xff0c;想搭建一个后台管理系统&#xff0c;当时头脑想的是用原生JS写的。我肯定干不出来&#xff0c;后来乖乖用了当时比较流行的layui&#xff0c;就算现在也真的难以做下去。 这几天&#xff0c;有了需…

微信小程序如何将表单的数据发送到数据库,云开发,并实现将数据渲染到页面中

一、表单数据发送到数据库 1. 利用bindsubmit来写一个函数 <form bindsubmit"bindSubmit"><view class"form_border"><label>收件人名称:</label><input name"userName" auto-focus placeholder" 请填写收件…

【Java编程指南】语法基础

目录 一、前言 二、关键字 三、数据类型 1.存储单元 2.存储范围 3.类型转换 四、常量 五、变量 六、标识符 七、注释 一、前言 学习目标 1&#xff1a;熟悉Java的关键字、数据类型&#xff08;包括范围&#xff09;、常量与变量的区别 学习目标 2&#xff1a;类型转…