炸金花

Axure技能——标签选择器组件制作

本文所涉及的Axure demo 可联系作者(yeq@wangsu.com)获得。

标签选择器(Tags select)

  1. 用户通过选择下拉列表内容,以标签形式展示与文本输入框中,可多选。
  2. 文本输入框可以对内容进行自动匹配快速查找。
  3. 多用于项名称较短且需要独立的展示方式的内容,如:姓名、属性等。

使用Axure制作标签选择器

Step1 基础样式搭建

border作用仅用于样式美化(可不做考虑)

根据需要,先拖出两个矩形设置样式,作为表单边框(border1、border2)

在border1上层加入隐藏边框的文本输入框(命名:txtinput)

在border2上层加入动态面板(命名:下拉,设为自动显示垂直滚动条)

注意上面两步操作都不要遮挡矩形的边框,大小可以参考图中数据进行设置

文本框获取焦点时,触发下拉事件

Step2 下拉动态面板内容填充

进入下拉动态面板编辑页面,增加中继器(命名:选项列表)

进入中继器修改内容以及样式,如下图所示(注意增加悬停样式&checkbox)

选项背景矩形(命名:选项 ),设置背景矩形与checkbox为组合

设置【选项组合】交互动作

当鼠标点击【选项组合】时切换【选项组合】的选中状态

且设置焦点在【txtinput】

勾选“允许触发鼠标交互”

Step3 设置中继器【选项列表】内容及事件

补充中继器数据如下所示

设置中继器每项载入时的交互动作

填充文字至【选项】中

Step4 设置文本输入框内容

在文本输入框上层处新增中继器(命名:选中标签),删除已有数据

调整中继器每项样式,标签矩形(70*30)

并增加关闭按钮,如下图所示

当选中/取消选中【选项组合】中的checkbox时,新增/删除一个行数据在输入框处中继器【选中标签】

 

 

 

 

并在【选项列表】中继器中标记/取消标记选中行

【选项列表】中继器中,补充每项加载时标记项的选中状态

设置关闭按钮交互事件

取消标记并更新对应项的【选项列表】中继器行

注:更新后,会联动触发【选项列表】中的checkbox的交互事件,进行删除行操作

Step5 文本框大小自适应

随着标签的增加与删除,文本框可输入区域需要跟随调整

  • 【选中标签】中继器布局调整,适应文本框宽度

  • 文本框的宽度及位置跟随标签数量变化

当【选项组合】中checkbox被选中/取消选中时

若文本框宽度大于一个【选中标签】宽度/小于初始文本框宽度时,以文本框右侧为锚点缩小/扩大一个标签项的宽度

 

 

 

 

 

 

非上种情况时,设置文本框宽度为初始宽度/最小宽度,并向上/下移动一个【选中标签】高度,且调整txtborder为合适尺寸

 

 

 

 

 

 

 

 

 

Step6 文本框筛选功能

文本框文本改变时,设置选项列表的筛选,筛选包含文本的【选项列表】项

本文所涉及的Axure demo 可联系作者(yeq@wangsu.com)获得。
0