tag component

docs/examples-docs/tag.md

@@ -0,0 +1,28 @@
+## Tag 组件
+
+### 基础用法
+```html
+<z-tag>返现</z-tag>
+<z-tag :plain="true">返现</z-tag>
+```
+
+### 高级用法
+```html
+<z-tag type="danger">返现</z-tag>
+<z-tag type="success">返现</z-tag>
+<z-tag type="success" :plain="true">返现</z-tag>
+```
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| plain | 是否是空心tag | boolean  | false          | ''          |
+| mark | 是否是标记 | boolean  | false          | ''          |
+| type | tag类型 | string  | ''          | 'primary', 'success', 'danger' |
+
+### Slot
+
+| name       | 描述      |
+|-----------|-----------|
+| - | 自定义tag显示内容 |

docs/examples/tag.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="page-cell">
+    <h1 class="page-title">Tag</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <div>
+      <div class="tags-container">
+        <z-tag>返现</z-tag>
+        <z-tag :plain="true">返现</z-tag>
+      </div>
+      <div class="tags-container">
+        <z-tag type="danger">返现</z-tag>
+        <z-tag type="danger">四字标签</z-tag>
+        <z-tag type="danger">一</z-tag>
+      </div>
+      <div class="tags-container">
+        <z-tag type="danger">返现</z-tag>
+        <z-tag :plain="true" type="danger">返现</z-tag>
+      </div>
+      <div class="tags-container">
+        <z-tag type="primary">返现</z-tag>
+        <z-tag :plain="true" type="primary">返现</z-tag>
+      </div>
+      <div class="tags-container">
+        <z-tag type="success">返现</z-tag>
+        <z-tag :plain="true" type="success">返现</z-tag>
+      </div>
+      <div class="tags-container">
+        <z-tag type="danger" :mark="true">返现</z-tag>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {}
+};
+</script>
+
+<style>
+.page-sub-title {
+  padding: 25px 15px;
+}
+.tags-container {
+  padding: 5px 15px;
+
+  .z-tag + .z-tag {
+    margin-left: 10px;
+  }
+}
+</style>

docs/nav.config.json

@@ -34,6 +34,10 @@
               "path": "/steps",
               "title": "Steps"
             },
+            {
+              "path": "/tag",
+              "title": "Tag"
+            },
             {
               "path": "/badge",
               "title": "Badge"