基础1. 添加元件到画布
在左侧元件库中选择要使用的元件,按住鼠标左键不放,拖动到画布适合的位置上松开。![](https://img.haomeiwen.com/i8860844/3a0aff1e04e93e3d.png)
基础2. 添加元件名称
文本框属性中输入元件的自定义名称,建议采用英文命名。
- 建议格式:PasswordInput01或Password01
- 名称含义:序号01的密码输入框
![](https://img.haomeiwen.com/i8860844/2101e87858ffd8c7.png)
基础3. 设置元件位置/尺寸
元件的位置与尺寸可以通过鼠标拖拽调整,也可以在快捷功能或元件样式中进行输入调整。
- x:指元件在画布中的x轴坐标值。
- y:指元件在画布中的y轴坐标值。
![](https://img.haomeiwen.com/i8860844/f83fcf28795cdb5f.png)
- w:指元件的宽度值。
- h:指元件的高度值。
![](https://img.haomeiwen.com/i8860844/b156ff4a0608d682.png)
基础4. 设置元件默认角度
- 方式一:选择需要改变角度的元件,按住键的同时,用鼠标拖动元件的节点到合适的角度。
- 方式二:在元件样式中进行角度的设置,元件的角度与元件文字的角度可以分开设置。
![](https://img.haomeiwen.com/i8860844/574b2cc9634648f2.png)
基础5. 设置元件颜色与透明
选择要改变颜色的元件,点击快捷功能区中的背景颜色设置按钮,选取相应的颜色,或者在元件样式中进行设置。
![](https://img.haomeiwen.com/i8860844/598ee444b27b3a33.png)
基础6. 设置形状或图片圆角
可以通过拖动元件左上方的圆点图标进行调整,也可以在元件样式中设置圆角半径来实现。![](https://img.haomeiwen.com/i8860844/48147a975b1e2cc4.png)
基础7. 设置矩形仅显示部分边框
在Axure RP 8的版本中,矩形的边框可以在样式中设置显示全部或部分。
![](https://img.haomeiwen.com/i8860844/ae7293e9877e5f88.png)
基础8. 设置线段/箭头/边框样式
线段、箭头和元件边框的样式可以在快捷功能或者元件样式中进行设置。![](https://img.haomeiwen.com/i8860844/c03ed1a093c92740.png)
基础9. 设置元件文字边距/行距
在元件样式中可以设置元件文字的【行间距】与【填充】。
- 行间距:是指文字段落行与行之间的空隙。
- 填充:是指文字与形状边缘之间填充的空隙。
![](https://img.haomeiwen.com/i8860844/c6386e3b8c850570.png)
基础10. 设置元件默认隐藏
选择要隐藏的元件,在快捷功能或者元件样式中勾选【隐藏】选项。![](https://img.haomeiwen.com/i8860844/00c308194e96a33d.png)
基础11. 设置文本框输入为密码
文本框属性中选择文本框的{类型}为【密码】。![](https://img.haomeiwen.com/i8860844/efd63506b9e74efa.png)
基础12. 设置打开选择文件窗口
文本框属性中选择文本框的{类型}为【文件】,即可在浏览器中变成打开选择本地文件的按钮。该按钮样式各浏览器略有不同。![](https://img.haomeiwen.com/i8860844/b661c6c1b4b74c11.png)
基础13. 限制文本框输入字符位数
在文本框属性中输入文本框的{最大长度}为指定长度的数字。![](https://img.haomeiwen.com/i8860844/ba1711c34db5fd27.png)
基础14. 设置文本框提示文字
在文本框属性中输入文本框的{提示文字}。提示文字的字体、颜色、对齐方式等样式可以点击【提示样式】进行设置。
提示文字设置包含{隐藏提示触发}选项,其中:
- 输入:指用户开始输入时提示文字才消失。
- 获取焦点:指光标进入文本框时提示文字即消失。
![](https://img.haomeiwen.com/i8860844/0c2960ff4d4fcdc9.png)
基础15. 设置文本框回车触发事件
文本框回车触发事件是指在文本框输入状态下按<回车>键,可以触发某个元件的【鼠标单击时】事件。只需在文本框属性中{提交按钮}的列表中选择相应的元件即可。![](https://img.haomeiwen.com/i8860844/6d961398a27eb084.png)
基础16. 设置元件鼠标移入的提示
在文本框属性中{元件提示}中输入提示内容即可。![](https://img.haomeiwen.com/i8860844/25ebd7d9f6bb668d.png)
基础17. 设置矩形为其他形状
在画布中点击矩形右上方圆点图标即可打开形状列表,设置为其它形状。![](https://img.haomeiwen.com/i8860844/9ad896a30a0015b9.png)
基础18. 设置自定义形状
在形状上点击<鼠标右键>,在菜单中选择【转换为自定义形状】,即可对形状进行编辑。也可以通过点击形状右上角的圆点图标,在打开的形状选择列表中选择【转换为自定义形状】。![](https://img.haomeiwen.com/i8860844/3506fcc8db1d5640.png)
基础19. 设置形状水平/垂直翻转
在形状的属性中可以对形状进行【水平翻转】和【垂直翻转】的操作。![](https://img.haomeiwen.com/i8860844/fb7cd8346ced647d.png)
基础20. 设置列表框的内容
下拉列表框与列表框都可以设置内容-列表项。可以通过【属性】-【列表项】的选项来设置,也可以通过鼠标双击元件进行设置。![](https://img.haomeiwen.com/i8860844/4784a36a7df2c3f0.png)
网友评论