,
+ mountNode
+);
````
diff --git a/components/tag/demo/checkable.md b/components/tag/demo/checkable.md
new file mode 100644
index 0000000000..fd04012b3a
--- /dev/null
+++ b/components/tag/demo/checkable.md
@@ -0,0 +1,39 @@
+---
+order: 3
+title:
+ zh-CN: 可选择
+ en-US: Checkable
+---
+
+## zh-CN
+
+可通过 Tag.CheckableTag 实现类似 Checkbox 的效果，该组件为完全受控组件，不支持非受控用法。
+
+## en-US
+
+Tag.CheckableTag works like Checkbox, and it is an absolute controlled component and has no uncontrolled mode.
+
+````jsx
+import { Tag } from 'antd';
+const CheckableTag = Tag.CheckableTag;
+
+class UncontrolledCheckableTag extends React.Component {
+ state = { checked: false };
+ handleChange = (checked) => {
+ this.setState({ checked });
+ }
+
+ render() {
+ return ;
+ }
+}
+
+ReactDOM.render(
+
+ Unchecked
+ Checked
+ Uncontrolled
+
,
+ mountNode
+);
+````
diff --git a/components/tag/demo/colorful.md b/components/tag/demo/colorful.md
index 3453a7ab67..f9155eb1aa 100644
--- a/components/tag/demo/colorful.md
+++ b/components/tag/demo/colorful.md
@@ -1,20 +1,26 @@
---
-debug: true
-order: -1
-title: Colorful Tags for Debugging
+order: 1
+title:
+ zh-CN: 多彩标签
+ en-US: Colorful
---
-`Tag[color]` is deprecated, but we need this demo for debugging until next major version.
+## zh-CN
+
+基本标签可以通过 `color` 设置背景色，以提供视觉暗示区分不同目的的标签。
+
+## en-US
+
+We can set the background color of basic Tag by `color`, and it's helpful to tell different Tags.
````jsx
import { Tag } from 'antd';
ReactDOM.render(
- Blue
- Green
- Yellow
- Red
+ #f50
+ #87d068
+ #2db7f5
,
mountNode
);
diff --git a/components/tag/demo/control.md b/components/tag/demo/control.md
index 6eec297369..2bdd5497f7 100644
--- a/components/tag/demo/control.md
+++ b/components/tag/demo/control.md
@@ -1,47 +1,45 @@
---
-order: 1
-title:
+order: 2
+title:
zh-CN: 动态添加和删除
- en-US: Dynamically add and remove
+ en-US: Add & Remove Dynamically
---
## zh-CN
-用数组生成一组标签，可以动态添加和删除。
-
-使用 `afterClose` 删除时有动画效果。
+用数组生成一组标签，可以动态添加和删除，通过监听删除动画结束的事件 `afterClose` 实现。
## en-US
-Generating a set of tag by array, you can dynamically add and remove.
-
-Using 'afterClose' property, There are animated when a tag was removed.
+Generating a set of Tags by array, you can add and remove dynamically.
+It's based on `afterClose` event, which will be triggered while the close animation end.
````jsx
import { Tag, Button } from 'antd';
let index = 3;
-const App = React.createClass({
- getInitialState() {
- return {
- tags: [
- { key: 1, name: 'Unremovable' },
- { key: 2, name: 'Tag 2' },
- { key: 3, name: 'Tag 3' },
- ],
- };
- },
- handleClose(key) {
+class EditableTagGroup extends React.Component {
+ state = {
+ tags: [
+ { key: 1, name: 'Unremovable' },
+ { key: 2, name: 'Tag 2' },
+ { key: 3, name: 'Tag 3' },
+ ],
+ };
+
+ handleClose = (key) => {
const tags = [...this.state.tags].filter(tag => (tag.key !== key) && tag);
console.log(tags);
this.setState({ tags });
- },
- addTag() {
- const tags = [...this.state.tags];
+ }
+
+ addTag = () => {
index += 1;
- tags.push({ key: index, name: `New tag ${index}` });
+ const tags = [...this.state.tags, { key: index, name: `New tag ${index}` }];
+ console.log(tags);
this.setState({ tags });
- },
+ }
+
render() {
const { tags } = this.state;
return (
@@ -54,8 +52,8 @@ const App = React.createClass({
);
- },
-});
+ }
+}
-ReactDOM.render(, mountNode);
+ReactDOM.render(, mountNode);
````
diff --git a/components/tag/demo/hot-tags.md b/components/tag/demo/hot-tags.md
new file mode 100644
index 0000000000..1e1d26fb23
--- /dev/null
+++ b/components/tag/demo/hot-tags.md
@@ -0,0 +1,56 @@
+---
+order: 4
+title:
+ zh-CN: 热门标签
+ en-US: Hot Tags
+---
+
+## zh-CN
+
+选择你感兴趣的话题。
+
+## en-US
+
+Select your favourite topics.
+
+````jsx
+import { Tag } from 'antd';
+const CheckableTag = Tag.CheckableTag;
+
+const tagsFromServer = ['Movie', 'Books', 'Music'];
+
+class HotTags extends React.Component {
+ state = {
+ selectedTags: [],
+ };
+
+ handleChange(tag, checked) {
+ const { selectedTags } = this.state;
+ const nextSelectedTags = checked ?
+ [...selectedTags, tag] :
+ selectedTags.filter(t => t !== tag);
+ console.log('You are interested in: ', nextSelectedTags);
+ this.setState({ selectedTags: nextSelectedTags });
+ }
+
+ render() {
+ const { selectedTags } = this.state;
+ return (
+