Axure技能——标签选择器组件制作
本文所涉及的Axure demo 可联系作者(yeq@wangsu.com)获得。
标签选择器(Tags select)
- 用户通过选择下拉列表内容,以标签形式展示与文本输入框中,可多选。
- 文本输入框可以对内容进行自动匹配快速查找。
- 多用于项名称较短且需要独立的展示方式的内容,如:姓名、属性等。
使用Axure制作标签选择器
Step1 基础样式搭建
border作用仅用于样式美化(可不做考虑)
根据需要,先拖出两个矩形设置样式,作为表单边框(border1、border2)
在border1上层加入隐藏边框的文本输入框(命名:txtinput)
在border2上层加入动态面板(命名:下拉,设为自动显示垂直滚动条)
注意上面两步操作都不要遮挡矩形的边框,大小可以参考图中数据进行设置
文本框获取焦点时,触发下拉事件
Step2 下拉动态面板内容填充
进入下拉动态面板编辑页面,增加中继器(命名:选项列表)
进入中继器修改内容以及样式,如下图所示(注意增加悬停样式&checkbox)
选项背景矩形(命名:选项 ),设置背景矩形与checkbox为组合
设置【选项组合】交互动作
当鼠标点击【选项组合】时切换【选项组合】的选中状态
且设置焦点在【txtinput】
勾选“允许触发鼠标交互”
Step3 设置中继器【选项列表】内容及事件
补充中继器数据如下所示
设置中继器每项载入时的交互动作
填充文字至【选项】中
Step4 设置文本输入框内容
在文本输入框上层处新增中继器(命名:选中标签),删除已有数据
调整中继器每项样式,标签矩形(70*30)
并增加关闭按钮,如下图所示
当选中/取消选中【选项组合】中的checkbox时,新增/删除一个行数据在输入框处中继器【选中标签】
并在【选项列表】中继器中标记/取消标记选中行
【选项列表】中继器中,补充每项加载时标记项的选中状态
设置关闭按钮交互事件
取消标记并更新对应项的【选项列表】中继器行
注:更新后,会联动触发【选项列表】中的checkbox的交互事件,进行删除行操作
Step5 文本框大小自适应
随着标签的增加与删除,文本框可输入区域需要跟随调整
- 【选中标签】中继器布局调整,适应文本框宽度
- 文本框的宽度及位置跟随标签数量变化
当【选项组合】中checkbox被选中/取消选中时
若文本框宽度大于一个【选中标签】宽度/小于初始文本框宽度时,以文本框右侧为锚点缩小/扩大一个标签项的宽度
非上种情况时,设置文本框宽度为初始宽度/最小宽度,并向上/下移动一个【选中标签】高度,且调整txtborder为合适尺寸
Step6 文本框筛选功能
文本框文本改变时,设置选项列表的筛选,筛选包含文本的【选项列表】项
8本文所涉及的Axure demo 可联系作者(yeq@wangsu.com)获得。