Axure 笔记
Axure 元件库
站点
元件库
- material-axure-library
- Ant Design Axure 组件库
- Free Bootstrap widget library for Axure RP
- 微信和小程序、iOS、macOS、Android、Windows 等多平台的 Axure RP 元件库
图表
图标
- Google Material Design 900个实用图标的Axure组件库 https://pan.baidu.com/s/1slpYl2X
puwi
粘贴表格到 Axure
- 在复制表格文件中所选的表格内容(单元格)
- 在 Axure 单击右键,选择粘贴 > 粘贴为表格
Axure 实现单元格合并
- 尝试了将 Excel 中合并的表格复制并粘贴到 Axure ,但是会自动拆分合并的单元格
- 暂时有个思路就是用矩形伪造合并的样式。
合并或者导入其他RP文件
- 选择「菜单栏」中的「文件」,点击「从RP文件导入」,选择RP文件,勾选要导入的页面
将元件名称 data-label 转为 HTML URL 锚点ID
暂时只支持在具体的页面使用,不支持在 /start.html
页面使用。
用途说明:假设你页面底部有个元件名称为 fo,你只需在页面链接尾部添加 #fo,打开链接时就会自动滚动到 fo 这个元件位置
如何设置元件名称:点击任意元件(文字、矩形、图片等)打开交互面板,第一个 *名称 输入框输入具体的内容,建议使用英文字母和数字组合
使用方法:插入一个元素,交互面板添加交互,「载入时」——「打开链接」——「链接到URL或文件路径」,链接内容填入以下内容:
javascript: const url = new URL(window.location.href); const anchor = url.hash || url.searchParams.get('anchor'); if (anchor) { const targetElement = document.querySelector(`[data-label="${anchor.replace('#', '')}"], #${anchor.replace('#', '')}`); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth' }); } };
温馨提示:如果想重复使用可以做成母版,然后将母版插入各页面。如果为了隐藏该元件可以在交互面板添加交互:「设置不透明度」——「0%」。
页面底部添加悬浮返回首页按钮
用途说明:默认与原型的首页是自动识别的,我们无法通过交互直接添加链接自动跳到首页,只能跳到指定页面。通过这个方法可以点击按钮跳转到默认首页,也可以从单页面跳回带侧边栏的页面。
使用方法:插入一个元素,交互面板添加交互,「载入时」——「打开链接」——「链接到URL或文件路径」,链接内容填入以下内容:
javascript: var link = document.createElement('a'); link.href = './start.html?g=1'; link.target = '_top'; link.textContent = '返回首页'; link.style.background = '#15d6ba'; link.style.color = '#fff'; link.style.padding = '0.5em'; link.style.borderRadius = '0.5em'; link.style.position = 'fixed'; link.style.left = '1em'; link.style.bottom = '2em'; link.style.boxShadow = '#27af9b 3px 3px 0px 2px'; document.body.appendChild(link);
温馨提示:如果想重复使用可以做成母版,然后将母版插入各页面。如果为了隐藏该元件可以在交互面板添加交互:「设置不透明度」——「0%」。
页面插入当前页面链接显示的可点击链接
用途说明:因为默认打开 /start.html
是看不到某个页面具体链接的,便于获取单页面链接分享
使用方法:插入一个元素,交互面板添加交互,「载入时」——「打开链接」——「链接到URL或文件路径」,链接内容填入以下内容:
javascript: const currentUrl = window.location.href; const insertCurrentURL = document.createElement('a'); insertCurrentURL.href = currentUrl; insertCurrentURL.textContent = 'Current Page: ' + decodeURIComponent(currentUrl); insertCurrentURL.target = '_blank'; insertCurrentURL.style.position = 'fixed'; insertCurrentURL.style.bottom = '0em';insertCurrentURL.style.padding = '0.2em 0.5em'; insertCurrentURL.style.background = 'rgb(21 214 186 / 61%)'; insertCurrentURL.style.textAlign = 'center'; insertCurrentURL.style.color = '#fff'; insertCurrentURL.style.lineHeight = '1.68em'; insertCurrentURL.style.fontSize = '0.7rem'; insertCurrentURL.style.left = '1em'; document.body.appendChild(insertCurrentURL);
温馨提示:如果想重复使用可以做成母版,然后将母版插入各页面。如果为了隐藏该元件可以在交互面板添加交互:「设置不透明度」——「0%」。
Axure 教程链接
Axure 文本框或矩形添加背景色当文字超出一定长度使用自适应宽度,上传到 axshare 后背景色显示不完整
在本地预览是正常的,但是上传到 axshare 就错位了
解决方法是使用自适应宽度如果文本比较长,在确认文案后手动拉一下宽度,这样会存储宽度,上传到 axshare 就不会背景色错位缺失了
相关站点链接
- 开始使用 Axure RP - AxureChina Axure 中文指南