案例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的补充说明)
~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~
小楼老师全新打造Axure RP 9精品课程，以独有的教学方法与技巧，帮助你以最短的时间高效的完成学习目标。
《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】
喜欢 (32)or分享 (0)
