自定义文本框 | Custom Text Field

通过在特定样式的矩形元件上防止一个透明的文本框元件,来制作一个自定义文本框,使用矩形元件的选中交互样式,来提示文本框在Web浏览器中获取焦点的状态。

STEP 0:下载练习文件

如果你还没有练习文件,请下载Axure Training.rp并在Axure RP中打开它,该文件包含了Axure培训网站上每个教程的对应页面。我们建议你始终使用我们准备好的文件来学完教程,但是如果你无法保证,那也没有关系,我们也会告诉你在不使用Axure Training.rp文件的情况下,如何创建新文件来完成教程。

STEP 1:设置文本框透明

在练习文件中打开“自定义文本框”页面,画布上有一个包含三个元件的组合:一个特定样式的矩形元件,一个文本框元件,和一个取自Axure RP图标元件库的“用户”图标元件。

在画布上单击两次文本框元件来选中它,第一次点击是选中了“自定义文本框”组合,第二次点击才是选中文本框(或者,你也可以在概要窗格中直接选择文本框)。然后滚动到检视窗口中属性页签的底部,选中“隐藏边框”,你也可以在文本框上点击右键,然后在右键菜单中选择“隐藏边框”。

接下啦,在样式工具栏或检视窗口中的样式页签下,使用“填充”颜色选择器,来设置文本框的透明填充色。透明填充色结合上隐藏边框,就可以使文本框完全透明,从而只能看到它后面的“背景”矩形。

STEP 2:预览

在Web浏览器中预览页面,然后在自定义文本框中输入一些文本。

STEP 3:当文本框获取焦点时改变样式

“背景”矩形元件已经设定了“选中”的交互样式,可以用来提示文本框在Web浏览器中获取焦点时的状态。要实现这一功能,我们需要用到文本框元件的“获取焦点时”事件。

回到Axure RP中,再次选中文本框元件,然后在检视窗口中的属性也签下,双击“获取焦点时”来添加一个新的获取焦点时用例。

在用例编辑器中,点击左侧“添加动作”栏中的“选中”(位于“设置选中”下面),然后在“配置动作”栏中选择“背景”矩形元件。这将会使矩形元件设置为选中状态,从而激活它的“选中”交互样式。

点击“确定”按钮关闭用例编辑器。

STEP 4:当文本框失去焦点时还原样式

在文本框元件被选中的状态下,双击检视窗口中属性页签下的“失去焦点时”来添加一个新的失去焦点时用例。

在用例编辑器中,点击左侧“添加动作”栏中的“取消选中”(位于“设置选中”下面),在右侧“配置动作”栏中选择“背景”矩形元件。这将会取消矩形元件的选中状态,从而停用其“选中”交互样式并恢复到默认样式。

点击“确定”按钮关闭用例编辑器。

STEP 5:预览

在Web浏览器中预览页面,然后点击自定义文本框,注意矩形的边框变成了绿色并且变的更粗,然后点击文本框以外的区域将矩形恢复到默认样式。

评论(0)

发表评论

电子邮件地址不会被公开。 必填项已用*标注