5.2　唯一选中项

案例描述

单击每一个金额矩形框时，当前矩形变为红色背景和白色字体，其他按钮恢复白色背景与黑色字体，如图5-11所示。

思路分析

• ▷　矩形有两种状态与样式，可以通过元件的交互样式来实现。
• ▷　单击矩形时，通过设置当前的元件为被选中的状态使其改变背景颜色。
• ▷　只允许有一个按钮呈现被选中的样式，可以通过给所有按钮元件设置选项组名称来实现效果。

操作步骤

（1）选择“文件”|“新建”命令，新建一个Axure的文档。

（2）在“元件库”面板中将“矩形1”元件拖入编辑区中，在工具栏中设置x和y坐标分别为80和60，“宽度”和“高度”分别为90和45，双击“矩形1”元件进入编辑状态，输入“10元”，如图5-12所示。

（3）在右侧“样式”面板中单击“边框”区域的“线条颜色”下拉三角按钮，在弹出的颜色面板中选择灰色（#CCCCCC）色块设置边框颜色，在“圆角半径”右侧文本框中输入10，如图5-13所示，设置圆角矩形。

（4）在编辑区中选择矩形元件，在右侧“属性”面板中的“交互样式设置”区域单击“选中”超链接，如图5-14所示。

（5）在弹出的“交互样式设置”对话框中选中“字体颜色”复选框，单击“字体颜色”下拉三角按钮，在弹出的颜色面板中选择白色（#FFFFFF）色块；选中“填充颜色”复选框，单击“填充颜色”下拉三角按钮，在弹出的颜色面板中选择红色（#FF3300）色块，如图5-15所示，单击“确定”按钮返回至编辑区中。

（6）在“属性”面板中设置选项组名称为Price，如图5-16所示。

（7）在“属性”面板中单击“添加用例”超链接，弹出“用例编辑<鼠标单击时>”对话框，在左侧“添加动作”区域选择“选中”选项；在右侧“配置动作”区域选中“当前元件”复选框，如图5-17所示，单击“确定”按钮返回至编辑区中。

（8）选择矩形元件并按住Ctrl键拖动，复制8个相同的矩形，并分别输入“20元”“30元”“50元”“100元”“200元”“300元”“500元”“其他金额”，如图5-18所示。

（9）按Ctrl+S快捷键，以“5.2”为名称保存该文件，然后按F5键预览效果，如图5-19所示。