【Axure教程】用中继器制作标签

简介: 【Axure教程】用中继器制作标签

标签像是目标确定的关键字词,便于查找和定位目标的工具,用来标志产品目标和分类或内容,绑定合适的话题,能方便分类检索,也更容易让用户发现。

随着大数据的发展,标签应用于更大软件系统,所以今天作者教大家在axure里面用中继器制作高保真的标签,包括选择已有标签,输入新增标签,删除已添加的标签。

【原型预览】

用电脑点击左下方阅读原文或复制打开下面的原型预览地址

https://axhub.im/ax9/5b914b5d3b727052/#g=1

【原型下载】

方式2:https://weidian.com/item.html?itemID=4397836492

【原型效果】

640.gif

【原型教程】

一、材料准备

中继器1——添加标签的中继器,内部包含矩形(标签文本1)和关闭按钮,标签文本1的样式可自由设置,案例中为外框线蓝色,填充颜色为浅蓝色,圆角,中继器表格中默认一列Column0,因为默认显示没有标签,删除所有标签行。

中继器2——已有标签的中继器,内部进包含矩形(标签文本2),样式可自由设置,案例中为外框线蓝色,填充颜色为浅蓝色,选中颜色为灰色,字体白色加粗,中继器表格中除了默认一列Column0外,还需要增加xuanzhong列,用于控制标签是否被选中;因为是已有可以选择的标签,所以Column0需要填写推荐选择的标签文字。

输入框——通过输入添加标签,默认隐藏边框,默认提示与:按回车创建标签。

默认隐藏按钮——仅用于触发事件,后面交互会详细介绍,包括筛选事件按钮、判断是否重复事件按钮、移动事件按钮、添加行事件按钮。

提示标签——用于输入重复标签时显示提示弹窗,转为动态面板,固定在中部。

外框(非必要)——用于美化,根据需求自由设置。

文字标签(非必要)——例如选择标签的文字,仅用于提示。

640.png

二、交互设置

1. 中继器1每项加载时

在中继器1每项加载时,我们需要将中继器里记录的内容设置到标签文本1内,然后根据文字的长短设置标签文本1的尺寸以及关闭按钮的位置:

设置文本——设置标签文本1的值==Item.Column0。

设置尺寸——设置标签文本1的尺寸,宽==Item.Column0.length*14+40,高度保持原来不变。其中Item.Column0.length就是文本的长度,因为我们使用的是14号字体所以乘以14,然后两边个预留10的边距,所以+20,最后再预留关闭按钮+20的间距。

移动——移动关闭按钮到绝对位置,x值=Item.Column0.length*14+40-20,y值保持不变。

640.png

2. 文本框提交时事件

首先我们将文本框提交按钮设为设置为筛选事件按钮,当按键盘的回车键时就相当于鼠标单击筛选事件按钮。

下面简单的讲解一下交互思路,首先回车按下时,我们先筛选中继器看有没有和输入内容一样的列,如果有一样的,弹出提示弹窗;如果没有一样的时候,我们移除筛选,并判断输入框内容是否为空,如果为空,代表用户没有输入内容,不做处理;如果不为空,则将文本框内容添加行。完成后设置文本框内容为空,并且移动输入框到标签后面。

筛选——对中继器1筛选,条件为Item.Column0==LVAR1,LVAR1为文本框内容。

触发——触发是否重复事件鼠标单击时。

是否重复事件鼠标单击时——判断中继器可视行数是否为0,如果为0就取消筛选、触发增加行鼠标单击时事件,如果不为0,则显示提示标签,并且设置复原文本框并取消筛选。

640.png

添加行事件——如果文本框内容不为空,添加行为文本框内容,触发移动事件,还需要更新标签中继器二看看里面有没有和输入内容一致的,如果有就要选中;下面将标签中继器2是会详细讲到,这里更新行的条件为[[TargetItem.Column0==LVAR1]],更新xuanzhong列的值为1,最后将文本框复原为空值。

