国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

ionic的checkbox分析

null1145 / 2757人閱讀

摘要：之前分析了一個原生的，趁熱打鐵分析的自帶定義了一個父節(jié)點(diǎn)。此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。子節(jié)點(diǎn)讓元素的子節(jié)點(diǎn)像元素一樣。綜上，只是給了一個邊框的效果。子節(jié)點(diǎn)這個就是那個后顯示的對號。

之前分析了一個原生的checkbox，趁熱打鐵分析ionic的自帶checkbox.

html

css

- checkbox

.checkbox {
  position: relative;
  display: inline-block;
  padding: 7px 7px;
  cursor: pointer; }

定義了一個父節(jié)點(diǎn)。
display: inline-block;此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。
- checkbox子節(jié)點(diǎn)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;讓元素的子節(jié)點(diǎn)像table元素一樣。
使用基于表格的CSS布局，使我們能夠輕松定義一個單元格的邊界、背景等樣式，而不會產(chǎn)生因?yàn)槭褂昧藅able那樣的制表標(biāo)簽所導(dǎo)致的語義化問題。
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子節(jié)點(diǎn)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 規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果;
ease-in 規(guī)定以慢速開始的過渡效果;
ease-out 規(guī)定以慢速結(jié)束的過渡效果;
ease-in-out 規(guī)定以慢速開始和結(jié)束的過渡效果
transform: rotate(-45deg);旋轉(zhuǎn)45度。
后面的其實(shí)就在弄出“對號”

checkbox子元素Input:checked:before

.checkbox input:checked:before {
   background: #387ef5;
   border-color: #387ef5;
   border-width: 2px;
}

當(dāng)checked時，Input:before的背景顏色和邊框顏色都是藍(lán)色。

checkbox子元素Input:checked:after

.checkbox input:checked:after{
   opacity: 1; 
}

當(dāng)checked時，input:after透明度為0(顯示那個“對號”).

結(jié)論

綜上所述，
input:before是一個邊框效果
input:after是一個“對號”效果
當(dāng)checked時，input:after（對號）顯示，input:before（原來的灰色邊框）的背景和邊框都變?yōu)樗{(lán)色。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/49728.html

相關(guān)文章

  • ionic的checkbox分析

    摘要：之前分析了一個原生的，趁熱打鐵分析的自帶定義了一個父節(jié)點(diǎn)。此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。子節(jié)點(diǎn)讓元素的子節(jié)點(diǎn)像元素一樣。綜上，只是給了一個邊框的效果。子節(jié)點(diǎn)這個就是那個后顯示的對號。 之前分析了一個原生的checkbox，趁熱打鐵分析ionic的自帶checkbox. html check showImg(https://segmentfault.com/img...

    booster 評論0 收藏0

  • ionic2實(shí)現(xiàn)透明狀態(tài)欄和透明工具欄

    摘要：抽時間寫了個，你想要的都在這里了。你可以狠狠的點(diǎn)擊下面的鏈接去往倉庫地址，一探究竟。你可以直接下來，直接運(yùn)行。 ionic2實(shí)現(xiàn)透明狀態(tài)欄和透明工具欄 目錄 如何實(shí)現(xiàn)？ 集成DEMO（2017/4/1更新） 簡短的分析 一個額外的小栗子 我想讓狀態(tài)欄變色怎么辦？ 為什么這么做？ 總結(jié) 以下是我的方案，不繞彎子，直接上實(shí)現(xiàn)過程．首先貼效果圖，來張gif（2017/4/1更新）show...

    wenshi11019 評論0 收藏0

  • ionic打包報(bào)錯Execution failed for task ':processD

    摘要：項(xiàng)目打包運(yùn)行命令的時候報(bào)錯報(bào)錯詳情如下解決辦法已經(jīng)執(zhí)行過命令添加了平臺，直接打開目錄你的項(xiàng)目工程文件中找到方法在這個方法之前添加上如下內(nèi)容原因分析帶號是指要用最新版本。 ionic項(xiàng)目打包運(yùn)行命令 ionic build android的時候報(bào)錯 報(bào)錯詳情如下 :processDebugResourcesERROR: In FontFamilyFont, unable to find...

    GeekGhc 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<