案例7. 形状:唯一选中项
案例来源:
京东APP-手机充值
案例效果:
- 整体界面效果:(图1-35)
- 原型实现效果:(图1-36)
案例描述:
点击每一个金额按钮时,当前按钮变为红色背景与白色字体,其它按钮恢复白色背景与黑色字体。
元件准备:
- 页面中:(图1-37)
思路分析:
- 按钮有两种状态与样式,可以通过元件的交互样式来实现;(操作步骤1)
- 点击按钮时,通过设置当前的元件为被选中的状态使其变色;(操作步骤3)
- 只允许有一个按钮呈现被选中的样式,可以通过给所有按钮元件设置选项组名称来实现效果。(操作步骤2)
操作步骤:
1、在页面上添加一个矩形元件,在元件属性中为其设置【选中】的样式,可参考基础23;(图1-38)
2、在元件属性中,{设置选项组名称}为“Price”;(图1-38)
3、为元件的【鼠标单击时】添加“用例1”,设置动作【选中】“当前元件”。(图1-39)
4、最后将此元件复制多个,排列整齐,更改金额文字;(图1-40)
5、将第一个元件的【选中】勾选,让其在页面加载时即为已选中的状态。(图1-38)
补充说明:
- 本案例中的按钮默认样式设置包括:
- 圆角半径:5;
- 阴影:偏移(0,0);模糊(5);
- 本案例中使用了“FontAwesome4.4.0”图标字体元件库,需要安装字体文件支持,并进行Web字体设置。(参考案例1的补充说明)