AxureRP8实战手册-案例2(文本框:边框变色)

AxureRP8.0教程 小楼一夜听春语 35040℃ 0评论

案例2.   文本框:边框变色

案例来源:

百度-登录界面

 

案例效果:

  • 光标进入文本框时:(图1-6)

1_6

案例描述:

在登录界面中,包含用户名与密码的输入框。当焦点进入输入框时,输入框边框与内部图标变为蓝色;失去焦点时,恢复灰色。

 

元件准备:

  • 页面中:(图1-7)

1_7

包含命名:

  • 矩形(用于账号输入边框):Border01
  • 矩形(用于密码输入边框):Border02

 

思路分析:

  • 输入框的样式在两种不同状态下切换,可以通过交互样式来实现;(操作步骤1)
  • 文本框获取焦点时,呈现选中的样式(操作步骤2~3);
  • 文本框失去焦点时,呈现未选中的样式(操作步骤4~5)。

 

操作步骤:

1、设置元件“Border01”与“Border02”的选中时交互样式为淡蓝色边框与文字;(参考“基础23”)

2、设置账号输入文本框【获取焦点时】,【选中】元件“Border01”;

  • 事件交互设置:(图1-8)

1_8

  • 用例动作设置:(图1-9)

1_9

3、参考上一步,设置密码输入文本框【获取焦点时】,【选中】元件“Border02”;

4、设置账号输入文本框【失去焦点时】,【取消选中】元件“Border01”;

  • 事件交互设置:(图1-10)

1_10

  • 用例动作设置:(图1-11)

1_11

5、参考上一步,设置密码输入文本框【失去焦点时】,【取消选中】元件“Border02”。

 

补充说明:

  • 本案例中的“输入框”是指矩形边框与文本框共同组成的一组内容,而非文本框元件。
  • 本案例中使用了“FontAwesome4.4.0”图标字体元件库,需要安装字体文件支持,并进行Web字体设置。(参考案例1的补充说明)

  特别提醒:本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师全新打造Axure RP 9精品课程,以独有的教学方法与技巧,帮助你以最短的时间高效的完成学习目标。

《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】


转载请注明:Axure原创教程网 » AxureRP8实战手册-案例2(文本框:边框变色)

喜欢 (51)or分享 (0)

您必须 登录 才能发表评论!

(30)个小伙伴在吐槽
  1. 头像
    那关于文本框前的元件(用户和小锁子)怎么变色呢
    鹿柒2016-07-06 15:51
    • 头像
      在配置动作里勾选你要变色的原件就可以了,就是把用户和小锁子也勾选上
      Jan3212016-07-08 15:44
      • 头像
        关键是用户和小锁子是文本框的提示文字啊……如果只是文字作为提示文字,图标作为矩形的文字的话,预览输入的时候,输入的文字会覆盖小图标。我搞了两个小时了各种试……不知道是我步骤错了还是有问题昂……
        陌上郎2016-10-25 15:45
        • 头像
          我弄出来了,要把文本框的边框隐藏了!
          陌上郎2016-10-25 16:02
          • 头像
            用户和锁依旧没变色。。。
            羽皇陛下铁蛋2018-09-29 10:39
    • 小楼一夜听春语
      本案例中使用了“FontAwesome4.4.0”图标字体元件库,需要安装字体文件支持,并进行Web字体设置。(参考案例1的补充说明)
      小楼一夜听春语2016-07-23 22:21
      • 头像
        老师怎么将图标字体打进矩形内,我试过了复制不进去,拖回去的话,图标字体和矩形不是一体的,设置交互样式时,边框变色了,但是图标字体没有
        河边的鹅卵石2016-09-21 21:29
    • 头像
      在矩形内选择编辑文字,然后使用小楼老师字体原件库里的用户图标跟锁定图标,这时候矩形跟图标是一个整体,选择交互形式就可以了。
      鹿鹿2016-09-03 21:18
      • 头像
        编辑文字的时候又如何使用库里的图标呢
        Ian2016-12-09 13:37
      • 头像
        这样也不是一体的
        路路2017-01-10 17:26
        • 小楼一夜听春语
          点导航菜单,在线阅读,里面有视频。
          小楼一夜听春语2017-01-10 19:58
  2. 头像
    事件交互设置应该是文本框[鼠标移入时],选中矩形和[鼠标移出时],取消选中矩形。文本框获取焦点的动作,是需要点击文本框,与楼主设定的效果不符。(小白一枚,亲试出来的^^)
    小小白2016-07-08 16:36
    • 小楼一夜听春语
      预设场景就是光标进入文本框,而不是光标移入文本框。可以参考在线阅读中的案例效果。
      小楼一夜听春语2016-07-08 17:03
  3. 头像
    在线阅读那里打开是案例case,那里怎么下载素材?
  4. 头像
    请问小楼老师用户图标和密码图标怎么变色啊?谢谢啦!
    阿福2016-07-21 00:27
    • 小楼一夜听春语
      本案例中使用了“FontAwesome4.4.0”图标字体元件库,需要安装字体文件支持,并进行Web字体设置。(参考案例1的补充说明)
      小楼一夜听春语2016-07-23 22:20
  5. 头像
    这个案例需要文本框与矩形重合着来用才行的
    伟哥2016-07-31 15:59
  6. 头像
    请问老师为什么我的文本框的边框样式设置呈灰色无法使用呢?
    deng2016-08-07 23:34
    • 头像
      我也想问一下 总是有边框 看着都烦
      杨宇宇宇2016-08-31 11:19
      • 头像
        文本框-属性里面勾选隐藏边框,就不会有边框了
        sarah2016-09-28 15:04
  7. 头像
    在用例中可以一直选切换选中状态,也能实现,两者有什么不同吗
    小天2016-10-08 16:12
  8. 头像
    FontAwesome4.4.0图标字体元件库里的用户图标和密码图标有点大呀,看起来与实际状态不太相符,可以改变图标的大小吗?
    楚留香2016-10-19 14:44
  9. 头像
    请问我设置完交互样式后,两个同时变色了,不晓得为什么?
    爱学习的人2017-02-05 09:04
  10. 头像
    我完全按照步骤的来,为什么预览之后出不来效果呢?
    算下2017-10-24 10:46
  11. 头像
    矩形在选中状态下,边框以及内部的文字改变不了颜色
    Lily2017-11-01 17:45
  12. 头像
    文本框要放在矩形框之内
    嘛喵喵2018-07-06 16:56