Axure设计：自定义样式的复选框

1、新建2个矩形~分别命名为“矩形A”和“矩形B”

2、设置“矩形A”：

1.尺寸大小为90*30；

2.边框颜色：#CCCCCC；

3.圆角半径：5

4.选中时，边框颜色：#5FB878；

3、设置“矩形B”：

1.尺寸大小为60*30；

2.边框颜色：#CCCCCC；

3.填充色：#CCCCCC；

3.字体颜色：#FFFFFF；

3.圆角半径：5；（仅左上角和左下角）

4.选中时，边框颜色：#5FB878；

5.选中时，填充色：#5FB878；

6.命名为：label

4、另新建一“勾选”样式的图标；

设置如下：

1.尺寸为12*10；

2.填充色：#CCCCCC；

3.隐藏；

4.选中时，填充色：#5FB878；

5.命名为：tick

5、按以下布局方式，放置“矩形”和“图标”，并组合，命名为“option”

6、以下，针对“组合：”设置交互动作~

7、“组合：option”的“鼠标移入时”交互：

8、case1：

判定条件：

---

当”矩形：label“不是”选中“状态时

---

9、动作：

---

显示"图形：tick"；动画：无；更多选项：弹出效果；

---

10、“组合：option”的“鼠标单击时”交互：

11、case1：

动作：

---

1.设置”组合：option“的选中状态为“切换”方式

2.显示“图形：tick”

---

12、case2：

判定条件：

---

当”矩形：label“不是”选中“状态时

---

13、动作：

---

触发”组合：option“的”鼠标移入时“动作

---

14、ok~看似简单的交互，设置还是比较绕~

15、觉得不错，对你有帮助的话，请投个票，加个赞哦~