最新消息:本站教程基于Axure RP 9.0.0.3723及更高版本,请在学习前确认软件版本是否符合要求,以免因为界面差异导致学习障碍!

元件组合的应用(2)

教程 小楼一夜听春语 146浏览

元件的组合不仅仅是能够像《元件组合的应用(1)》所讲到的,让内部元件同时触发鼠标相关的交互样式。

从Axure RP 8开始,将多个元件组合到一起后,是可以添加交互事件的。

举个例子。

用多个矩形做成表格的一行,点击这一行表格时,表格能够改变颜色。

很明显,不管鼠标点在哪个单元格上,整行单元格都会改变颜色。

实现这样的交互效果,肯定需要先为每一个矩形设置[元件选中的样式]。

将选中时的[填充颜色]设置为蓝色,[字色]设置为白色。

具体的操作可以参考《Axure的7种交互样式(3)-选中的交互样式》。

接下来,我们为了能够点击任何一个矩形都能选中整行表格,需要将所有矩形组合。

[组合]按钮在画布上方的快捷工具栏或者右键菜单中。

并且,为组合添加[单击时][设置选中][当前]组合的交互。

暴躁提示:交互是点击一下组合后添加,不要出现双击等错误的操作。因为点击一下组合后,再次点击组合时,会选中组合中的某一个元件,而并非整个组合。如果我说的这么清楚了,你还出现错误操作的话,就别看我的教程了!我不配!

此时,点击任何一个单元格,都能整行变色的效果就完成了。

最后,我们在现有基础上再进行扩展。

复制当前的一行单元格组合,多次粘贴到画布中,将表格变为多行。

温馨提示:也可以按住Ctrl键的同时拖动组合进行复制操作。

此时,在浏览器中查看原型的话,点击任何一行都能够整行变色。

但是,如何只让最后点击的一行变色呢?

这也就是唯一选中的交互效果。

我们将所有的组合点中,[组合属性]设置中,为所有的组合设置相同的[选项组名称]。

如果找不到这项设置,需要点击[组合属性]后方的[显示全部]按钮。(这句其实写的有些多余,如果学习中这点儿发现能力都不具备的话...这句就不算多余了...)

警告:是在[组合属性]中设置[选项组名称]。交互面板下方还有[形状属性]也有[选项组名称]的设置,不要混淆。

这样,就能够实现表格的单行变色效果。

/教程源文件/

不习惯看文字教程?还有《Axure RP 9萌新修炼视频》奉上!

转载请注明:IAXURE » 元件组合的应用(2)