相关链接
案例目标
1. 了解 单选 功能的实现原理
2. 掌握 按钮 的常见使用方式
3. 掌握 指定单选按钮的组 功能的使用
一、成品效果
版本介绍
一、单选题
1.1 同一题的多个选项中,至多有一个按钮 处于 选中状态
二、多选题
2.1 按钮点击后,处于选中状态(目前测试Axure不支持再次点击取消选中)
三、全选、取消全选、反选
3.1 点击 全选 ,范围内所有按钮处于 选中状态
3.2 点击 取消全选 ,范围内所有按钮处于 未选中状态
3.3 点击 反选 ,范围内所有按钮的选中状态进行 状态切换
案例汇总包含三种常见的选择方式:
1. 单选
2. 多选
3. 全选、取消全选、反选
存在问题:单选按钮只能点击后变为选中模式,再次点击无法变为未选择样式。
二、素材准备
只需要使用Axure RP 9 默认元件,单选按钮、矩形即可。
三、制作方法
1.单选
操作:选中多个按钮,将其置于同一个单选按钮的组。
组的特点:在同一时间,组内元件至多有一个,处于选中状态。
2.多选
直接使用默认元件库的单选按钮即可。
3.全选、取消全选、反选
全选:通过给按钮增加【交互】单击时 -> 【动作】设置选中 -> 设置值为 真。
取消全选:通过给按钮增加【交互】单击时 -> 【动作】设置选中 -> 设置值为 假。
反选:通过给按钮增加【交互】单击时 -> 【动作】设置选中 -> 设置值为 切换。
22/09/02
M