ionic的checkbox分析

null1145 发布于2019-08-01 15:03 / 2741人阅读

摘要：之前分析了一个原生的，趁热打铁分析的自带定义了一个父节点。此元素会被显示为内联元素，元素前后没有换行符。子节点让元素的子节点像元素一样。综上，只是给了一个边框的效果。子节点这个就是那个后显示的对号。

之前分析了一个原生的checkbox，趁热打铁分析ionic的自带checkbox.

html


  check

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: #ffffd;
    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: #ffffd;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（原来的灰色边框）的背景和边框都变为蓝色。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49728.html

ionic的checkbox分析

摘要：之前分析了一个原生的，趁热打铁分析的自带定义了一个父节点。此元素会被显示为内联元素，元素前后没有换行符。子节点让元素的子节点像元素一样。综上，只是给了一个边框的效果。子节点这个就是那个后显示的对号。之前分析了一个原生的checkbox，趁热打铁分析ionic的自带checkbox. html check showImg(https://segmentfault.com/img...

booster 2019-08-30 12:44 评论0 收藏0
ionic2实现透明状态栏和透明工具栏

摘要：抽时间写了个，你想要的都在这里了。你可以狠狠的点击下面的链接去往仓库地址，一探究竟。你可以直接下来，直接运行。 ionic2实现透明状态栏和透明工具栏目录如何实现？集成DEMO（2017/4/1更新）简短的分析一个额外的小栗子我想让状态栏变色怎么办？为什么这么做？总结以下是我的方案，不绕弯子，直接上实现过程．首先贴效果图，来张gif（2017/4/1更新）show...

wenshi11019 2019-08-21 15:36 评论0 收藏0
ionic打包报错Execution failed for task ':processD

摘要：项目打包运行命令的时候报错报错详情如下解决办法已经执行过命令添加了平台，直接打开目录你的项目工程文件中找到方法在这个方法之前添加上如下内容原因分析带号是指要用最新版本。 ionic项目打包运行命令 ionic build android的时候报错报错详情如下 :processDebugResourcesERROR: In FontFamilyFont, unable to find...

GeekGhc 2019-08-22 15:22 评论0 收藏0