feat: checkbox

demo/components/checkboxDemo.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="doc">
+    <h1>多选框</h1>
+    <hr>
+    <h2>基本用法</h2>
+    <n-checkbox v-model="checked">
+      Nimbus
+    </n-checkbox><br>{{ String(checked) }}
+    <br>
+    <textarea rows="5">scaffold</textarea>
+    <hr>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {},
+  data () {
+    return {
+      checked: false
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.doc {
+  width: 900px;
+  margin: auto;
+  textarea {
+    width: 100%;
+    min-height: 3em;
+  }
+  background: #5C647B
+}
+
+</style>

demo/components/demoScaffold.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="doc">
+    <h1>scaffold</h1>
+    <hr>
+    <h2>基本用法</h2>
+    scaffold
+    <br>
+    <textarea rows="5">scaffold</textarea>
+    <hr>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped lang="scss">
+.doc {
+  width: 900px;
+  margin: auto;
+  textarea {
+    width: 100%;
+    min-height: 3em;
+  }
+}
+
+</style>

demo/demo.vue

@@ -20,6 +20,10 @@
       <router-link to="/n-icon">
         图标 / n-icon
       </router-link>
+      <br>
+      <router-link to="/n-checkbox">
+        多选框 / n-checkbox
+      </router-link>
     </div>
   </div>
 </template>

demo/index.js

@@ -11,6 +11,7 @@ import WithPadding from 'packages/common/WithPadding'
 import WithMargin from 'packages/common/WithMargin'
 import MasonryGroup from 'packages/common/MasonryGroup'
 import Table from 'packages/common/Table'
+import Checkbox from 'packages/common/Checkbox'
 
 import ServiceCard from 'packages/nimbus/ServiceCard'
 import HomeLayout from 'packages/nimbus/HomeLayout'
@@ -21,6 +22,7 @@ import sideMenuDemo from './components/sideMenuDemo'
 import homeDemo from './components/homeDemo'
 import gradientTextDemo from './components/gradientTextDemo'
 import iconDemo from './components/iconDemo'
+import checkboxDemo from './components/checkboxDemo'
 import demo from './demo'
 
 Vue.use(VueRouter)
@@ -38,13 +40,15 @@ ServiceCard.install(Vue)
 MasonryGroup.install(Vue)
 Table.install(Vue)
 WithMargin.install(Vue)
+Checkbox.install(Vue)
 
 const routes = [
   { path: '/', component: demo },
   { path: '/n-nimbus-service-layout', component: sideMenuDemo },
   { path: '/n-nimbus-home-layout', component: homeDemo },
   { path: '/n-gradient-text', component: gradientTextDemo },
-  { path: '/n-icon', component: iconDemo }
+  { path: '/n-icon', component: iconDemo },
+  { path: '/n-checkbox', component: checkboxDemo }
 ]
 
 const router = new VueRouter({

package.json

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

packages/common/Checkbox/index.js

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

packages/common/Checkbox/src/main.vue

@@ -0,0 +1,37 @@
+<template>
+  <div
+    class="n-checkbox"
+    @click="handleClick"
+  >
+    <div
+      class="checkbox"
+      :class="{checked:checked}"
+    >
+      <div
+        class="inner"
+        :class="{checked:checked}"
+      />
+    </div>
+    <div class="label">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NCheckbox',
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
+  props: {
+    checked: Boolean
+  },
+  methods: {
+    handleClick () {
+      this.$emit('change', !this.checked)
+    }
+  }
+}
+</script>

packages/common/Scaffold/index.js

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

packages/common/Scaffold/src/main.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>example</div>
+</template>
+
+<script>
+export default {
+  name: 'NScaffold'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

styles/Checkbox.scss

@@ -0,0 +1,48 @@
+@import './mixins/mixins.scss';
+
+@include b(checkbox) {
+  & {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+  .label {
+    font-size: 12px;
+    color: #63E2B7;
+  }
+  .checkbox {
+    & {
+      height: 15px;
+      width: 15px;
+      margin-right: 6px;
+      border: 1px solid #63E2B7;
+      background-color: transparent;
+      border-radius: 4px;
+      position: relative;
+      
+    }
+    &.checked {
+      background-color: #63E2B7;
+    }
+    .inner {
+      &::after {
+        box-sizing: content-box;
+        content: "";
+        border: 1.5px solid #5C647B;
+        border-left: 0;
+        border-top: 0;
+        height: 8px;
+        left: 5px;
+        position: absolute;
+        top: 2px;
+        transform: rotate(45deg) scaleY(0);
+        width: 3px;
+        transform-origin: center;
+      }
+      &.checked::after {
+        transform: rotate(45deg) scaleY(1);
+      }
+    }
+  }
+}

styles/Scaffold.scss

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

styles/index.scss

@@ -8,5 +8,6 @@
 @import './ServiceCard.scss';
 @import './Table.scss';
 @import './WithMargin.scss';
+@import './Checkbox.scss';
 
 @import './NimbusServiceLayout.scss';