From 2e0be628a75cf6ddf1be4bc6f4730d1148385779 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 28 Jul 2015 20:03:10 +0800
Subject: [PATCH] update tag style

---
 components/tag/demo/basic.md    | 10 +++--
 components/tag/demo/colorful.md | 19 +++++++++
 components/tag/index.jsx        | 10 ++---
 style/components/index.less     |  1 +
 style/components/tag.less       | 72 +++++++++++++++++++++++++++++++++
 5 files changed, 104 insertions(+), 8 deletions(-)
 create mode 100644 components/tag/demo/colorful.md
 create mode 100644 style/components/tag.less

diff --git a/components/tag/demo/basic.md b/components/tag/demo/basic.md
index aae6d97002..31c306355f 100644
--- a/components/tag/demo/basic.md
+++ b/components/tag/demo/basic.md
@@ -2,16 +2,20 @@
 
 - order: 0
 
-标签。
+简单的标签展示，添加 closable 表示可关闭。
 
 ---
 
 ````jsx
 var Tag = antd.Tag;
 
+function onClose() {
+  console.log(this.props.children);
+}
+
 React.render(<div>
-  <Tag>标签一</Tag>
-  <Tag closable>标签二</Tag>
+  <Tag href="http://www.baidu.com">标签一</Tag>
+  <Tag closable onClose={onClose}>标签二</Tag>
   <Tag>标签三</Tag>
 </div>, document.getElementById('components-tag-demo-basic'));
 ````
diff --git a/components/tag/demo/colorful.md b/components/tag/demo/colorful.md
new file mode 100644
index 0000000000..b387c25cb7
--- /dev/null
+++ b/components/tag/demo/colorful.md
@@ -0,0 +1,19 @@
+# 各种类型
+
+四种颜色的标签。
+
+- order: 1
+
+---
+
+````jsx
+var Tag = antd.Tag;
+
+React.render(<div>
+  <Tag closable color="blue">蓝色</Tag>
+  <Tag closable color="green">绿色</Tag>
+  <Tag closable color="yellow">黄色</Tag>
+  <Tag closable color="red">红色</Tag>
+</div>, document.getElementById('components-tag-demo-colorful'));
+````
+
diff --git a/components/tag/index.jsx b/components/tag/index.jsx
index e664f9fae8..80f04e9cee 100644
--- a/components/tag/index.jsx
+++ b/components/tag/index.jsx
@@ -9,12 +9,12 @@ class AntTag extends React.Component {
     this.props.onClose.call(this);
   }
   render() {
-    var close = this.props.closable ?
+    let close = this.props.closable ?
       <i className="anticon anticon-cross" onClick={this.destroy.bind(this)}></i> : '';
-    return <div className={this.props.prefixCls}>
-      <span className={this.props.prefixCls + '-text'}>
-        {this.props.children}
-      </span>
+    let colorClass = this.props.prefixCls + '-' + this.props.color;
+
+    return <div className={this.props.prefixCls + ' ' + colorClass}>
+      <a className={this.props.prefixCls + '-text'} {...this.props} />
       {close}
     </div>;
   }
diff --git a/style/components/index.less b/style/components/index.less
index 81ac64f5f4..995f7f9bc6 100644
--- a/style/components/index.less
+++ b/style/components/index.less
@@ -24,3 +24,4 @@
 @import "divider";
 @import "slider";
 @import "radio";
+@import "tag";
diff --git a/style/components/tag.less b/style/components/tag.less
new file mode 100644
index 0000000000..fad7eee02e
--- /dev/null
+++ b/style/components/tag.less
@@ -0,0 +1,72 @@
+@import "../mixins/index";
+@tagPrefixClass: ~"@{css-prefix}tag";
+
+.@{tagPrefixClass} {
+  display: inline-block;
+  line-height: 22px;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: 20px;
+  background: #f3f3f3;
+  font-size: @font-size-base;
+  margin-right: 4px;
+  margin-bottom: 8px;
+  transition: all 0.3s ease;
+  vertical-align: middle;
+  opacity: 0.85;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &,
+  a,
+  a:hover {
+    color: @text-color;
+  }
+
+  .anticon-cross {
+    .iconfont-size-under-12px(7px);
+    cursor: pointer;
+    font-weight: bold;
+    margin-left: 3px;
+    position: relative;
+    top: -1px;
+    color: #6666;
+    transition: all 0.3s ease;
+    opacity: 0.66;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  &-blue,
+  &-green,
+  &-yellow,
+  &-red {
+    &,
+    a,
+    a:hover,
+    .anticon-cross,
+    .anticon-cross:hover {
+      color: #fff;
+    }
+  }
+
+  &-blue {
+    background: @primary-color;
+  }
+
+  &-green {
+    background: @success-color;
+  }
+
+  &-yellow {
+    background: @warning-color;
+  }
+
+  &-red {
+    background: @error-color;
+  }
+}