Browse Source

upd: switch demo css

richard1015 5 years ago
parent
commit
744220433c
1 changed files with 25 additions and 8 deletions
  1. 25 8
      src/packages/switch/demo.vue

+ 25 - 8
src/packages/switch/demo.vue

@@ -4,15 +4,21 @@
     <div>
       <nut-cell>
         <div slot="title">{{ swActive ? '开' : '关' }}</div>
-        <span slot="desc"><nut-switch :active.sync="swActive"></nut-switch></span>
+        <span slot="desc">
+          <nut-switch :active.sync="swActive"></nut-switch>
+        </span>
       </nut-cell>
       <nut-cell>
         <div slot="title">开启禁用</div>
-        <span slot="desc"><nut-switch :active="true" :disabled="true"></nut-switch></span>
+        <span slot="desc">
+          <nut-switch :active="true" :disabled="true"></nut-switch>
+        </span>
       </nut-cell>
       <nut-cell>
         <div slot="title">关闭禁用</div>
-        <span slot="desc"><nut-switch :disabled="true"></nut-switch></span>
+        <span slot="desc">
+          <nut-switch :disabled="true"></nut-switch>
+        </span>
       </nut-cell>
     </div>
 
@@ -20,28 +26,38 @@
     <div>
       <nut-cell>
         <div slot="title">{{ swActive2 ? '开' : '关' }}</div>
-        <span slot="desc"><nut-switch :active.sync="swActive2" size="small"></nut-switch></span>
+        <span slot="desc">
+          <nut-switch :active.sync="swActive2" size="small"></nut-switch>
+        </span>
       </nut-cell>
       <nut-cell>
         <div slot="title">开启禁用</div>
-        <span slot="desc"><nut-switch :active="true" :disabled="true" size="small"></nut-switch></span>
+        <span slot="desc">
+          <nut-switch :active="true" :disabled="true" size="small"></nut-switch>
+        </span>
       </nut-cell>
       <nut-cell>
         <div slot="title">关闭禁用</div>
-        <span slot="desc"><nut-switch :disabled="true" size="small"></nut-switch></span>
+        <span slot="desc">
+          <nut-switch :disabled="true" size="small"></nut-switch>
+        </span>
       </nut-cell>
     </div>
 
     <h4>change事件</h4>
     <div>
       <nut-cell>
-        <span slot="title"><nut-switch @change="onChange"></nut-switch></span>
+        <span slot="title">
+          <nut-switch @change="onChange"></nut-switch>
+        </span>
       </nut-cell>
     </div>
     <h4>自定义Class</h4>
     <div>
       <nut-cell>
-        <span slot="title"><nut-switch :active="true" class="my-switch"></nut-switch></span>
+        <span slot="title">
+          <nut-switch :active="true" class="my-switch"></nut-switch>
+        </span>
       </nut-cell>
     </div>
   </div>
@@ -74,6 +90,7 @@ export default {
     box-shadow: none;
     background-color: #fff;
     border-radius: 3px;
+    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
   }
 
   &.nut-switch-active {