feat: add switch

demo/components/switchDemo.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="doc">
+    <h1>开关 / n-switch</h1>
+    <hr>
+    <h2>基本用法</h2>
+    <n-switch v-model="active" /><br>
+    active: {{ active }}
+    <br>
+    <textarea rows="5"><n-switch /></textarea>
+    <hr>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      active: false
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.doc {
+  width: 900px;
+  margin: auto;
+  textarea {
+    width: 100%;
+    min-height: 3em;
+  }
+}
+
+</style>

demo/demo.vue

@@ -28,6 +28,10 @@
       <router-link to="/n-round-button">
         圆按钮 / n-round-button
       </router-link>
+      <br>
+      <router-link to="/n-switch">
+        开关 / n-switch
+      </router-link>
     </div>
   </div>
 </template>

demo/index.js

@@ -13,6 +13,7 @@ import MasonryGroup from 'packages/common/MasonryGroup'
 import Table from 'packages/common/Table'
 import Checkbox from 'packages/common/Checkbox'
 import RoundButton from 'packages/common/RoundButton'
+import Switch from '../packages/common/Switch'
 
 import ServiceCard from 'packages/nimbus/ServiceCard'
 import HomeLayout from 'packages/nimbus/HomeLayout'
@@ -25,6 +26,7 @@ import gradientTextDemo from './components/gradientTextDemo'
 import iconDemo from './components/iconDemo'
 import checkboxDemo from './components/checkboxDemo'
 import roundButtonDemo from './components/roundButtonDemo'
+import switchDemo from './components/switchDemo'
 import demo from './demo'
 
 Vue.use(VueRouter)
@@ -44,6 +46,7 @@ Table.install(Vue)
 WithMargin.install(Vue)
 Checkbox.install(Vue)
 RoundButton.install(Vue)
+Switch.install(Vue)
 
 const routes = [
   { path: '/', component: demo },
@@ -52,7 +55,8 @@ const routes = [
   { path: '/n-gradient-text', component: gradientTextDemo },
   { path: '/n-icon', component: iconDemo },
   { path: '/n-checkbox', component: checkboxDemo },
-  { path: '/n-round-button', component: roundButtonDemo }
+  { path: '/n-round-button', component: roundButtonDemo },
+  { path: '/n-switch', component: switchDemo }
 ]
 
 const router = new VueRouter({

index.js

@@ -9,6 +9,7 @@ import MasonryGroup from './packages/common/MasonryGroup'
 import Table from './packages/common/Table'
 import CheckBox from './packages/common/Checkbox'
 import RoundButton from './packages/common/RoundButton'
+import Switch from './packages/common/Switch'
 
 import ServiceCard from './packages/nimbus/ServiceCard'
 import HomeLayout from './packages/nimbus/HomeLayout'
@@ -31,6 +32,7 @@ function installUiToVue (Vue) {
   WithMargin.install(Vue)
   CheckBox.install(Vue)
   RoundButton.install(Vue)
+  Switch.install(Vue)
 }
 
 export default installUiToVue

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "",
   "main": "index.js",
   "scripts": {

packages/common/Switch/index.js

@@ -0,0 +1,7 @@
+import Switch from './src/main.vue'
+
+Switch.install = function (Vue) {
+  Vue.component(Switch.name, Switch)
+}
+
+export default Switch

packages/common/Switch/src/main.vue

@@ -0,0 +1,32 @@
+<template>
+  <div
+    class="n-switch"
+    @click="handleClick"
+  >
+    <div
+      class="rail"
+      :class="{ active: active }"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NSwitch',
+  model: {
+    prop: 'active',
+    event: 'change'
+  },
+  props: {
+    active: {
+      type: Boolean,
+      required: true
+    }
+  },
+  methods: {
+    handleClick () {
+      this.$emit('change', !this.active)
+    }
+  }
+}
+</script>

styles/Scaffold.scss

@@ -1,5 +1,5 @@
 @import './mixins/mixins.scss';
 
-@include b() {
+@include b(scaffold) {
   
 }

styles/Switch.scss

@@ -0,0 +1,33 @@
+@import './mixins/mixins.scss';
+@import './theme/default.scss';
+
+@include b(switch) {
+  .rail {
+    position: relative;
+    height: 14px;
+    width: 28px;
+    border-radius: 7px;
+    background-color: rgba(148,151,155,0.4);
+    margin: 3px;
+    transition: background-color .2s $default-cubic-bezier;
+    &::before {
+      content: "";
+      position: absolute;
+      height: 20px;
+      width: 20px;
+      border-radius: 10px;
+      top: -3px;
+      left: -3px;
+      box-shadow:0px 2px 4px 0px rgba(0,0,0,0.4);
+      background-image: linear-gradient(52deg,rgba(148,151,155,1) 0%,rgba(148,151,155,1) 100%);
+      transition: left .2s $default-cubic-bezier
+    }
+    &.active {
+      background-color: rgba(97, 196, 118, .27);
+      &::before {
+        left: 12px;
+        background-image: linear-gradient(52deg,rgba(120,205,104,1) 0%,rgba(20,166,165,1) 100%);
+      }
+    }
+  }
+}

styles/index.scss

@@ -10,5 +10,6 @@
 @import './WithMargin.scss';
 @import './Checkbox.scss';
 @import './RoundButton.scss';
+@import './Switch.scss';
 
 @import './NimbusServiceLayout.scss';

styles/theme/default.scss

@@ -21,4 +21,6 @@ $default-header-gradient: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20
 $default-button-border-color: #63E2B7;
 $default-button-text-color: #63E2B7;
 $default-button-hover-text-color: #1F263E;
-$default-button-background-color: #63E2B7;
+$default-button-background-color: #63E2B7;
+
+$default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);