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(
-
- {this.props.children}
-
+ let colorClass = this.props.prefixCls + '-' + this.props.color;
+
+ return
;
}
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;
+ }
+}