教大家使用Axure制作动态编辑的Tag标签

2026-03-06 13:59:47

1、打开Axure原型工具,今天小编教大家使用Axure制作动态编辑的Tag标签,如下图所示。

教大家使用Axure制作动态编辑的Tag标签

2、首先我们需要将元件拖入到正文当中,并对其样式及大小进行调整,形成一个标签样式,如下图所示。

教大家使用Axure制作动态编辑的Tag标签

教大家使用Axure制作动态编辑的Tag标签

3、然后我们在拖入一个中继器,将刚刚做好的标签复制到中继器中,如下图所示。

教大家使用Axure制作动态编辑的Tag标签

教大家使用Axure制作动态编辑的Tag标签

4、然后给中继器的加载时事件进行设置,如下图所示。

教大家使用Axure制作动态编辑的Tag标签

5、在给标签上的删除按钮做交互事件,如下图所示。

教大家使用Axure制作动态编辑的Tag标签

6、返回到中继器外面,盆始贪我们在制作一个添粒码加标签的样式,这里需要动态面板做支撑,如下图所示。

教大家使用Axure制作动态编辑的Tag标签

7、我们给动态面板中的标签加交互事件,如下图所示。

教大家使用Axure制作动态编辑的Tag标签

教大家使用Axure制作动态编辑的Tag标签

8、最后F5预览看一下效果,点击添加标签时,会弹出输入,鼠标移出后棍舍会显示再次填加的标签框,如下图所示。

教大家使用Axure制作动态编辑的Tag标签

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