Axure RP 案例(自定义复选框)

复选框其实就是一个矩形 + 文本标签。复选框选中其实是设置矩形的文本为对号。

一:方式一

为矩形添加一个单击事件,每次单击时都要判断矩形的文本是否为空,为空说明是未选中状态然后设置矩形文本为对号,如果不为空说明是选中状态设置矩形文本为空字符串。

  1. 拖入一个矩形,并设置宽高各为15,设置内阴影有点立体感。Axure RP 案例(自定义复选框)_第1张图片在这里插入图片描述
  2. 添加鼠标单击事件,如果矩形文本为空没有内容时就设置矩形文本为✔️。Axure RP 案例(自定义复选框)_第2张图片
  3. 继续为矩形添加鼠标单击事件Case2,矩形文本只有两种情况,一种是文本为空,一种是文本不为空,上面Case1已经判断过为空了,这个Case就不用判断了,肯定是另一种情况。Axure RP 案例(自定义复选框)_第3张图片Axure RP 案例(自定义复选框)_第4张图片

Axure RP 案例(自定义复选框)_第5张图片

二:方式二

  1. 拖入一个矩形,并设置宽高各为15,设置内阴影有点立体感。Axure RP 案例(自定义复选框)_第6张图片在这里插入图片描述
  2. 设置选中样式:边框颜色、字体颜色、字体类型。Axure RP 案例(自定义复选框)_第7张图片Axure RP 案例(自定义复选框)_第8张图片
  3. 为矩形添加选中事件。Axure RP 案例(自定义复选框)_第9张图片
  4. 为矩形添加取消选中事件。Axure RP 案例(自定义复选框)_第10张图片
    Axure RP 案例(自定义复选框)_第11张图片

两种效果都可以实现复选框,但是第二种利用选中和取消选中方式更加灵活,可以设置选中时的样式,建议使用这种方式。

你可能感兴趣的:(#,Axure,RP)