一、说明
在APP或小程序设置中心中,我们经常碰到某个属性开关的设置,例如是否接收消息等等,过去的体验中用checkbox实现即可,今天为大家介绍一种交互效果比较好的一种实现方式。接下来会用到两个元件实现该效果。
二、效果展示
三、操作步骤
-
在画布中添加一个矩形大小为56X32,同时设置在样式中设置
'圆角'
为28,设置背景色为D7D7D7,命名为block
; -
再往画布中添加一个直径为28的小圆圈,设置背景色为FFFFFF,命名为
round
; -
将原区移动到底部矩形区域中,在左侧偏移4个像素大小;
-
将圆圈和矩形选中进行组合(快捷键
CTRL+G
),同时命名为on-off; -
接下来为block添加选定背景色,这里选择绿色,颜色可由自己自行而定;
-
再给组合原件on-off 交互中添加鼠标点击,设置选择/选中,目标原件为当前原件,值为
切换
;
-
最后再给roun元件中添加
选中
及未选中
交互事件