Axure 笔记

Axure 元件库

站点

元件库

图表

图标

粘贴表格到 Axure

  1. 在复制表格文件中所选的表格内容(单元格)
  2. 在 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 就不会背景色错位缺失了

相关站点链接


回到顶部

Copyright © 2017-2024 1px.run 像素教程 Distributed by an MIT license.

Site updated at 2024-12-07 05:14