Axure中实现依据宽度自动换行的Tag标签

0 评论 680 浏览 2 收藏 4 分钟

如何做一个可以自动根据宽度自动换行的标签?这篇文章里,作者做了相应的Axure教程分享,一起来看一下。

“标签(Tags)”功能用于标记、选择、分类和组织网站内容的元数据。它们通常以关键字或短语的形式出现,以描述该内容的属性、主题或类别。标签的字数一般不多,但长度可能不尽相同,如果多全标签还需要换行。比如ElementUI的Tag标签:

演示地址:https://usrsky.axshare.com/#id=hb5pcx&g=1

一、先决知识

因为在Axure RP 8&9中,自动适应文字宽度是个麻烦事,所以请先了解一下《完美实现Axure8和9的“自动适应文本宽度”》,顺便下载ruler_RP9.rp文件备用。如果对宽度不敏感也可以简单地直接用[[字数 * 字宽]]

此外,你可能还需要读一下这篇文章《Axure中继器的负坐标》

二、教程

先建两个全局变量:

  • maxLineWidth用于表示最大宽度(非必须,也可以在交互里写死,还可以动态获取父容器宽度)
  • currentLineWidth记录当前行宽度。

元件目录与ruler_RP9.rp大同小异,我这里宽度多加了50是为了放(叉号×)。

最后在(矩形)的“加载时”交互写换行的逻辑,其实写在中继器的“每项加载时”也可以。

载入时:

Case1,如果[[Item.isFirst]]==”true”(表示首行,只记录宽度,不移动矩形)

设置变量currentLineWidth为当前宽度;

Case2,如果[[currentLineWidth+This.Width]]<=”[[maxLineWidth]]”(判断如果当前行剩余宽度空间足够)

接到上一行末尾;

设置新的currentLineWidth为[[currentLineWidth+10+This.width]](里面的10是用来做为空隙,可自行更改,或者放到全局变量都行)

Case3,(空间不够)

换新行;

设置变量currentLineWidth为当前宽度。

结尾

这样一个可以自动根据宽度自动换行的标签就做好啦,快去试试看吧。

本文由 @Jorkin 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!