Axure教程之怎么利用中继器做可编辑的标签

演示地址:

http://www.wulihub.com.cn/go/qDl9bq/start.html

1:先准备好元件,从元件库,拉入一个中继器,双击中继器托入组件在样式中设置中继器

横向排列,行间距设置为10

如图:

Axure教程之怎么利用中继器做可编辑的标签_第1张图片
Axure教程之怎么利用中继器做可编辑的标签_第2张图片

再拖入一个动态面板,设置两个状态,分别为:

Axure教程之怎么利用中继器做可编辑的标签_第3张图片
Axure教程之怎么利用中继器做可编辑的标签_第4张图片

最后的布局如下:

Axure教程之怎么利用中继器做可编辑的标签_第5张图片

开始对中继器的初始状态进行操作,如图:

Axure教程之怎么利用中继器做可编辑的标签_第6张图片

双击中继器,为删除按钮添加交互,如图:

Axure教程之怎么利用中继器做可编辑的标签_第7张图片

为了页面的美观,当删除标签时,添加标签

应该相对移动,方法是:

Axure教程之怎么利用中继器做可编辑的标签_第8张图片

记得箭头处一定要选相对位置哦

搞定了标签删除,下一步就要为了增加标签做交互了,选择添加标签动态面板状态1,添加交互,如图:

Axure教程之怎么利用中继器做可编辑的标签_第9张图片

设置当鼠标单击时,动态面板状态发生变化,切换到状态2,再到状态2添加相应交互,如图

Axure教程之怎么利用中继器做可编辑的标签_第10张图片

此状态为输入新增标签内容用,所以设置交互如下:

Axure教程之怎么利用中继器做可编辑的标签_第11张图片

好了,全部交互设置完成,是不是很简单呢?

原型地址:

你可能感兴趣的:(Axure教程之怎么利用中继器做可编辑的标签)