Axure制作：简易的搜索框案例

1、新建1个文本框、1个矩形、2个图标式样

如下图所示：

2、设置“查询”图标的属性(根据自己需求，可自行设定)：

1.尺寸：20*20

2.不透明度：40%

如下图所示：

3、设置“X”图标的属性(根据自己需求，可自行设定)：

1.尺寸：15*15

2.不透明度：40%

如下图所示：

4、设置文本框的“提示文字“内容为“搜索”，并设置为”隐藏边框“

如下图所示：

5、按下图的布局方式，组合成“搜索框”控件，呵呵……

6、以下就是针对“文本框”及“清除”图标的代码设置，完成交互效果，这个也很简单的……

7、设置“文本框“的”文本改变时“的交互动作：

条件1

---

当”元件文字长度“不等于”0“这个选项时

---

8、动作1

---

显示”清除”图标

---

9、条件2

---

当”元件文字长度“等于”0“这个选项时

---

10、动作2

---

隐藏”清除”图标

---

11、“文本框”的所有动作如下图所示：

12、设置“清除“图标的交互动作：

1.设置“文本框”的内容为“空”

2.设置焦点在“文本框”

13、到这里就设置结束了，是不是很是简单……

一切设置正确，效果就如下：

14、觉得不错，对你有帮助的话，请投个票，加个赞哦~