AxureRP8实战手册-案例7（形状：唯一选中项）
案例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原创教程网 » AxureRP8实战手册-案例7（形状：唯一选中项）