首页 > 代码库 > AxureRP7.0基础教程系列 部件详解Radio Button 单选按钮

AxureRP7.0基础教程系列 部件详解Radio Button 单选按钮

原型库网站—讲师金乌原创发布,可自由转载,请注明出处!

Axure中文官网:www.AxureRP.cn

 

《AxureRP7.0部件详解》

Radio Button 单选按钮



常见案例

在表单中

单选按钮经常用于从一个小组的选择切换到另一组。
该选择可以触发该页面上的交互或被存储的变量值跨页交互。



编辑单选按钮

单选按钮组
当单选按钮添加到组中后,一次只能有一个被设置为选中状态。
选择你想要加入到组中的单选按钮,然后右键 -- 指定单选按钮组,或者在部件属性面板中设置单选按钮组名称。
如果你想添加多余的单选按钮到组中,右键点击 -- 指定单选按钮组,在弹出的对话框中选择对应的单选按钮组名称。
要将单选按钮从组中移出,右键点击 -- 指定单选按钮组,将群组名称清空,点击确定。

本帖分享可见的内容

单选按钮组案例


预览效果



对齐方式

对齐方式  默认情况下,单选按钮是在左侧,文字在右侧。你可以通过部件属性面板,调整左右位置。



禁用单选按钮

默认情况下单选按钮是启用的,但有些情况需要禁用单选按钮。禁用单选按钮可右键点击选择禁用或者在部件属性面板中选择禁用。

 



设置默认选中或动态选中

单选按钮可以在设计区域点击设置为默认选中,或者右键单击勾选选中。这样生成原型单选按钮默认是选中的。
单选按钮也可以通过设置选择/选中动作动态设置其选中状态。

 




常用交互

点击禁用/启用文本
单选按钮可以添加鼠标单击事件。
因为单选按钮在单选按钮组中自动切换,所以你不需要添加一个以上的用例或向复选框那样的逻辑判断。
点击按钮启用文本部件
预览效果

 



动态切换选中状态

单选按钮可以使用设置选择/选中动作 动态切换其选中状态。
这个案例中包含了如何动态切换单选按钮选中状态。
案例下载
效果预览

 



基于单选按钮选择显示内容

设置单选按钮可以使用条件动态控制动态面板的显示状态。
如果 选中值状态 “单选按钮” 的值 = 真,这个条件的判断后会执行一个设置动态面板状态的动作。

本帖分享可见的内容

案例下载


查看效果

 



使用单选按钮跨页交互
使用单选按钮通常会改变其他页面的元素,这是通过判断如果单选按钮是选中或 真,来存储变量值。
在这个例子中,点击提交按钮是基于单选按钮的选中来设置变量值,在下一页基于页面加载事件对变量值判断来关联显示动态面板状态。

本帖分享可见的内容

案例下载


查看演示



单选按钮的局限性

单选按钮是一个固定的高度和宽度,你可以改变文字,但无法改变按钮形状。


AxureRP7.0基础教程系列 部件详解Radio Button 单选按钮