Less is More——一个input实现开关按钮

原创 燃烧的陈林林 随笔 HTML/CSS 279阅读 2017-05-22 14:19:36 举报

Less is More。这是20世纪30年代著名的建筑师路德维希·密斯·凡德罗说过的一句话,意思是“少即多”这是一种提倡简单,反对过度装饰的设计理念。简单的东西往往带给人们的是更多的享受。

作为程序员我们写代码何尝不是这样子呢?

腾讯WXG基础产品部的颜俊鸿在“物勒工名”,第一届前端体验大会分享了《WeUI代码设计理念》的时候提到:
1、以更少的代码实现组件;
2、减少冗余的样式;
3、简化接口。

最近在学习WeUI,发现一个很有代表性的组件——开关按钮,很好地诠释了“以更少的代码实现组件”。

一个开关按钮只用到了一个input标签。

一个input实现开关按钮
首先input标签设置type="checkbox",这样input会有checked的属性(设置或返回 checkbox是否应被选中)。这就有我们需要的两种状态,开和关。

input设置没选中状态为灰色#DFDFDF,选中为绿色#04BE02。

input中的before覆盖在input上面,未选中状态设置颜色#FDFDFD(和input设置的颜色一样),选中状态设置为transform: scale(0)。

input中的after是上面的圆球,选中状态沿X轴向右平移20px。

具体代码如下:html 代码

欢迎学习交流——燃烧的陈林林

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复