add Tag UI

add Tag UI

local/main.js

@@ -55,6 +55,11 @@ router.map({
         component: function (resolve) {
             require(['./routers/notice.vue'], resolve);
         }
+    },
+    '/tag': {
+        component: function (resolve) {
+            require(['./routers/tag.vue'], resolve);
+        }
     }
 });
 

local/routers/tag.vue

@@ -0,0 +1,32 @@
+<template>
+    <Tag>标签一</Tag>
+    <Tag>标签二</Tag>
+    <Tag closable>标签三</Tag>
+    <Tag closable color="blue">标签一</Tag>
+    <Tag closable color="green">标签二</Tag>
+    <Tag closable color="red">标签三</Tag>
+    <Tag color="red">标签三</Tag>
+    <Tag closable color="yellow">标签四</Tag>
+</template>
+<script>
+    import { Tag } from 'iview';
+    export default {
+        components: {
+            Tag
+        },
+        props: {
+        
+        },
+        data () {
+            return {
+            
+            }
+        },
+        computed: {
+        
+        },
+        methods: {
+        
+        }
+    }
+</script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iview",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "title": "iView",
   "description": "A high quality  UI components Library with Vue.js",
   "homepage": "http://www.iviewui.com",

styles/animation/fade.less

@@ -27,4 +27,4 @@
     100% {
         opacity: 0;
     }
-}
+}

styles/components/index.less

@@ -12,4 +12,5 @@
 @import "radio";
 @import "checkbox";
 @import "switch";
-@import "input-number";
+@import "input-number";
+@import "tag";

styles/components/tag.less

@@ -0,0 +1,88 @@
+@tag-prefix-cls: ~"@{css-prefix}tag";
+@tag-close-prefix-cls: ivu-icon-ios-close-empty;
+
+.@{tag-prefix-cls} {
+    display: inline-block;
+    height: 22px;
+    line-height: 22px;
+    margin: 2px 4px 2px 0;
+    padding: 0 8px;
+    border-radius: @btn-border-radius-small;
+    border: 1px solid @border-color-split;
+    background: @background-color-base;
+    font-size: @tag-font-size;
+    vertical-align: middle;
+    opacity: 1;
+    overflow: hidden;
+    cursor: pointer;
+    //.transition(all @transition-time @ease-in-out);
+
+    &:hover {
+        opacity: 0.85;
+    }
+
+    &,
+    a,
+    a:hover {
+        color: @text-color;
+    }
+
+    &-text {
+        a:first-child:last-child {
+            display: inline-block;
+            margin: 0 -8px;
+            padding: 0 8px;
+        }
+    }
+
+    .@{tag-close-prefix-cls} {
+        .iconfont-size-under-12px(20px);
+        cursor: pointer;
+        margin-left: 3px;
+        color: #666;
+        opacity: 0.66;
+        position: relative;
+        top: 1px;
+        //.transition(all @transition-time @ease-in-out);
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    &-blue,
+    &-green,
+    &-yellow,
+    &-red {
+        border: 0;
+        &,
+        a,
+        a:hover,
+        .@{tag-close-prefix-cls},
+        .@{tag-close-prefix-cls}:hover {
+            color: #fff;
+        }
+    }
+
+    &-blue {
+        background: @link-color;
+    }
+
+    &-green {
+        background: @success-color;
+    }
+
+    &-yellow {
+        background: @warning-color;
+    }
+
+    &-red {
+        background: @error-color;
+    }
+
+    &-close {
+        width: 0 !important;
+        padding: 0;
+        margin: 0;
+    }
+}

styles/themes/default/custom.less

@@ -95,6 +95,9 @@
 @input-focus-border-color    : @primary-color;
 @input-disabled-bg           : #f3f3f3;
 
+// Tag
+@tag-font-size          : 12px;
+
 // Z-index
 @zindex-affix           : 10;
 @zindex-back-top        : 10;