ionic的checkbox分析
之前分析了一个原生的checkbox,趁热打铁分析ionic的自带checkbox.
html
<label class="checkbox">
<input type="checkbox">check
</label>
css
- checkbox
.checkbox {
position: relative;
display: inline-block;
padding: 7px 7px;
cursor: pointer; }
定义了一个父节点。display: inline-block;
此元素会被显示为内联元素,元素前后没有换行符。
- checkbox子节点input:before
.checkbox input:before{
display: table;
width: 100%;
height: 100%;
border-color: #ddd;
border-width: 1px;
border-style: solid;
border-radius: 28px;
background: #fff;
content: ' ';
-webkit-transition: background-color 20ms ease-in-out;
transition: background-color 20ms ease-in-out; }
display:table;
让元素的子节点像table元素一样。
使用基于表格的CSS布局,使我们能够轻松定义一个单元格的边界、背景等样式,而不会产生因为使用了table那样的制表标签所导致的语义化问题。width: 100%;height: 100%;
高度宽度。
border-color: #ddd;border-width: 1px;border-style: solid;border-radius: 28px;
定义一个圆形的边框,浅灰色。transition: background-color 20ms ease-in-out;
这是一个CSS3过渡效果。即背景颜色有2ms的过度。
综上,input:before只是给了一个边框的效果。
- checkbox子节点input:after
.checkbox input:after{
-webkit-transition: opacity 0.05s ease-in-out;
transition: opacity 0.05s ease-in-out;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
top: 33%;
left: 25%;
display: table;
width: 14px;
height: 6px;
border: 1px solid #fff;
border-top: 0;
border-right: 0;
content: ' ';
opacity: 0; }
这个就是那个checked后显示的对号。transition: opacity 0.05s ease-in-out;
表示一个透明度的渐变。ease-in-out:
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果;
ease-in 规定以慢速开始的过渡效果;
ease-out 规定以慢速结束的过渡效果;
ease-in-out 规定以慢速开始和结束的过渡效果transform: rotate(-45deg);
旋转45度。
后面的其实就在弄出“对号”
checkbox子元素Input:checked:before
.checkbox input:checked:before {
background: #387ef5;
border-color: #387ef5;
border-width: 2px;
}
当checked时,Input:before
的背景颜色和边框颜色都是蓝色。
checkbox子元素Input:checked:after
.checkbox input:checked:after{
opacity: 1;
}
当checked时,input:after
透明度为0(显示那个“对号”).
结论
综上所述,input:before
是一个边框效果input:after
是一个“对号”效果
当checked
时,input:after
(对号)显示,input:before
(原来的灰色边框)的背景和边框都变为蓝色。
ionic的checkbox分析的更多相关文章
- ListView+CheckBox两种解决方式及原因分析
近期在用ListView+CheckBox搞一个item选中的项目,我将CheckBox的focus设置为false,另我大喜的是,CheckBox居然能够选中(窃喜中),这么简单就搞定了,由于数据量 ...
- (转)jquery serialize表单序列化,当radio或checkbox 未选中时,没有序列化到对象中的原因分析和解决方案 - ghostsf
相信很多人都用过jq的表单序列化serialize()方法,因为这能很方便地帮你把表单里所有的非禁用输入控件序列化为 key/value 对象,不需要你再去一个个地拼接参数了. 这是一个很好用的函数, ...
- ionic-CSS:ionic checkbox(复选框)
ylbtech-ionic-CSS:ionic checkbox(复选框) 1.返回顶部 1. ionic checkbox(复选框) ionic 里面的 Checkbox 和普通的 Checkbox ...
- jQuery checkbox选中问题之prop与attr注意点分析
$(function () { // 全选 $("#btnCheckAll").bind("click", function () { $(&q ...
- 微信小程序组件解读和分析:八、checkbox复选项
checkbox复选项组件说明: checkbox是小程序表单组件中的一个组件,作用是在表单中引导用户做出选择. 要使用checkbox组件,还需要在同组中所有的checkbox标签外使用checkb ...
- ionic build android 报错分析
- 查看w3wp进程占用的内存及.NET内存泄露,死锁分析
一 基础知识 在分析之前,先上一张图: 从上面可以看到,这个w3wp进程占用了376M内存,启动了54个线程. 在使用windbg查看之前,看到的进程含有 *32 字样,意思是在64位机器上已32位方 ...
- JQuery Sizzle引擎源代码分析
最近在拜读艾伦在慕课网上写的JQuery课程,感觉在国内对JQuery代码分析透彻的人没几个能比得过艾伦.有没有吹牛?是不是我说大话了? 什么是Sizzle引擎? 我们经常使用JQuery的选择器查询 ...
- Ionic2系列——Ionic 2 Guide 官方文档中文版
最近一直没更新博客,业余时间都在翻译Ionic2的文档.之前本来是想写一个入门,后来觉得干脆把官方文档翻译一下算了,因为官方文档就是最好的入门教程.后来越翻译越觉得这个事情确实比较费精力,不知道什么时 ...
随机推荐
- WIN10:显示隐藏文件夹
AppData是默认隐藏文件夹,可以通过工具栏显示隐藏项目显示
- 关于LR的笔记
- HTML 基础及超链接练习
实验一:HTML 基础及超链接练习 实验目的: 熟悉 HTML 基础及超链接的使用 实验要求: 1.建立至少 3 个以上的网页: 2.实现任意两网页之间的跳转(建议做个导航菜单): 3.每个网页里面至 ...
- Oneops运维系统
背景:公司对接其他系统时都会将业务分为几大模块由不同的人员去开发部署.那么部署方式为传统方式登录服务器,然后操作.所以每次上线我们可能都需要等待别的同事操作完才能操作自己所负责的业务系统.针对以上 ...
- 装饰器property的简单运用
property函数:在类中使用,将类中的方法伪装成一个属性 使用方法:在函数,方法,类的上面一行直接@装饰器的名字 装饰器的分类: 装饰器函数 装饰器方法:property 装饰类 class St ...
- S7-1200在博途V16中新建数据块(DB)
硬件环境: S7-1200 CPU V4.4(6ES7 212-1AE40-0XB0) 软件环境: (1)Windows 10 Professional SP1 64位 (2)STEP7 V16 SP ...
- case 函数语法与使用
case 函数是聚合函数的一种,为统计函数. case表达式: CASE selector WHEN value1 THEN action1; WHEN value2 THEN action2; WH ...
- 浅析DES原理
对称密码体制 对称密码体制:一种加密系统.其加密密钥和解密密钥是相同的,或者能够从其中之一推知另一个.对称密码体制根据对明文加密方式不同分为分组密码和流密码. 分组密码 分组密码按照一定长度(如64b ...
- SpringBoot中的日志使用:
SpringBoot中的日志使用(一) 一:日志简介: 常用的日志接口 commons-logging/slf4j 日志框架:log4j/logback/log4j2 日志接口屏蔽了日志框架的底层实现 ...
- Struts2里面有什么隐式对象?
Struts 2.1 的隐式对象 (这些隐式对象都是Map类型) parameters 用于访问请求参数 request 用于访问HttpServletRequest的属性 session 用于访问H ...