feat: button with size & icon & round

demo/components/ButtonDemo.vue

@@ -8,10 +8,25 @@
     <h2>基本用法</h2>
     <n-button
       round
+      size="small"
       icon="md-save"
     >
       Save as Template
     </n-button>
+    <n-button
+      round
+      icon="md-save"
+    >
+      Save as Template
+    </n-button>
+    <n-button
+      round
+      size="large"
+      icon="md-save"
+    >
+      Save as Template
+    </n-button>
+    <br>
     <n-button round>
       Cancel
     </n-button>
@@ -23,16 +38,40 @@
       round
       @click="handleClick"
     >
-      New Service
+      handleClick
+    </n-button>
+    <n-button size="small">
+      small size
+    </n-button>
+    <n-button>
+      regular size
+    </n-button>
+    <n-button size="large">
+      large size
     </n-button>
     <br><br>
-    <textarea rows="5">
+    <textarea rows="30">
+<n-button
+  round
+  size="small"
+  icon="md-save"
+>
+  Save as Template
+</n-button>
 <n-button
   round
   icon="md-save"
 >
   Save as Template
 </n-button>
+<n-button
+  round
+  size="large"
+  icon="md-save"
+>
+  Save as Template
+</n-button>
+<br>
 <n-button round>
   Cancel
 </n-button>
@@ -44,7 +83,16 @@
   round
   @click="handleClick"
 >
-  New Service
+  handleClick
+</n-button>
+<n-button size="small">
+  small size
+</n-button>
+<n-button>
+  regular size
+</n-button>
+<n-button size="large">
+  large size
 </n-button>
 </textarea>
     <hr>

demo/demo.vue

@@ -64,3 +64,14 @@ export default {
   align-items: center;
 }
 </style>
+
+<style>
+.CodeMirror {
+  border: 1px solid #eee;
+  height: auto;
+}
+.CodeMirror-scroll {
+  overflow-y: hidden;
+  overflow-x: auto;
+}
+</style>

package.json

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

packages/common/Button/src/main.vue

@@ -3,7 +3,8 @@
     class="n-button"
     :class="{
       'is-round': round,
-      [`is-${type}`]: true
+      [`is-${type}`]: true,
+      [`n-button--${size}-size`]: true
     }"
     v-on="$listeners"
   >

styles/Button.scss

@@ -6,25 +6,59 @@
   align-items: center;
   justify-content: center;
   box-shadow: inset 0 0 0 1.5px $default-button-border-color;
-  height: 28px;
-  border-radius: 4px;
-  padding-left: 18px;
-  padding-right: 18px;
-  box-sizing: border-box;
-  font-size: $regular-font-size;
   cursor: pointer;
   user-select: none;
   font-weight: 700;
   &.n-button--small-size {
-
+    font-size: 13px;
+    height: 22px;
+    border-radius: 5px;
+    padding: 0 14px;
+    &.is-round {
+      border-radius: 11px
+    }
+    .n-button__icon {
+      height: 15px;
+      margin-right: 5px;
+      & > i::before {
+        color: #63E2B7FF;
+        font-size: 15px;
+      }
+    }
+  }
+  &.n-button--default-size, &.n-button--medium-size {
+    font-size: 14px;
+    height: 28px;
+    border-radius: 6px;
+    padding: 0 18px;
+    &.is-round {
+      border-radius: 14px
+    }
+    .n-button__icon {
+      height: 18px;
+      margin-right: 6px;
+      & > i::before {
+        font-size: 18px;
+      }
+    }
   }
   &.n-button--large-size {
-
-  }
-  &.n-button--medium
-  &.is-round {
-    border-radius: 14px
+    font-size: 16px;
+    height: 34px;
+    border-radius: 8px;
+    padding: 0 24px;
+    &.is-round {
+      border-radius: 17px
+    }
+    .n-button__icon {
+      height: 20px;
+      margin-right: 6px;
+      & > i::before {
+        font-size: 22px;
+      }
+    }
   }
+  
   &.is-default {
     color: $default-button-text-color;
     &:hover {
@@ -53,7 +87,7 @@
       font-size: 18px;
     }
   }
-  .n-button__content, .n-button__icon {
-    margin-top: -1px;
-  }
+  // .n-button__content, .n-button__icon {
+  //   margin-top: -1px;
+  // }
 }