640.png

移动事件——将文本框移动到绝对位置,x坐标=LVAR1.x+LVAR1.width+10,y坐标保持不变,LVAR1.x代表中继器1的x值,LVAR1.width代表中继器1的宽,整体意思为将文本框移动到中继器后面。

3. 关闭按钮鼠标单击时事件

在关闭该标签时,首先要考虑是否有标签是在下方选择标签内选中的,如果有需要取消其选中,然后删除该行的标签,再出发移动事件,将文本框移到对应位置。

更新行——更新中继器2,条件为Item.Column0==TargetItem.Column0,更新xuanzhong列为0,即相同的文字的标签会取消选中效果。

删除行——删除中继器1的当前行。

触发事件——触发移动事件(将文本框移动到绝对位置,x坐标=LVAR1.x+LVAR1.width+10,y坐标保持不变,LVAR1.x代表中继器1的x值,LVAR1.width代表中继器1的宽,整体意思为将文本框移动到中继器后面)。

640.png

4. 中继器2每项加载时

设置文本——设置文本标签2的值==Item.Column0。

设置尺寸——设置文本标签2的尺寸,宽==Item.Column0.length*14+40,高度保持原来不变。其中Item.Column0.length就是文本的长度,因为我们使用的是14号字体所以乘以14,然后两边个预留10的边距,所以+20。

640.png

选中——如果xuanzhong列的值为1,设置文本标签2的值为真。简单来说,我们是通过xuanzhong列的值控制推荐标签里的标签是否被选中,如果值为1就选中,不为1就未选中。

5. 文本标签2鼠标单击时

如果xuanzhong的值不等于1,就是标签还未被选中,那我们进行一下交互:

更新行——更新标签中继器当前行xuanzhong的值为1。

设置文本——设置输入框的文本为当前标签的文本,也可以是column0列的值。

触发事件——触发筛选事件鼠标单击时。

640.png

设置文本和触发事件的意思,其实相当于我们在输入框内输入已选中标签的文字,然后按回车,应为上面已经写好了输入增加标签的交互,这里直接触发,不用重新写,也是一种快速实现的方式。

那以上就是本期的所有内容了,感谢您的阅读,我们下期见,88~

作者:梓贤vigo;


微信公众号:Axure高保真原型,分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容


本文由微信公众号:Axure高保真原型 授权发布,未经许可,禁止转载

相关文章
|
26天前
Axure设计之多级菜单导航教程(中继器)
在数字化时代,优化产品设计,提升用户界面交互,是产品设计着重考虑的点。针对传统菜单导航复杂繁琐的问题,本设计提出了一套灵活的菜单导航方案,结合中继器与动态面板,实现一键搜索、菜单收藏、多级菜单导航、点击展开收缩等交互功能,旨在提升领导满意度,增强产品设计体验。
|
2月前
|
数据处理 UED
Axure中继器教程及案例详解
Axure RP 是一款强大的原型设计工具,广泛应用于产品设计、UI/UX 设计及交互设计中。中继器(Repeater)作为 Axure 中的一个重要元件,以其强大的数据处理和动态交互能力,成为设计师们不可或缺的工具。本文将从中继器基础、进阶、高级应用,以及分页控制、合计、列表拖动、列表滑动删除、表内修改等方面,详细介绍中继器的使用方法和案例。
Axure中继器教程及案例详解
|
数据可视化
【Axure教程】自动轮播的中继器表格
【Axure教程】自动轮播的中继器表格
【Axure教程】自动轮播的中继器表格
【Axure教程】用中继器做一个漂亮的系统首页
【Axure教程】用中继器做一个漂亮的系统首页
【Axure教程】用中继器做一个漂亮的系统首页
【Axure教程】中继器图片列表(放大效果)
【Axure教程】中继器图片列表(放大效果)
【Axure教程】中继器图片列表(放大效果)