axure8 修改标签文字_Axure技能——标签选择器组件制作

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

标签选择器(Tags select)

用户通过选择下拉列表内容，以标签形式展示与文本输入框中，可多选。

文本输入框可以对内容进行自动匹配快速查找。

多用于项名称较短且需要独立的展示方式的内容，如：姓名、属性等。

使用Axure制作标签选择器

Step1 基础样式搭建

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

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

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

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

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

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

Step2 下拉动态面板内容填充

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

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

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