feat(tag): add tag component

demo/components/tagDemo/scaffold.demo.vue

@@ -8,7 +8,35 @@
       style="flex-wrap: nowrap;"
     >
       <!--EXAMPLE_START-->
-      Write some demo here
+      <n-tag>Label 1</n-tag>
+      <n-tag
+        type="success"
+        closable
+        @close="handleClose"
+      >
+        Label 1
+      </n-tag>
+      <n-tag
+        type="warning"
+        closable
+        @close="handleClose"
+      >
+        Label 1
+      </n-tag>
+      <n-tag
+        type="error"
+        closable
+        @close="handleClose"
+      >
+        Label 1
+      </n-tag>
+      <n-tag
+        type="info"
+        closable
+        @close="handleClose"
+      >
+        Label 1
+      </n-tag>
       <!--EXAMPLE_END-->
     </div>
     <pre class="n-doc-section__inspect">Inspect some value here</pre>
@@ -23,6 +51,11 @@ export default {
   data () {
     return {
     }
+  },
+  methods: {
+    handleClose () {
+      this.$NMessage.info('tag close')
+    }
   }
 }
 </script>

packages/common/Tag/index.js

@@ -0,0 +1,8 @@
+/* istanbul ignore file */
+import Tag from './src/main.vue'
+
+Tag.install = function (Vue) {
+  Vue.component(Tag.name, Tag)
+}
+
+export default Tag

packages/common/Tag/src/main.vue

@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="n-tag"
+    :class="{
+      [`n-tag--${type}-type`]: type,
+      'n-tag--closable': closable
+    }"
+  >
+    <slot />
+    <div
+      v-if="closable"
+      class="n-tag__close-mark"
+      @click="handleClick"
+    >
+      <icon type="md-close" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Icon from '../../Icon'
+
+export default {
+  name: 'NTag',
+  components: {
+    Icon
+  },
+  props: {
+    type: {
+      validator (type) {
+        return ['success', 'info', 'warning', 'error'].includes(type)
+      },
+      default: null
+    },
+    closable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    handleClick () {
+      this.$emit('close')
+    }
+  }
+}
+</script>

styles/Tag.scss

@@ -0,0 +1,43 @@
+@import './mixins/mixins.scss';
+@import './theme/default.scss';
+
+@include b(tag) {
+  position: relative;
+  line-height: 28px;
+  height: 28px;
+  font-size: 14px;
+  padding: 0 7px;
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 1px rgba(99,226,183,1);
+  color: rgba(99, 226, 183, 1);
+  box-sizing: border-box;
+  cursor: pointer;
+  &.n-tag--closable {
+    padding-right: 18px;
+    .n-tag__close-mark {
+      right: 3px;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 14px;
+      width: 14px;
+      line-height: 14px;
+      position: absolute;
+    }
+  }
+  &.n-tag--success-type {
+    box-shadow: inset 0 0 0 1px rgba(99, 226, 183, 1);
+    color:  rgba(99, 226, 183, 1);
+  }
+  &.n-tag--info-type {
+    box-shadow: inset 0 0 0 1px rgba(98, 187, 252, 1);
+    color: rgba(98, 187, 252, 1);
+  }
+  &.n-tag--warning-type {
+    box-shadow: inset 0 0 0 1px rgba(245, 166, 35, 1);
+    color: rgba(245, 166, 35, 1);
+  }
+  &.n-tag--error-type {
+    box-shadow: inset 0 0 0 1px rgba(255, 146, 164, 1);
+    color: rgba(255, 146, 164, 1)
+  }
+}