💄improve switch

hedou · Feb 26, 2019 · 699f364 · 699f364
1 parent 42d06f1
commit 699f364
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 13 deletions.
diff --git a/custom-radio.md b/custom-radio.md
@@ -1,6 +1,6 @@
 # Custom radios
 
-?> Background：:point_right: [transition](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition), [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform)
+?> Background: :point_right: [transition](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition), [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform)
 
 <vuep template="#custom-radio"></vuep>
 

diff --git a/custom-switch.md b/custom-switch.md
@@ -1,5 +1,9 @@
 
-### Custom switch
+### Custom switch selector
+
+?> Background: :point_right: [transition](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition), [Pseudo-elements](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#%E4%BC%AA%E5%85%83%E7%B4%A0)
+
+Similar to custom checkboxes or custom radio buttons, they use a hidden `input(:checked)` element + an associated `label` element to simulate the switch selector with the `label` element and its pseudo-elements. Use the `:checked` property of `input` to simulate whether the `switch` state is enabled.
 
 <vuep template="#custom-radio"></vuep>
 
@@ -17,7 +21,7 @@
   }
   label {
     position: relative;
-    width: 40px;
+    width: 48px;
     height: 20px;
     background: lightgrey;
     border-radius: 10px;
@@ -34,10 +38,12 @@
     position: absolute;
   }
   label::before {
-    content: '关';
+    content: 'OFF';
     top: 4px;
-    left: 22px;
+    left: 21px;
     color: white;
+    transform: scale(.7);
+    font-weight: 700;
   }
   label::after {
     content: '';
@@ -52,29 +58,38 @@
     background: #b4a078;
   }
   input[type="checkbox"]:checked + label::before {
-    content: '开';
+    content: 'ON';
     left: 6px;
   }
   input[type="checkbox"]:active + label::after {
     width: 23px;
   }
   input[type="checkbox"]:checked + label::after {
-    left: 21px;
+    left: 29px;
   }
   input[type="checkbox"]:checked:active + label::after {
-    left: 16px;
+    left: 24px;
   }
 </style>
 <template>
   <main>
-    <input type="checkbox" id="switch" hidden>
+    <input type="checkbox" id="switch" checked hidden>
     <label for="switch"></label>
     <input type="checkbox" id="switch-disabled" disabled hidden>
     <label for="switch-disabled" disabled></label>
     <input type="checkbox" id="switch-checked-disabled" checked disabled hidden>
     <label for="switch-checked-disabled" disabled></label>
   </main>
 </template>
-<script>  
+<script>
 </script>
 </script>
+
+### 浏览器支持
+
+<iframe
+  width="100%"
+  height="493px"
+  frameborder="0"
+  src="https://caniuse.bitsofco.de/embed/index.html?feat=transforms2d&amp;periods=future_2,future_1,current,past_1,past_2,past_3&amp;accessible-colours=false">
+</iframe>
diff --git a/zh-cn/_sidebar.md b/zh-cn/_sidebar.md
@@ -29,7 +29,7 @@
 	- [扩大可点击区域](zh-cn/extend-hit-area.md)
 	- [自定义复选框](zh-cn/custom-checkbox.md)
 	- [自定义单选框](zh-cn/custom-radio.md)
-	- [自定义开关按钮](zh-cn/custom-switch.md)
+	- [自定义开关选择器](zh-cn/custom-switch.md)
 	- [输入框完美居中](zh-cn/input-align.md)
 	- [通过阴影弱化背景](zh-cn/shadow-weaken-background.md)
 	- [通过模糊弱化背景](zh-cn/blurry-weaken-background.md)

diff --git a/zh-cn/custom-switch.md b/zh-cn/custom-switch.md
@@ -1,5 +1,9 @@
 
-### 自定义开发按钮
+### 自定义开关选择器
+
+?> 背景知识：:point_right: [transition](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition), [伪元素](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#%E4%BC%AA%E5%85%83%E7%B4%A0)
+
+同自定义复选框或自定义单选框类似，都是利用一个隐藏的`input(:checked)`元素 + 一个关联的`label`元素，通过`label`元素及其伪元素模拟switch选择器，通过`input`的`:checked`属性来模拟`switch`状态是否开启。
 
 <vuep template="#custom-radio"></vuep>
 
@@ -67,7 +71,7 @@
 </style>
 <template>
   <main>
-    <input type="checkbox" id="switch" hidden>
+    <input type="checkbox" id="switch" checked hidden>
     <label for="switch"></label>
     <input type="checkbox" id="switch-disabled" disabled hidden>
     <label for="switch-disabled" disabled></label>
@@ -78,3 +82,12 @@
 <script>  
 </script>
 </script>
+
+### 浏览器支持
+
+<iframe
+  width="100%"
+  height="493px"
+  frameborder="0"
+  src="https://caniuse.bitsofco.de/embed/index.html?feat=transforms2d&amp;periods=future_2,future_1,current,past_1,past_2,past_3&amp;accessible-colours=false">
+</iframe>