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（形状：唯一选中项）

【转】AxureRP8实战手册-案例7（形状：唯一选中项）

原文：https://www.cnblogs.com/sikongluoxing/p/12759952.html