大胆人体艺术

株洲最专业的CAD培训学校 新科20年教学
  • QQ咨询

  • 在线咨询
  • 点击这里给我发消息
  • 点击这里给我发消息
  • 点击这里给我发消息
  • 点击这里给我发消息

大胆人体艺术

免责声明-|:本站作品均来自网友分享或互联网-|,若您发现本站存在您非授权的原创作品请第一时间联系本站删除-|,本站享有代替本站作者维权的权力-|-|。

      
课程搜索:
设为首页 加入收藏

  你现在的位置:首页  >>  新闻动态
株洲UI设计培训班 登录面板切换设计
  来源:新科IT培训学校  发布时间:2018-01-24 11:30:43

 动态面板:登录面板切换

案例来源:

淘宝-用户登录

 

案例效果:

  • 快速登录:(图1-70)

1_70

 

  • 账户密码登录:(图1-71)

 

1_71

 

案例描述:

点击“快速登录”与“账户密码登录”按钮时,在两个登录面板间切换。

 

元件准备:

  • 页面中:(图1-72)

 

1_72

  • 动态面板“LoginPanel”各个状态中:(图1-73)

1_73

 

包含命名:

  • 动态面板(用于制作登录面板):LoginPanel
  • 动态面板状态(用于包含快速登录内容):State1
  • 动态面板状态(用于包含账户密码登录内容):State2

 

思路分析:

  • 动态面板可以添加多个状态;(操作步骤1)
  • 每个状态中可以添加不同的内容;(操作步骤2~4)
  • 设置两个登录按钮的样式切换;(操作步骤6)
  • 点击不同的登录按钮切换不同的状态。(操作步骤7~9)

 

操作步骤:

1、拖放一个动态面板元件到页面中,双击动态面板,打开面板状态管理;将动态面板命名为“LoginPanel” ,然后,点击【+】添加一个状态;然后,双击状态名称“State1”进入这个状态的编辑界面;(图1-74)

1_74

2、为“State1”添加元件,组成相应的内容;完成后,关闭“State1”的标签回到页面中;(图1-75)

1_75

3、参照“操作步骤1”双击动态面板,打开面板状态管理界面,双击状态名称“State2”,进入进入状态“State2”的编辑界面;

4、为状态“State2” 添加元件,组成相应的内容;完成后,关闭“State2”的标签回到页面中;(图1-76)

1_76

 

5、此时页面中动态面板只显示了一部分“State1”中的内容,点中动态面板,在属性中勾选【自动调整为内容尺寸】;或者,在动态面板上点击<鼠标右键>,在菜单中选择【自动调整为内容尺寸】;(图1-77)

1_77

6、拖入2个矩形到画布,作为登录按钮,摆放在动态面板的上层;设置默认样式(灰色字体与灰色边框)以及【选中】的交互样式(黑色字体与橙色边框);勾选“快速登录”属性中的【选中】,让其在页面打开时即为选中后的状态;在元件样式中设置这2个矩形的只保留底部边框(参考“基础7”);最后,为这2个矩形{设置选项组名称}为“LoginButton”;(图1-78)

1_78

7、为“快速登录”按钮的【鼠标单击时】事件添加“用例1”,设置动作为【选中】“当前元件”;

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

1_79

8、继续上一步,添加动作【设置面板状态】“LoginPanel”为“State1”。

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

1_80

9、参照操作步骤8与操作步骤9,为“账户密码登录”按钮设置【鼠标单击时】事件添加“用例1”,设置第1个动作为【选中】“当前元件”;第2个动作为【设置面板状态】“LoginPanel”为“State2”。

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

1_81

 

补充说明:

  • 本案例中使用了“FontAwesome4.4.0”图标字体元件库,需要安装字体文件支持,并进行Web字体设置。(参考案例1的补充说明)