version to 1.2.1

fix: hide mirror
2026-02-18 07:12:28 +08:00 · 2016-05-27 18:04:57 +08:00 · 2016-05-27 18:04:27 +08:00
323 changed files with 5148 additions and 6558 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -28,6 +28,7 @@ const eslintrc = {
    'arrow-body-style': 0,
    'react/sort-comp': 0,
    'react/prop-types': 0,
+    'react/jsx-closing-bracket-location': 0,
    'react/jsx-first-prop-new-line': 0,
    'import/no-unresolved': 0,
    'no-param-reassign': 0,
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,27 +1,53 @@
-<!-- Issue Template For Chinese Users -->
+If you want to ask a question, please read [some tips](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md#do-your-homework-before-asking-a-question) first :-)

-<!-- 请按照下列格式报告问题，务必提供复现步骤，否则恕难解决，感谢您的支持。-->
+If you are going to report a bug, please answer the following questions, thank you!

-### 本地环境
+## What you did

-<!-- 务必提供 -->
+(e.g. I ate a hamburger)
+
+## What you would like to happen
+
+(e.g. I should be full)
+
+## What actually happened
+
+(e.g. But I am still hungry now T_T)
+
+## Online demo
+
+(e.g. http://codepen.io/anon/pen/wGOWGW?editors=001)
+
+## Environment Information
+
+- The version of antd(e.g. 0.12.0):
+- Your operating system and it's version(e.g. OSX 10.11.0):
+- Your browser and it's version(e.g. Chrome 48.0.0.0(64-bit)):
+
+---
+
+提问之前，建议先阅读[这份提示](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md#do-your-homework-before-asking-a-question)。:-)
+
+如果是报告 bug，请按照下列格式编辑问题，务必提供复现步骤，否则恕难解决，非常感谢！
+
+## 你做了什么？
+
+（例如，我吃了一个汉堡）
+
+## 你期待的结果是：
+
+（例如，我应该饱了）
+
+## 实际上的结果和抱怨：
+
+（例如，我还是饿的，肯定是哪里出问题了）
+
+## 可重现的在线演示
+
+(e.g. http://codepen.io/anon/pen/wGOWGW?editors=001)
+
+## 本地环境信息

 - antd 版本:
 - 操作系统及其版本：
 - 浏览器及其版本:
-
-### 你做了什么？
-
-<!-- 引入 antd 了 Button -->
-
-### 你期待的结果是：
-
-<!-- 像官网一样正常显示 -->
-
-## 实际上的结果：
-
-<!-- 缺少样式 -->
-
-### 可重现的在线演示
-
-<!-- 请修改并 Fork http://codepen.io/anon/pen/wGOWGW?editors=001 -->
--- a/.gitignore
+++ b/.gitignore
@@ -23,7 +23,6 @@ nohup.out
 _site
 _data
 dist
-/lib
+lib
 elasticsearch-*
 config/base.yaml
-typings
--- a/404.html
+++ b/404.html
@@ -0,0 +1,9 @@
+<script>
+  var prefix = /^\/components/.test(location.pathname) ? location.pathname.replace(/^\//, '').split('/').join('-') : '';
+  var scrollToString = location.hash ? '?scrollTo=' + prefix + location.hash : '';
+  if (location.pathname === '/changelog') {
+    location.href = '/#/docs/react/changelog' + scrollToString;
+  } else {
+    location.href = '/#' + location.pathname.replace(/\/$/, '') + scrollToString;
+  }
+</script>
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,129 +8,6 @@ timeline: true
 你也可以查看 GitHub 上的 [发布日志](https://github.com/ant-design/ant-design/releases)。

 ---
-
-## 1.6.3
-
-`2016-07-04`
-
- 修复 Transfer 的一个 unmount 的错误。[#2206](https://github.com/ant-design/ant-design/pull/2206)
-
-## 1.6.2
-
-`2016-06-27`
-
- 修复 Table、Transfer 的样式错位问题。
- 修复 DatePicker 的一个样式问题。[#2182](https://github.com/ant-design/ant-design/issues/2182)
- 优化 Menu 的 hover 样式响应性能。
-
-## 1.6.1
-
-`2016-06-24`
-
- 回滚一个未完成的 DatePicker 时间选项改造效果。
-
-## 1.6.0
-
-`2016-06-24`
-
- 新增置顶组件 [BackTop](/components/back-top)。
- 全新的 [Spin](/components/spin) 样式。
- 给 `Modal.xxx` 系列方法添加了 `{ destory }` 的访问值，方便事后销毁。[#2110](https://github.com/ant-design/ant-design/issues/2110)
- Table 的 `rowKey` 属性支持直接使用字符串。[#2058](https://github.com/ant-design/ant-design/issues/2058)
- Table 增加 `column.filterDropdown` 属性用于自定义渲染筛选菜单的浮层。[#1736](https://github.com/ant-design/ant-design/issues/1736)
- 修复 Tooltip、Popover、Popconfirm 设置 `onVisibleChange` 后失效的问题。[#2134](https://github.com/ant-design/ant-design/issues/2134)
- 修复在 IE8 下 Checkbox 的勾样式变形的问题。[#2148](https://github.com/ant-design/ant-design/issues/2148)
- 优化 Checkbox、Radio 失效状态的文字颜色。[#2114](https://github.com/ant-design/ant-design/issues/2114)
- 优化 Checkbox、Radio 的默认边距过于拥挤的问题。[#2137](https://github.com/ant-design/ant-design/issues/2137)
- 优化 Pagination 在暗色背景下的样式。[#2126](https://github.com/ant-design/ant-design/issues/2126)
- 修复 Table 固定列时内容无法换行和高度对齐的问题，同时修复了一个 Chrome 下的表格内容错位问题。[#2130](https://github.com/ant-design/ant-design/issues/2130)
- 修复一个 Table 的 `rowSelection` 设为 null 时可能导致报错的问题。[#2127](https://github.com/ant-design/ant-design/issues/2127)
- 修复在 IE8 下点击 Table 选择框报错的问题。[#2154](https://github.com/ant-design/ant-design/issues/2154)
- 小幅优化了 Transfer 的渲染性能。[#2112](https://github.com/ant-design/ant-design/issues/2112)
- 将 DatePicker 的清除按钮从面板上移到外部输入框，解决用户容易误解为关闭的问题。[#1708](https://github.com/ant-design/ant-design/issues/1708)
- Upload 的 `onPreview` 现在没有 `file.url` 时也能生效。[#2163](https://github.com/ant-design/ant-design/issues/2163)
-
-## 1.5.1
-
-`2016-06-21`
-
- 修复一个 TypeScript 定义文件的语法错误。
- 修复 Table 固定表头高度和滚动条样式问题。
-
-## 1.5.0
-
-`2016-06-17`
-
- 升级 `rc-form` 到 0.17，支持 `getFieldProps('xx.yy')` 的写法，并支持单多选控件进行关联。[#](https://github.com/react-component/form/pull/21)
- Input 的 `addonBefore` 和 `addonAfter` 支持内嵌选择框。[#1927](https://github.com/ant-design/ant-design/issues/1927)
- 优化了两个 DatePicker 组成的时间范围选择演示的体验。
- 优化一个多个对话框的遮罩层高度的问题。[#2009](https://github.com/ant-design/ant-design/issues/2009)
- 优化 Table 的 `getCheckboxProps` 的调用次数。[#2086](https://github.com/ant-design/ant-design/issues/2086)
- 修复 Table 固定列时，表头无法左右滚动的问题。[#2068](https://github.com/ant-design/ant-design/issues/2068)
- 修复小型表格固定表头的样式。[#2023](https://github.com/ant-design/ant-design/issues/2023)
- 修复 Tabs 的 `tabPosition` 为左右时样式错位的问题。[#2046](https://github.com/ant-design/ant-design/issues/2046)
- 修复 RangePicker 的日期范围背景丢失的问题。
- 修复 Switch 失效状态下文字颜色太浅的问题。[#2051](https://github.com/ant-design/ant-design/issues/2051)
- 修复一个 Select 的 `disabled` 选项依然可以被移除的问题。[#2034](https://github.com/ant-design/ant-design/issues/2034)
- 修复官方站点在 IE 下的报错问题。
-
-## 1.4.1
-
-`2016-06-12`
-
- 修复一个展开 Tabs 会导致表格宽度溢出的问题。[#2013](https://github.com/ant-design/ant-design/issues/2013)
- 修复一个某些情况下表格布局被破坏的问题。
-
-## 1.4.0
-
-`2016-06-12`
-
-此版本之后你可能会遇到 [#2030](https://github.com/ant-design/ant-design/issues/2030)，请使用 `react@15+` 或 `npm@3+`。
-
- `Input[type="textarea"]` 支持自动调整高度。 [#](http://ant.design/components/input#components-input-demo-autosize-textarea)
- `Breadcrumb`
-  - `nameRender` 新增 `route` 和 `params` 参数。 [#1999](https://github.com/ant-design/ant-design/issues/1999)
-  - `linkRender` 新增 `paths` 参数。
- 再次修复 `Table` 组件 `rowSelection.onChange` 与 `onRowClick` 冲突问题。 [#1470](https://github.com/ant-design/ant-design/issues/1470)
- 修复 `Form.Item` 中 `Input` 高度抖动问题。 [#1955](https://github.com/ant-design/ant-design/issues/1955)
- 修复高级搜索的 `ant-advanced-search-form` 样式丢失的问题。
-
-## 1.3.2
-
-`2016-06-06`
-
- 修复全局模式下引用 antd，IE8 环境报错的问题。 [#1970](https://github.com/ant-design/ant-design/issues/1970)
-
-## 1.3.1
-
-`2016-06-06`
-
- 修复 `Message` `Notification` 找不到的问题。 [#1968](https://github.com/ant-design/ant-design/issues/1968)
-
-## 1.3.0
-
-`2016-06-02`
-
- Transfer 组件增加 `rowKey` 属性，可自定义数据源主键。 [#1900](https://github.com/ant-design/ant-design/issues/1900)
- Tag 组件 `default` 类型的样式增加边框，防止淹没在背景中。 [#1910](https://github.com/ant-design/ant-design/issues/1910)
- Table
-  - 修复筛选为单选时仍旧展示多选框的问题。 [#1880](https://github.com/ant-design/ant-design/issues/1880)
-  - 修复 fixed left 的固定列会覆盖 rowSelection 的 Checkbox 的问题。 [#1829](https://github.com/ant-design/ant-design/issues/1829)
-  - 升级 rc-table 依赖
-    - 修复了 fixed 列中数据重复展示以及一些错位问题。 [#1898](https://github.com/ant-design/ant-design/issues/1898)
-    - `dataIndex` 支持内嵌属性的写法。 [react-component/table#46](https://github.com/react-component/table/issues/46)
- 修复了 v1.2.0 新增加的组件属性的 TypeScript 定义。 [#1933](https://github.com/ant-design/ant-design/issues/1933)
- Form 修复 label中冒号的国际化问题，采用样式实现冒号，不再需要手动输入冒号。 [#1877](https://github.com/ant-design/ant-design/issues/1877)
- 修复 DatePicker 组件点击『此刻』失效的问题，并进行了一些代码优化。 [#1902](https://github.com/ant-design/ant-design/issues/1902)
- 升级 rc-upload 依赖，修复了 IE10 中第二次上传同一文件不触发 `onChange` 的问题。 [058af3c](https://github.com/ant-design/ant-design/commit/b15a4e3165be5e4db995d3fe75d4d557c7f21c61)
- 文档使用 [bisheng](https://github.com/benjycui/bisheng) 重构。
-
-## 1.2.1
-
-`2016-05-27`
-
- 修复一个 Select 组件的文字重复问题。
-
 ## 1.2.0

 `2016-05-26`
@@ -143,7 +20,6 @@ timeline: true
  - 修复了 Table 组件的分页相关的一系列问题 [#1669](https://github.com/ant-design/ant-design/issues/1669) [#1842](https://github.com/ant-design/ant-design/issues/1842)
  - 修复了当有列固定在左边时，选择框不显示的问题 [#1829](https://github.com/ant-design/ant-design/issues/1829)
 - 修复了当 Checkbox 的 label 为数字 0 时， label 不显示的问题 [#1811](https://github.com/ant-design/ant-design/issues/1811)
- 修复 Select combobox 模式下无法重置 `optionLabelProp` 的问题。[#1773](https://github.com/ant-design/ant-design/issues/1773)
 - 修复了 Tag 组件为 closeable 时，内部链接无法点击的问题 [#1862](https://github.com/ant-design/ant-design/issues/1862)
 - Tab 组件新增 `hideAdd` 属性，用于关闭右边的添加按钮 [#1750](https://github.com/ant-design/ant-design/issues/1750)
 - 修复了一个在某些情况下找不到 `normalize.css/normalize.css` 文件的问题。[ant-design/antd-init#52](https://github.com/ant-design/antd-init/issues/52)
@@ -207,7 +83,7 @@ timeline: true

 此版本有部分不兼容的改动，升级时确保修改相应的使用代码。

- 推荐使用样式按需加载。如果依然需要整体载入样式，**样式入口文件已变为** `antd/dist/antd.css` 和 `antd/dist/antd.less`。如果你在项目中覆盖了 less 变量，less 文件的引用方式也有 [相应变更](https://github.com/ant-design/ant-design/issues/1558#issuecomment-218120000)。
+- 推荐使用样式按需加载, 如果需要整体载入样式, **样式入口文件变为** `antd/dist/antd.css` 和 `antd/dist/antd.less`。如果你在项目中覆盖了 less 变量，less 文件的引用方式也有 [相应变更](https://github.com/ant-design/ant-design/issues/1558#issuecomment-218120000)。

   ```diff
   - import 'antd/lib/index.css';  // import 'antd/style/index.less';
@@ -232,6 +108,7 @@ timeline: true
 - Progress.Circle 使用方式改为 `<Progress type="circle" />`。
 - Spin 的 `spining` 属性更正为 `spinning`。
 - Alert 的 type `warn` 重命名为 `warning`。[#1225](https://github.com/ant-design/ant-design/issues/1225)
+- `notification.warn`、`message.warn` 修改为 `notification.warning` 和 `message.warning`。[#1225](https://github.com/ant-design/ant-design/issues/1225)
 - Tree 的 `onExpand` 参数从 `function(node, expanded, expandedKeys)` 调整为 `function(expandedKeys, {expanded, node})`。

 ### Bug 修复
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -61,8 +61,7 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 - [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
 - [组件设计原则](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
 - [网站和组件开发说明](https://github.com/ant-design/ant-design/wiki/%E7%BD%91%E7%AB%99%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E)
- [版本发布手册](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
-
+- [版本发布手册](https://github.com/ant-design/ant-design/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)

 ## 如何贡献

--- a/README.md
+++ b/README.md
@@ -8,14 +8,10 @@

 An enterprise-class UI design language and React-based implementation.

-## :loudspeaker: Document Translation Recruitment
-
-We are now working on translate components document to English, and we need some translator and reviewer. https://github.com/ant-design/ant-design/issues/1471
-
 ## Features

- An enterprise-class design language and high quality UI.
- Graceful UI components out of the box, base on [React Component](http://react-component.github.io/badgeboard/).
+- An enterprise-class design language and high quality UI style.
+- Rich library of UI components base on [React Component](http://react-component.github.io/badgeboard/).
 - A npm + webpack + babel + dora [workflow](http://ant-tool.github.io/index.html).

 ## Install
@@ -54,9 +50,9 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'

   ```jsx
   // import js and css modularly, parsed by babel-plugin-antd
-   import { DatePicker } from 'antd';
+   import { DatePicker } from 'antd'; 
   ```
-
+  
 - Manually import

   ```jsx
@@ -72,15 +68,9 @@ Normal browsers and Internet Explorer 8+.

 ## TypeScript

-tsconfig.json
-
-```
-{
-  "compilerOptions": {
-    "moduleResolution": "node",
-    "jsx": "preserve"
-  }
-}
+```js
+///<reference path='./node_modules/antd/type-definitions/antd.d.ts'/>
+...
 ```

 ## Links
@@ -94,9 +84,9 @@ tsconfig.json
 - [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
 - [React component design guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
 - [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
+- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
 - [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
- [CodePen boilerplate](http://codepen.io/anon/pen/wGOWGW?editors=001) for bug reports
+

 ## Contributing

--- a/components/affix/index.jsx
+++ b/components/affix/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import addEventListener from 'rc-util/lib/Dom/addEventListener';
+import { Dom } from 'rc-util';
 import classNames from 'classnames';
 import warning from 'warning';

@@ -105,8 +105,8 @@ export default class Affix extends React.Component {

  componentDidMount() {
    warning(!('offset' in this.props), '`offset` prop of Affix is deprecated, use `offsetTop` instead.');
-    this.scrollEvent = addEventListener(window, 'scroll', this.handleScroll);
-    this.resizeEvent = addEventListener(window, 'resize', this.handleScroll);
+    this.scrollEvent = Dom.addEventListener(window, 'scroll', this.handleScroll);
+    this.resizeEvent = Dom.addEventListener(window, 'resize', this.handleScroll);
  }

  componentWillUnmount() {
--- a/components/alert/demo/closable.md
+++ b/components/alert/demo/closable.md
@@ -16,13 +16,11 @@ ReactDOM.render(<div>
  <Alert message="警告提示的文案"
    type="warning"
    closable
-    onClose={onClose}
-  />
+    onClose={onClose} />
  <Alert message="错误提示的文案"
    description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
    type="error"
    closable
-    onClose={onClose}
-  />
+    onClose={onClose} />
 </div>, mountNode);
 ````
--- a/components/alert/demo/description.md
+++ b/components/alert/demo/description.md
@@ -11,21 +11,17 @@ import { Alert } from 'antd';
 ReactDOM.render(<div>
  <Alert message="成功提示的文案"
    description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
-    type="success"
-  />
+    type="success" />
  <Alert message="消息提示的文案"
    description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
-    type="info"
-  />
+    type="info" />
  <Alert
    message="警告提示的文案"
    description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
-    type="warning"
-  />
+    type="warning" />
  <Alert
    message="错误提示的文案"
    description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
-    type="error"
-  />
+    type="error" />
 </div>, mountNode);
 ````
--- a/components/alert/demo/icon.md
+++ b/components/alert/demo/icon.md
@@ -16,24 +16,20 @@ ReactDOM.render(<div>
  <Alert message="成功提示的文案"
    description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
    type="success"
-    showIcon
-  />
+    showIcon />
  <Alert message="消息提示的文案"
    description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
    type="info"
-    showIcon
-  />
+    showIcon />
  <Alert
    message="警告提示的文案"
    description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
    type="warning"
-    showIcon
-  />
+    showIcon />
  <Alert
    message="错误提示的文案"
    description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
    type="error"
-    showIcon
-  />
+    showIcon />
 </div>, mountNode);
 ````
--- a/components/alert/index.jsx
+++ b/components/alert/index.jsx
@@ -29,7 +29,7 @@ export default class Alert extends React.Component {
    this.setState({
      closing: false,
    });
-    this.props.onClose(e);
+    this.props.onClose.call(this, e);
  }
  animationEnd = () => {
    this.setState({
@@ -81,9 +81,8 @@ export default class Alert extends React.Component {
    return this.state.closed ? null : (
      <Animate component=""
        showProp="data-show"
-        transitionName={`${prefixCls}-slide-up`}
-        onEnd={this.animationEnd}
-      >
+        transitionName="slide-up"
+        onEnd={this.animationEnd}>
        <div data-show={this.state.closing} className={alertCls}>
          {showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null}
          <span className={`${prefixCls}-message`}>{message}</span>
--- a/components/alert/index.md
+++ b/components/alert/index.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 chinese: 警告提示
-type: Views
+type: Presentation
 english: Alert
 ---

--- a/components/alert/style/index.less
+++ b/components/alert/style/index.less
@@ -121,43 +121,14 @@
    display: block;
  }

-  &&-close {
-    height: 0 !important;
+  &-close {
+    height: 0;
+    opacity: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
-    transition: all .3s @ease-in-out-circ;
+    transition: all .3s @ease-in-out;
    transform-origin: 50% 0;
-  }
-
-  &-slide-up-leave {
-    animation: antAlertSlideUpOut .3s @ease-in-out-circ;
-    animation-fill-mode: both;
-  }
-}
-
-@keyframes antAlertSlideUpIn {
-  0% {
-    opacity: 0;
-    transform-origin: 0% 0%;
-    transform: scaleY(0);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 0% 0%;
-    transform: scaleY(1);
-  }
-}
-
-@keyframes antAlertSlideUpOut {
-  0% {
-    opacity: 1;
-    transform-origin: 0% 0%;
-    transform: scaleY(1);
-  }
-  100% {
-    opacity: 0;
-    transform-origin: 0% 0%;
-    transform: scaleY(0);
+    animation-timing-function: @ease-in-out !important;
  }
 }
--- a/components/back-top/demo/basic.md
+++ b/components/back-top/demo/basic.md
@@ -1,17 +0,0 @@
---
-order: 0
-title: 基本
---
-
-最简单的用法。
-
-````jsx
-import { BackTop } from 'antd';
-
-ReactDOM.render(
-  <div>
-    <BackTop />
-    向下滚动后，见右下角灰色按钮
-  </div>
-, mountNode);
-````
--- a/components/back-top/demo/custom.md
+++ b/components/back-top/demo/custom.md
@@ -1,30 +0,0 @@
---
-order: 1
-title: 自定义样式
---
-
-可以自定义置顶按钮的样式，限制宽高：`40px * 40px`。
-
-````jsx
-import { BackTop } from 'antd';
-
-const style = {
-  height: 40,
-  width: 40,
-  lineHeight: '40px',
-  borderRadius: 4,
-  backgroundColor: '#57c5f7',
-  color: '#fff',
-  textAlign: 'center',
-  fontSize: 20,
-};
-
-ReactDOM.render(
-  <div>
-    <BackTop style={{ bottom: 100 }}>
-      <div style={style}>UP</div>
-    </BackTop>
-    向下滚动后，见右下角蓝色按钮
-  </div>
-, mountNode);
-````
--- a/components/back-top/index.jsx
+++ b/components/back-top/index.jsx
@@ -1,109 +0,0 @@
-import React from 'react';
-import Animate from 'rc-animate';
-import Icon from '../icon';
-import addEventListener from 'rc-util/lib/Dom/addEventListener';
-import classNames from 'classnames';
-
-function getScroll(w, top) {
-  let ret = w[`page${top ? 'Y' : 'X'}Offset`];
-  const method = `scroll${top ? 'Top' : 'Left'}`;
-  if (typeof ret !== 'number') {
-    const d = w.document;
-    // ie6,7,8 standard mode
-    ret = d.documentElement[method];
-    if (typeof ret !== 'number') {
-      // quirks mode
-      ret = d.body[method];
-    }
-  }
-  return ret;
-}
-
-export default class BackTop extends React.Component {
-
-  static propTypes = {
-    visibilityHeight: React.PropTypes.number,
-  }
-
-  static defaultProps = {
-    onClick() {},
-    visibilityHeight: 400,
-    prefixCls: 'ant-back-top',
-  }
-
-  constructor(props) {
-    super(props);
-    const scrollTop = getScroll(window, true);
-    this.state = {
-      visible: scrollTop > this.props.visibilityHeight,
-    };
-  }
-
-  scrollToTop = (e) => {
-    if (e) e.preventDefault();
-    this.setScrollTop(0);
-    this.props.onClick(e);
-  }
-
-  setScrollTop(value) {
-    document.body.scrollTop = value;
-    document.documentElement.scrollTop = value;
-  }
-
-  handleScroll = () => {
-    const scrollTop = getScroll(window, true);
-    this.setState({
-      visible: scrollTop > this.props.visibilityHeight,
-    });
-  }
-
-  animationEnd = () => {
-    const scrollTop = getScroll(window, true);
-    this.setState({
-      visible: scrollTop > this.props.visibilityHeight,
-    });
-  }
-
-  componentDidMount() {
-    this.scrollEvent = addEventListener(window, 'scroll', this.handleScroll);
-  }
-
-  componentWillUnmount() {
-    if (this.scrollEvent) {
-      this.scrollEvent.remove();
-    }
-  }
-
-  render() {
-    const { prefixCls, className, children, ...restProps } = this.props;
-    const classString = classNames({
-      [prefixCls]: true,
-      [className]: !!className,
-    });
-
-    const defaultElement = (
-      <div className={`${prefixCls}-content`}>
-        <Icon className={`${prefixCls}-icon`} type="to-top" />
-      </div>
-    );
-
-    const style = {
-      display: this.state.visible ? 'block' : 'none',
-    };
-
-    return (
-      <Animate
-        showProp="data-show"
-        transitionName="fade"
-        onEnd={this.animationEnd}
-        transitionAppear
-      >
-        <div data-show={this.state.visible} style={style}>
-          <div {...restProps} className={classString} onClick={this.scrollToTop}>
-            {children || defaultElement}
-          </div>
-        </div>
-      </Animate>
-    );
-  }
-}
--- a/components/back-top/index.md
+++ b/components/back-top/index.md
@@ -1,23 +0,0 @@
---
-category: Components
-chinese: 置顶
-type: Other
-english: BackTop
---
-
-使用置顶组件可以方便地回到页面顶部。
-
-## 何时使用
-
- 当页面内容区域比较长时；
- 当用户需要频繁返回顶部查看相关内容时。
-
-## API
-
-> 有默认样式，距离底部 `50px`，可覆盖。
-> 自定义样式宽高不大于 40px * 40px。
-
-| 参数        | 说明           | 类型               | 默认值       |
-|-------------|----------------|--------------------|--------------|
-| visibilityHeight    | 滚动高度达到此参数值才出现 `BackTop`   | Number | 400        |
-| onClick | 点击按钮的回调函数   | Function | -        |
--- a/components/back-top/style/index.js
+++ b/components/back-top/style/index.js
@@ -1,2 +0,0 @@
-import '../../style/index.less';
-import './index.less';
--- a/components/back-top/style/index.less
+++ b/components/back-top/style/index.less
@@ -1,33 +0,0 @@
-@import "../../style/themes/default";
-
-@backtop-prefix-cls: ant-back-top;
-
-.@{backtop-prefix-cls} {
-  z-index: @zindex-back-top;
-  position: fixed;
-  right: 100px;
-  bottom: 50px;
-  height: 40px;
-  width: 40px;
-  cursor: pointer;
-
-  &-content {
-    height: 40px;
-    width: 40px;
-    border-radius: 20px;
-    background-color: rgba(64, 64, 64, 0.4);
-    color: #fff;
-    text-align: center;
-    transition: all .3s @ease-in-out;
-
-    &:hover {
-      background-color: rgba(64, 64, 64, 0.6);
-      transition: all .3s @ease-in-out;
-    }
-  }
-
-  &-icon {
-    font-size: 20px;
-    margin-top: 10px;
-  }
-}
--- a/components/badge/ScrollNumber.jsx
+++ b/components/badge/ScrollNumber.jsx
@@ -1,6 +1,6 @@
 import React, { createElement } from 'react';
 import { findDOMNode } from 'react-dom';
-import isCssAnimationSupported from '../_util/isCssAnimationSupported';
+import isCssAnimationSupported from '../util/isCssAnimationSupported';

 function getNumberArray(num) {
  return num ?
@@ -104,8 +104,8 @@ export default class ScrollNumber extends React.Component {
      className: `${this.props.prefixCls}-only`,
      style: {
        transition: removeTransition && 'none',
-        WebkitTransform: `translateY(${-position * height}px)`,
-        transform: `translateY(${-position * height}px)`,
+        WebkitTransform: `translate3d(0, ${-position * height}px, 0)`,
+        transform: `translate3d(0, ${-position * height}px, 0)`,
        height,
      },
      key: i,
--- a/components/badge/index.jsx
+++ b/components/badge/index.jsx
@@ -46,13 +46,11 @@ export default class Badge extends React.Component {
        <Animate component=""
          showProp="data-show"
          transitionName={`${prefixCls}-zoom`}
-          transitionAppear
-        >
+          transitionAppear>
          {
            hidden ? null :
              <ScrollNumber data-show={!hidden} className={scrollNumberCls}
-                count={count} style={style}
-              />
+                count={count} style={style} />
          }
        </Animate>
      </span>
--- a/components/badge/index.md
+++ b/components/badge/index.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 chinese: 徽标数
-type: Views
+type: Presentation
 english: Badge
 ---

--- a/components/breadcrumb/Breadcrumb.jsx
+++ b/components/breadcrumb/Breadcrumb.jsx
@@ -1,24 +1,12 @@
 import React, { cloneElement } from 'react';
 import BreadcrumbItem from './BreadcrumbItem';

-const defaultNameRender = (breadcrumbName, route, params) => {
-  if (!breadcrumbName) {
-    return null;
-  }
-  const paramsKeys = Object.keys(params).join('|');
-  const name = breadcrumbName.replace(
-    new RegExp(`:(${paramsKeys})`, 'g'),
-    (replacement, key) => params[key] || replacement
-  );
-  return <span>{name}</span>;
-};
-
 export default class Breadcrumb extends React.Component {
  static defaultProps = {
    prefixCls: 'ant-breadcrumb',
    separator: '/',
    linkRender: (href, name) => <a href={`#${href}`}>{name}</a>,
-    nameRender: defaultNameRender,
+    nameRender: (name) => <span>{name}</span>,
  }

  static propTypes = {
@@ -38,7 +26,6 @@ export default class Breadcrumb extends React.Component {
    const { separator, prefixCls, routes, params, children, linkRender, nameRender } = this.props;
    if (routes && routes.length > 0) {
      const paths = [];
-      const lastPath = routes.length - 1;
      crumbs = routes.map((route, i) => {
        route.path = route.path || '';
        let path = route.path.replace(/^\//, '');
@@ -48,12 +35,21 @@ export default class Breadcrumb extends React.Component {
        if (path) {
          paths.push(path);
        }
-        const name = nameRender(route.breadcrumbName, route, params);
-        if (name) {
-          const link = (i === lastPath) ? name : linkRender(`/${paths.join('/')}`, name, paths);
-          return <BreadcrumbItem separator={separator} key={route.breadcrumbName || i}>{link}</BreadcrumbItem>;
+
+        if (!route.breadcrumbName) {
+          return null;
        }
-        return null;
+        const name = route.breadcrumbName.replace(/:(.*)/g, (replacement, key) => {
+          return params[key] || replacement;
+        });
+
+        let link;
+        if (i === routes.length - 1) {
+          link = nameRender(name);
+        } else {
+          link = linkRender(`/${paths.join('/')}`, name);
+        }
+        return <BreadcrumbItem separator={separator} key={name}>{link}</BreadcrumbItem>;
      });
    } else {
      crumbs = React.Children.map(children, (element, index) => {
--- a/components/breadcrumb/demo/basic.md
+++ b/components/breadcrumb/demo/basic.md
@@ -1,27 +1,19 @@
 ---
 order: 0
-title:   
-  zh-CN: 基本
-  en-US: Basic Usage
+title: 基本
 ---

-## zh-CN
-
 最简单的用法。

-## en-US
-
-The simplest use
-
 ````jsx
 import { Breadcrumb } from 'antd';

 ReactDOM.render(
  <Breadcrumb>
-    <Breadcrumb.Item>Home</Breadcrumb.Item>
-    <Breadcrumb.Item><a href="">Application Center</a></Breadcrumb.Item>
-    <Breadcrumb.Item><a href="">Application List</a></Breadcrumb.Item>
-    <Breadcrumb.Item>An Application</Breadcrumb.Item>
+    <Breadcrumb.Item>首页</Breadcrumb.Item>
+    <Breadcrumb.Item><a href="">应用中心</a></Breadcrumb.Item>
+    <Breadcrumb.Item><a href="">应用列表</a></Breadcrumb.Item>
+    <Breadcrumb.Item>某应用</Breadcrumb.Item>
  </Breadcrumb>
 , mountNode);
 ````
--- a/components/breadcrumb/demo/router.md
+++ b/components/breadcrumb/demo/router.md
@@ -1,61 +1,56 @@
 ---
 order: 2
 iframe: true
-title: 
-  zh-CN: 路由
-  en-US: React Router Integration
+title: 路由
 ---

-## zh-CN
-
 和 `react-router@2.x` 进行结合使用。

-## en-US
-
-Used together with `react-router@2.x`.
-
 ````jsx
-import { Router, Route, Link, hashHistory } from 'react-router';
+const ReactRouter = require('react-router');
+let { Router, Route, Link, hashHistory } = ReactRouter;
 import { Breadcrumb } from 'antd';

-const Apps = () => (
-  <ul className="app-list">
-    <li>
-      <Link to="/apps/1">Application1</Link>：<Link to="/apps/1/detail">Detail</Link>
-    </li>
-    <li>
-      <Link to="/apps/2">Application2</Link>：<Link to="/apps/2/detail">Detail</Link>
-    </li>
-  </ul>
-);
+function Apps() {
+  return (
+    <ul className="app-list">
+      <li>
+        <Link to="/apps/1">应用1</Link>：<Link to="/apps/1/detail">详情</Link>
+      </li>
+      <li>
+        <Link to="/apps/2">应用2</Link>：<Link to="/apps/2/detail">详情</Link>
+      </li>
+    </ul>
+  );
+}

-const Home = (props) => (
-  <div>
-    <div className="demo-nav">
-      <Link to="/">Home</Link>
-      <Link to="/apps">Application List</Link>
-    </div>
-    {props.children || 'Home'}
-    <div
-      style={{
+function Home(props) {
+  return (
+    <div>
+      <div className="demo-nav">
+        <Link to="/">首页</Link>
+        <Link to="/apps">应用列表</Link>
+      </div>
+      {props.children || 'Home'}
+      <div style={{
        marginBottom: 15,
        marginTop: 15,
        paddingBottom: 15,
        borderBottom: '1px dashed #ccc',
-      }}
-    >
-      Click the navigation above to switch the page,breadcrumb is right here:
+      }}>
+        点击上面的导航切换页面，面包屑在下面：
+      </div>
+      <Breadcrumb {...props} />
    </div>
-    <Breadcrumb {...props} />
-  </div>
-);
+  );
+}

 ReactDOM.render(
  <Router history={hashHistory}>
-    <Route name="home" breadcrumbName="Home" path="/" component={Home}>
-      <Route name="apps" breadcrumbName="Application List" path="apps" component={Apps}>
-        <Route name="app" breadcrumbName="Application:id" path=":id">
-          <Route name="detail" breadcrumbName="Detail" path="detail" />
+    <Route name="home" breadcrumbName="首页" path="/" component={Home}>
+      <Route name="apps" breadcrumbName="应用列表" path="apps" component={Apps}>
+        <Route name="app" breadcrumbName="应用:id" path=":id">
+          <Route name="detail" breadcrumbName="详情" path="detail" />
        </Route>
      </Route>
    </Route>
--- a/components/breadcrumb/demo/separator.md
+++ b/components/breadcrumb/demo/separator.md
@@ -1,27 +1,19 @@
 ---
 order: 3
-title: 
-  zh-CN: 分隔符
-  en-US: Configuring the Separator
+title: 分隔符
 ---

-## zh-CN
-
 使用 `separator=">"` 可以自定义分隔符。

-## en-US
-
-The separator can be customized by setting the separator property: separator=">"
-
 ````jsx
 import { Breadcrumb } from 'antd';

 ReactDOM.render(
  <Breadcrumb separator=">">
-    <Breadcrumb.Item>Home</Breadcrumb.Item>
-    <Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
-    <Breadcrumb.Item href="">Application List</Breadcrumb.Item>
-    <Breadcrumb.Item>An Application</Breadcrumb.Item>
+    <Breadcrumb.Item>首页</Breadcrumb.Item>
+    <Breadcrumb.Item href="">应用中心</Breadcrumb.Item>
+    <Breadcrumb.Item href="">应用列表</Breadcrumb.Item>
+    <Breadcrumb.Item>某应用</Breadcrumb.Item>
  </Breadcrumb>
 , mountNode);
 ````
--- a/components/breadcrumb/demo/withIcon.md
+++ b/components/breadcrumb/demo/withIcon.md
@@ -1,18 +1,10 @@
 ---
 order: 1
-title:
-  zh-CN: 带有图标的
-  en-US: With an Icon
+title: 带有图标的
 ---

-## zh-CN
-
 图标放在文字前面。

-## en-US
-
-The icon should be placed in front of the text.
-
 ````jsx
 import { Breadcrumb, Icon } from 'antd';

@@ -23,10 +15,10 @@ ReactDOM.render(
    </Breadcrumb.Item>
    <Breadcrumb.Item href="">
      <Icon type="user" />
-      Application List
+      应用列表
    </Breadcrumb.Item>
    <Breadcrumb.Item>
-      Application
+      应用
    </Breadcrumb.Item>
  </Breadcrumb>
 , mountNode);
--- a/components/breadcrumb/index.en-US.md
+++ b/components/breadcrumb/index.en-US.md
@@ -1,32 +0,0 @@
---
-category: Components
-type: Navigation
-title: Breadcrumb
---
-
-A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up within the hierarchy.
-
-## When to use
-
- When the system has more than two layers in a hierarchy.
- When you need to inform the user of where they are.
- When the user may need to navigate back to a higher level When the application has multi-layer architecture.
-
-## API
-
-```html
-<Breadcrumb>
-  <Breadcrumb.Item>Home</Breadcrumb.Item>
-  <Breadcrumb.Item>Application Center</Breadcrumb.Item>
-  <Breadcrumb.Item>Application List</Breadcrumb.Item>
-  <Breadcrumb.Item>An Application</Breadcrumb.Item>
-</Breadcrumb>
-```
-
-| Property      | Description                              | Type              |  Optional | Default |
-|-----------|-----------------------------------|-----------------|---------|--------|
-| routes    | The routing stack information of router | Array             |         | -      |
-| params    | Routing parameter                        | Object            |         | -      |
-| separator | Custom separator                      | String or Element |         | '/'    |
-| linkRender | Custom link function，and react-router configuration | Function(href, name) |         | -    |
-| nameRender | Custom link function，and react-router configuration | Function(name) |         | -    |
--- a/components/breadcrumb/index.zh-CN.md
+++ b/components/breadcrumb/index.zh-CN.md
@@ -29,5 +29,5 @@ english: Breadcrumb
 | routes    | router 的路由栈信息               | Array             |         | -      |
 | params    | 路由的参数                        | Object            |         | -      |
 | separator | 分隔符自定义                      | String or Element |         | '/'    |
-| linkRender | 自定义链接函数，和 react-router 配置使用 | Function(href, name, paths) | | - |
-| nameRender | 自定义文字函数，和 react-router 配置使用 | Function(breadcrumbName, route, params) | | - |
+| linkRender | 自定义链接函数，和 react-router 配置使用 | Function(href, name) |         | -    |
+| nameRender | 自定义链接函数，和 react-router 配置使用 | Function(name) |         | -    |
--- a/components/button/button.jsx
+++ b/components/button/button.jsx
@@ -42,15 +42,6 @@ export default class Button extends React.Component {
    icon: React.PropTypes.string,
  }

-  componentWillUnmount() {
-    if (this.clickedTimeout) {
-      clearTimeout(this.clickedTimeout);
-    }
-    if (this.timeout) {
-      clearTimeout(this.timeout);
-    }
-  }
-
  clearButton = (button) => {
    button.className = button.className.replace(` ${this.props.prefixCls}-clicked`, '');
  }
@@ -59,7 +50,7 @@ export default class Button extends React.Component {
    // Add click effect
    const buttonNode = findDOMNode(this);
    this.clearButton(buttonNode);
-    this.clickedTimeout = setTimeout(() => buttonNode.className += ` ${this.props.prefixCls}-clicked`, 10);
+    setTimeout(() => buttonNode.className += ` ${this.props.prefixCls}-clicked`, 10);
    clearTimeout(this.timeout);
    this.timeout = setTimeout(() => this.clearButton(buttonNode), 500);

@@ -104,8 +95,7 @@ export default class Button extends React.Component {
        type={htmlType || 'button'}
        className={classes}
        onMouseUp={this.handleMouseUp}
-        onClick={this.handleClick}
-      >
+        onClick={this.handleClick}>
        {iconType ? <Icon type={iconType} /> : null}{kids}
      </button>
    );
--- a/components/button/style/mixin.less
+++ b/components/button/style/mixin.less
@@ -35,20 +35,6 @@
  color: @color;
  background-color: @background;
  border-color: @border;
-  // a inside Button which only work in Chrome
-  // http://stackoverflow.com/a/17253457
-  > a:only-child {
-    color: currentColor;
-    &:after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      background: transparent;
-    }
-  }
 }

 .button-group-base(@btnClassName) {
--- a/components/calendar/Header.jsx
+++ b/components/calendar/Header.jsx
@@ -45,8 +45,7 @@ export default class Header extends React.Component {
        dropdownMenuStyle={{ minWidth: 103 }}
        className={`${prefixCls}-year-select`}
        onChange={this.onYearChange}
-        value={String(year)}
-      >
+        value={String(year)}>
        {options}
      </Select>
    );
@@ -70,8 +69,7 @@ export default class Header extends React.Component {
        dropdownMatchSelectWidth={false}
        className={`${prefixCls}-month-select`}
        value={String(month)}
-        onChange={this.onMonthChange}
-      >
+        onChange={this.onMonthChange}>
        {options}
      </Select>
    );
--- a/components/calendar/demo/custom-render.md
+++ b/components/calendar/demo/custom-render.md
@@ -26,7 +26,6 @@ function monthCellRender(value) {

 ReactDOM.render(
  <Calendar defaultValue={new Date('2010-10-10')}
-    dateCellRender={dateCellRender} monthCellRender={monthCellRender}
-  />
+    dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
 , mountNode);
 ````
--- a/components/calendar/index.en-US.md
+++ b/components/calendar/index.en-US.md
@@ -1,6 +1,6 @@
 ---
 category: Components
-type: Views
+type: Presentation
 cols: 1
 title: Calendar
 ---
--- a/components/calendar/index.jsx
+++ b/components/calendar/index.jsx
@@ -139,8 +139,7 @@ export default class Calendar extends React.Component {
          locale={locale.lang}
          prefixCls={prefixCls}
          onTypeChange={this.setType}
-          onValueChange={this.setValue}
-        />
+          onValueChange={this.setValue} />
        <FullCalendar
          {...props}
          Select={noop}
@@ -150,8 +149,7 @@ export default class Calendar extends React.Component {
          showHeader={false}
          value={value}
          monthCellRender={this.monthCellRender}
-          dateCellRender={this.dateCellRender}
-        />
+          dateCellRender={this.dateCellRender} />
      </div>
    );
  }
--- a/components/calendar/index.zh-CN.md
+++ b/components/calendar/index.zh-CN.md
@@ -1,6 +1,6 @@
 ---
 category: Components
-type: Views
+type: Presentation
 chinese: 日历
 cols: 1
 english: Calendar
--- a/components/card/demo/basic.md
+++ b/components/card/demo/basic.md
@@ -1,26 +1,18 @@
 ---
 order: 0
-title:
-  zh-CN: 典型卡片
-  en-US: Basic card
+title: 典型卡片
 ---

-## zh-CN
-
 包含标题、内容、操作区域。

-## en-US
-
-A basic card containing a title, content and an extra corner content.
-
 ````jsx
 import { Card } from 'antd';

 ReactDOM.render(
-  <Card title="Card title" extra={<a href="#">More</a>} style={{ width: 300 }}>
-    <p>Card content</p>
-    <p>Card content</p>
-    <p>Card content</p>
+  <Card title="卡片标题" extra={<a href="#">更多</a>} style={{ width: 300 }}>
+    <p>卡片的内容</p>
+    <p>卡片的内容</p>
+    <p>卡片的内容</p>
  </Card>
 , mountNode);
 ````
--- a/components/card/demo/border-less.md
+++ b/components/card/demo/border-less.md
@@ -1,27 +1,19 @@
 ---
 order: 1
-title:
-  zh-CN: 无边框
-  en-US: No border
+title: 无边框
 ---

-## zh-CN
-
 在灰色背景上使用无边框的卡片。

-## en-US
-
-A borderless card on a gray background.
-
 ````jsx
 import { Card } from 'antd';

 ReactDOM.render(
  <div style={{ background: '#ECECEC', padding: '30px' }}>
-    <Card title="Card title" bordered={false} style={{ width: 300 }}>
-      <p>Card content</p>
-      <p>Card content</p>
-      <p>Card content</p>
+    <Card title="卡片标题" bordered={false} style={{ width: 300 }}>
+      <p>卡片的内容</p>
+      <p>卡片的内容</p>
+      <p>卡片的内容</p>
    </Card>
  </div>
 , mountNode);
--- a/components/card/demo/grid.md
+++ b/components/card/demo/grid.md
@@ -1,18 +1,10 @@
 ---
 order: 4
-title:
-  zh-CN: 栅格卡片
-  en-US: Grid card
+title: 栅格卡片
 ---

-## zh-CN
-
 在系统概览页面常常和栅格进行配合。

-## en-US
-
-Cards usually cooperate with grid layout in overview page.
-
 ````jsx
 import { Card, Col, Row } from 'antd';

@@ -20,13 +12,13 @@ ReactDOM.render(
  <div style={{ background: '#ECECEC', padding: '30px' }}>
    <Row>
      <Col span="8">
-        <Card title="Card title" bordered={false}>Card content</Card>
+        <Card title="卡片标题" bordered={false}>卡片的内容</Card>
      </Col>
      <Col span="8">
-        <Card title="Card title" bordered={false}>Card content</Card>
+        <Card title="卡片标题" bordered={false}>卡片的内容</Card>
      </Col>
      <Col span="8">
-        <Card title="Card title" bordered={false}>Card content</Card>
+        <Card title="卡片标题" bordered={false}>卡片的内容</Card>
      </Col>
    </Row>
  </div>
@@ -34,12 +26,12 @@ ReactDOM.render(
 ````

 ````css
-/* Increase grid spacing of 16px  */
-.code-box-demo .ant-row {
+/* 增加 16px 栅格间距 */
+.code-box-demo .row {
  margin-left: -8px;
  margin-right: -8px;
 }
-.code-box-demo .ant-row > div {
+.code-box-demo .row > div {
  padding: 0 8px;
 }
 ````
--- a/components/card/demo/loading.md
+++ b/components/card/demo/loading.md
@@ -1,23 +1,15 @@
 ---
 order: 5
-title:
-  zh-CN: 预加载的卡片
-  en-US: Loading card
+title: 预加载的卡片
 ---

-## zh-CN
-
 数据读入前会有文本块样式。

-## en-US
-
-Shows a loading indicator while the contents of the card are being fetched.
-
 ````jsx
 import { Card } from 'antd';

 ReactDOM.render(
-  <Card loading title="Card title" style={{ width: '34%' }}>
+  <Card loading title="卡片标题" style={{ width: '34%' }}>
    Whatever content
  </Card>
 , mountNode);
--- a/components/card/demo/no-padding.md
+++ b/components/card/demo/no-padding.md
@@ -1,19 +1,10 @@
 ---
 order: 3
-title:
-  zh-CN: 更灵活的内容展示
-  en-US: Customized content
+title: 更灵活的内容展示
 ---

-## zh-CN
-
 可以调整默认边距，设定宽度。

-## en-US
-
-Customizing default width and margin.
-
-
 ````jsx
 import { Card } from 'antd';

@@ -23,7 +14,7 @@ ReactDOM.render(
      <img alt="example" width="100%" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
    </div>
    <div className="custom-card">
-      <h3>Europe Street beat</h3>
+      <h3>欧美街拍</h3>
      <p>www.instagram.com</p>
    </div>
  </Card>
--- a/components/card/demo/simple.md
+++ b/components/card/demo/simple.md
@@ -1,26 +1,18 @@
 ---
 order: 2
-title:
-  zh-CN: 简洁卡片
-  en-US: Simple card
+title: 简洁卡片
 ---

-## zh-CN
-
 只包含内容区域。

-## en-US
-
-A simple card only containing a content area.
-
 ````jsx
 import { Card } from 'antd';

 ReactDOM.render(
  <Card style={{ width: 300 }}>
-    <p>Card content</p>
-    <p>Card content</p>
-    <p>Card content</p>
+    <p>卡片的内容</p>
+    <p>卡片的内容</p>
+    <p>卡片的内容</p>
  </Card>
 , mountNode);
 ````
--- a/components/card/index.en-US.md
+++ b/components/card/index.en-US.md
@@ -1,25 +0,0 @@
---
-category: Components
-type: Views
-title: Card
-cols: 1
---
-
-Common card container.
-
-## When to use
-
-The most basic card container. You can use it to contain text, lists, pictures and paragraphs.
-
-## API
-
-```html
-<Card title="Card title">Card content</Card>
-```
-
-| Property     | Description           | Type     | Default       |
-|----------|----------------|----------|--------------|
-| title    | Card title | React.Element   |  -  |
-| extra    | Corner content of card | React.Element   | - |
-| bordered | Whether a border is set | Boolean   |  true  |
-| bodyStyle | Custom style for content area | Object   |  -  |
--- a/components/card/index.zh-CN.md
+++ b/components/card/index.zh-CN.md
@@ -1,9 +1,9 @@
 ---
 category: Components
-type: Views
-title: Card
-subtitle: 卡片
+chinese: 卡片
+type: Presentation
 cols: 1
+english: Card
 ---

 通用卡片容器。
--- a/components/carousel/demo/autoplay.md
+++ b/components/carousel/demo/autoplay.md
@@ -1,18 +1,10 @@
 ---
 order: 3
-title:
-  zh-CN: 自动切换
-  en-US: Scroll automatically
+title: 自动切换
 ---

-## zh-CN
-
 定时切换下一张。

-## en-US
-
-Timing of scrolling to the next card/picture.
-
 ````jsx
 import { Carousel } from 'antd';

--- a/components/carousel/demo/basic.md
+++ b/components/carousel/demo/basic.md
@@ -1,18 +1,10 @@
 ---
 order: 0
-title:
-  zh-CN: 基本
-  en-US: Basic
+title: 基本
 ---

-## zh-CN
-
 最简单的用法。

-## en-US
-
-Basic usage.
-
 ````jsx
 import { Carousel } from 'antd';

--- a/components/carousel/demo/fade.md
+++ b/components/carousel/demo/fade.md
@@ -1,18 +1,10 @@
 ---
 order: 2
-title:
-  zh-CN: 渐显
-  en-US: Fade in
+title: 渐显
 ---

-## zh-CN
-
 切换效果为渐显。

-## en-US
-
-Slides use fade for transition.
-
 ````jsx
 import { Carousel } from 'antd';

--- a/components/carousel/demo/vertical.md
+++ b/components/carousel/demo/vertical.md
@@ -1,18 +1,10 @@
 ---
 order: 1
-title:
-  zh-CN: 垂直
-  en-US: Vertical
+title: 垂直
 ---

-## zh-CN
-
 垂直显示。

-## en-US
-
-Vertical pagination.
-
 ````jsx
 import { Carousel } from 'antd';

--- a/components/carousel/index.en-US.md
+++ b/components/carousel/index.en-US.md
@@ -1,41 +0,0 @@
---
-category: Components
-type: Views
-title: Carousel
---
-
-A carousel component. Scales with its container.
-
-## When to use
-
- When there is a group of content on the same level.
- When there is insufficient content space, it can be used to save space in the form of a resolving door.
- Commonly used in a carousel for a group of pictures/cards.
-
-## API
-
-| Property             | Description                                         | Type     | Default                          |
-|------------------|----------------------------------------------|----------|---------------------------------|
-| effect           | Animation effect, either `scrollx` or `fade`   | String | scrollx |
-| dots | Should we show the dots at the bottom of the gallery                | Boolean    | true |
-| vertical | Whether to use a vertical display                               | Boolean   | false |
-| autoplay | Whether to scroll automatically                                 | Boolean   | false |
-| easing | Transition name                                                   | String   | linear |
-| beforeChange | Callback function called before the current index changes   | function(from, to) |
-| afterChange  | Callback function called after the current index changes    | function(current)  |
-
-For more info on the parameters, refer to the https://github.com/akiran/react-slick
-
-<style>
-.ant-carousel .slick-slide {
-  text-align: center;
-  height: 100px;
-  line-height: 100px;
-  background: #71B5DE;
-  color: #fff;
-  overflow: hidden;
-}
-#components-carousel-demo-vertical .ant-carousel {
-  margin-right: 35px;
-}
-</style>
--- a/components/carousel/index.zh-CN.md
+++ b/components/carousel/index.zh-CN.md
@@ -1,8 +1,8 @@
 ---
 category: Components
-type: Views
-title: Carousel
-subtitle: 走马灯
+chinese: 走马灯
+type: Presentation
+english: Carousel
 ---

 旋转木马，一组轮播的区域。
--- a/components/cascader/demo/custom-render.md
+++ b/components/cascader/demo/custom-render.md
@@ -56,7 +56,6 @@ ReactDOM.render(
    options={options}
    defaultValue={['zhejiang', 'hangzhou', 'xihu']}
    displayRender={displayRender}
-    style={{ width: 200 }}
-  />
+    style={{ width: 200 }} />
 , mountNode);
 ````
--- a/components/cascader/demo/hover.md
+++ b/components/cascader/demo/hover.md
@@ -43,7 +43,6 @@ function displayRender(label) {

 ReactDOM.render(
  <Cascader options={options} expandTrigger="hover"
-    displayRender={displayRender} onChange={onChange}
-  />
+    displayRender={displayRender} onChange={onChange} />
 , mountNode);
 ````
--- a/components/cascader/index.jsx
+++ b/components/cascader/index.jsx
@@ -80,8 +80,7 @@ export default class Cascader extends React.Component {
    const clearIcon = (allowClear && !disabled && this.state.value.length > 0) ?
      <Icon type="cross-circle"
        className={`${prefixCls}-picker-clear`}
-        onClick={this.clearSelection}
-      /> : null;
+        onClick={this.clearSelection} /> : null;
    const arrowCls = classNames({
      [`${prefixCls}-picker-arrow`]: true,
      [`${prefixCls}-picker-arrow-expand`]: this.state.popupVisible,
@@ -100,20 +99,17 @@ export default class Cascader extends React.Component {
        value={this.state.value}
        popupVisible={this.state.popupVisible}
        onPopupVisibleChange={this.handlePopupVisibleChange}
-        onChange={this.handleChange}
-      >
+        onChange={this.handleChange}>
        {children ||
          <span
            style={style}
-            className={pickerCls}
-          >
+            className={pickerCls}>
            <Input {...otherProps}
              placeholder={this.state.value && this.state.value.length > 0 ? null : placeholder}
              className={`${prefixCls}-input ant-input ${sizeCls}`}
              value={null}
              disabled={disabled}
-              readOnly
-            />
+              readOnly />
            <span className={`${prefixCls}-picker-label`}>{this.getLabel()}</span>
            {clearIcon}
            <Icon type="down" className={arrowCls} />
--- a/components/cascader/index.md
+++ b/components/cascader/index.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 chinese: 级联选择
-type: Form Controls
+type: Form Control
 english: Cascader
 ---

--- a/components/checkbox/Group.jsx
+++ b/components/checkbox/Group.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import Checkbox from './index';
-import PureRenderMixin from 'react-addons-pure-render-mixin';

 export default class CheckboxGroup extends React.Component {
  static defaultProps = {
@@ -31,9 +30,6 @@ export default class CheckboxGroup extends React.Component {
      });
    }
  }
-  shouldComponentUpdate(...args) {
-    return PureRenderMixin.shouldComponentUpdate.apply(this, args);
-  }
  getOptions() {
    const { options } = this.props;
    return options.map(option => {
@@ -68,8 +64,7 @@ export default class CheckboxGroup extends React.Component {
            <Checkbox disabled={'disabled' in option ? option.disabled : this.props.disabled}
              checked={this.state.value.indexOf(option.value) !== -1}
              onChange={() => this.toggleOption(option)}
-              className="ant-checkbox-group-item" key={option.value}
-            >
+              className="ant-checkbox-group-item" key={option.value}>
              {option.label}
            </Checkbox>
          )
--- a/components/checkbox/demo/basic.md
+++ b/components/checkbox/demo/basic.md
@@ -13,6 +13,6 @@ function onChange(e) {
 }

 ReactDOM.render(
-  <Checkbox onChange={onChange}>Checkbox</Checkbox>
+  <Checkbox defaultChecked={false} onChange={onChange}>Checkbox</Checkbox>
 , mountNode);
 ````
--- a/components/checkbox/demo/controller.md
+++ b/components/checkbox/demo/controller.md
@@ -22,21 +22,18 @@ const App = React.createClass({
        <p style={{ marginBottom: '20px' }}>
          <Checkbox checked={this.state.checked}
            disabled={this.state.disabled}
-            onChange={this.onChange}
-          >
+            onChange={this.onChange}>
            {label}
          </Checkbox>
        </p>
        <p>
          <Button type="primary" size="small"
-            onClick={this.toggleChecked}
-          >
+            onClick={this.toggleChecked}>
            {!this.state.checked ? '选中' : '取消'}
          </Button>
          <Button style={{ marginLeft: '10px' }}
            type="primary" size="small"
-            onClick={this.toggleDisable}
-          >
+            onClick={this.toggleDisable}>
            {!this.state.disabled ? '不可用' : '可用'}
          </Button>
        </p>
--- a/components/checkbox/index.jsx
+++ b/components/checkbox/index.jsx
@@ -2,16 +2,12 @@ import RcCheckbox from 'rc-checkbox';
 import React from 'react';
 import CheckboxGroup from './Group';
 import classNames from 'classnames';
-import PureRenderMixin from 'react-addons-pure-render-mixin';

 export default class Checkbox extends React.Component {
  static Group = CheckboxGroup;
  static defaultProps = {
    prefixCls: 'ant-checkbox',
  }
-  shouldComponentUpdate(...args) {
-    return PureRenderMixin.shouldComponentUpdate.apply(this, args);
-  }
  render() {
    const { prefixCls, style, children, className, ...restProps } = this.props;
    const classString = classNames({
--- a/components/checkbox/index.md
+++ b/components/checkbox/index.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 chinese: 多选框
-type: Form Controls
+type: Form Control
 english: Checkbox
 ---

--- a/components/checkbox/style/mixin.less
+++ b/components/checkbox/style/mixin.less
@@ -151,20 +151,11 @@
    .@{checkbox-inner-prefix-cls}-input {
      cursor: default;
    }
-
-    & + span {
-      color: #ccc;
-      cursor: @cursor-disabled;
-    }
  }

  .@{checkbox-prefix-cls}-wrapper {
    cursor: pointer;
    font-size: @font-size-base;
-    display: inline-block;
-    & + & {
-      margin-left: 8px;
-    }
  }

  .@{checkbox-prefix-cls}-wrapper + span,
@@ -183,22 +174,4 @@
      display: inline-block;
    }
  }
-
-  @ie8: \0screen;
-
-  // IE8 hack for https://github.com/ant-design/ant-design/issues/2148
-  @media @ie8 {
-    .@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner:before,
-    .@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner:after {
-      font-family: 'anticon';
-      content: '\E62E';
-      font-weight: bold;
-      font-size: 8px;
-      border: 0;
-      color: #fff;
-      left: 2px;
-      top: 3px;
-      position: absolute;
-    }
-  }
 }
--- a/components/collapse/index.md
+++ b/components/collapse/index.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 chinese: 折叠面板
-type: Views
+type: Presentation
 english: Collapse
 ---

--- a/components/date-picker/RangePicker.jsx
+++ b/components/date-picker/RangePicker.jsx
@@ -123,19 +123,17 @@ export default class RangePicker extends React.Component {
              <span className={props.pickerInputClass} disabled={disabled}>
                <input
                  disabled={disabled}
-                  readOnly
+                  onChange={props.handleInputChange}
                  value={start ? props.getFormatter().format(start) : ''}
                  placeholder={startPlaceholder}
-                  className="ant-calendar-range-picker-input"
-                />
+                  className="ant-calendar-range-picker-input" />
                <span className="ant-calendar-range-picker-separator"> ~ </span>
                <input
                  disabled={disabled}
-                  readOnly
+                  onChange={props.handleInputChange}
                  value={end ? props.getFormatter().format(end) : ''}
                  placeholder={endPlaceholder}
-                  className="ant-calendar-range-picker-input"
-                />
+                  className="ant-calendar-range-picker-input" />
                <span className="ant-calendar-picker-icon" />
              </span>
            );
--- a/components/date-picker/createPicker.jsx
+++ b/components/date-picker/createPicker.jsx
@@ -3,7 +3,6 @@ import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import GregorianCalendar from 'gregorian-calendar';
 import classNames from 'classnames';
-import Icon from '../icon';

 export default function createPicker(TheCalendar) {
  return class CalenderWrapper extends React.Component {
@@ -23,13 +22,6 @@ export default function createPicker(TheCalendar) {
      }
    }

-    clearSelection = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      this.setState({ value: null });
-      this.handleChange(null);
-    }
-
    handleChange = (value) => {
      const props = this.props;
      if (!('value' in props)) {
@@ -58,6 +50,25 @@ export default function createPicker(TheCalendar) {
        'ant-calendar-month': MonthCalendar === TheCalendar,
      });

+      let pickerChangeHandler = {
+        onChange: this.handleChange,
+      };
+
+      let calendarHandler = {
+        onOk: this.handleChange,
+      };
+
+      if (props.showTime) {
+        pickerChangeHandler.onChange = (value) => {
+          // Click clear button
+          if (value === null) {
+            this.handleChange(value);
+          }
+        };
+      } else {
+        calendarHandler = {};
+      }
+
      const calendar = (
        <TheCalendar
          formatter={props.getFormatter()}
@@ -69,7 +80,7 @@ export default function createPicker(TheCalendar) {
          dateInputPlaceholder={placeholder}
          prefixCls="ant-calendar"
          className={calendarClassName}
-        />
+          {...calendarHandler} />
      );

      // default width for showTime
@@ -78,11 +89,6 @@ export default function createPicker(TheCalendar) {
        pickerStyle.width = 180;
      }

-      const clearIcon = (!props.disabled && this.state.value) ?
-        <Icon type="cross-circle"
-          className="ant-calendar-picker-clear"
-          onClick={this.clearSelection}
-        /> : null;
      return (
        <span className={props.pickerClass} style={{ ...pickerStyle, ...props.style }}>
          <RcDatePicker
@@ -94,10 +100,9 @@ export default function createPicker(TheCalendar) {
            style={props.popupStyle}
            align={props.align}
            getCalendarContainer={props.getCalendarContainer}
-            open={props.open}
            onOpen={props.toggleOpen}
            onClose={props.toggleOpen}
-            onChange={this.handleChange}
+            {...pickerChangeHandler}
          >
            {
              ({ value }) => {
@@ -105,12 +110,10 @@ export default function createPicker(TheCalendar) {
                  <span>
                    <input
                      disabled={props.disabled}
-                      readOnly
+                      onChange={props.handleInputChange}
                      value={value ? props.getFormatter().format(value) : ''}
                      placeholder={placeholder}
-                      className={props.pickerInputClass}
-                    />
-                    {clearIcon}
+                      className={props.pickerInputClass} />
                    <span className="ant-calendar-picker-icon" />
                  </span>
                );
--- a/components/date-picker/demo/basic.md
+++ b/components/date-picker/demo/basic.md
@@ -1,18 +1,10 @@
 ---
 order: 0
-title:
-  zh-CN: 基本
-  en-US: Basic
+title: 基本
 ---

-## zh-CN
-
 最简单的用法。

-## en-US
-
-The most basic usage.
-
 ````jsx
 import { DatePicker } from 'antd';

--- a/components/date-picker/demo/disabled-date.md
+++ b/components/date-picker/demo/disabled-date.md
@@ -1,22 +1,12 @@
 ---
 order: 6
-title:
-  zh-CN: 指定不可选择日期
-  en-US: Specify the date that cannot be selected
+title: 指定不可选择日期
 ---

-## zh-CN
-
 设置 `disabledDate` 方法，来确定不可选时段。

 如上例：不可选择今天之后的日期。

-## en-US
-
-Specify unselectable period by `disabledDate`.
-
-As in the example above: you can't select a date later than today.
-
 ````jsx
 import { DatePicker } from 'antd';

--- a/components/date-picker/demo/disabled.md
+++ b/components/date-picker/demo/disabled.md
@@ -1,18 +1,10 @@
 ---
 order: 5
-title:
-  zh-CN: 禁用
-  en-US: Disabled
+title: 禁用
 ---

-## zh-CN
-
 选择框的不可用状态。

-## en-US
-
-A disabled state of the `DatePicker`.
-
 ````jsx
 import { DatePicker } from 'antd';

--- a/components/date-picker/demo/formatter.md
+++ b/components/date-picker/demo/formatter.md
@@ -1,18 +1,10 @@
 ---
 order: 1
-title:
-  zh-CN: 日期格式
-  en-US: Date format
+title: 日期格式
 ---

-## zh-CN
-
 使用 `format` 属性，可以自定义你需要的日期显示格式，如 `yyyy/MM/dd`。

-## en-US
-
-By using `format`, you can customize the format(such as `yyyy/MM/dd`) the date is displayed in. 
-
 ````jsx
 import { DatePicker } from 'antd';

--- a/components/date-picker/demo/locale.md
+++ b/components/date-picker/demo/locale.md
@@ -1,19 +1,10 @@
 ---
 order: 10
-title: 
-  zh-CN: 国际化
-  en-US: Locale
+title: 国际化
 ---

-## zh-CN
-
 通过 `locale` 配置时区、语言等, 默认支持 `en_US`，`zh_CN`。

-## en-US
-
-Use locale to set the properties like time zone, language and etc. en_US, zh_CN are supported by default.
-
-
 ````jsx
 import { DatePicker } from 'antd';
 import enUS from 'antd/lib/date-picker/locale/en_US';
--- a/components/date-picker/demo/month-picker.md
+++ b/components/date-picker/demo/month-picker.md
@@ -1,17 +1,9 @@
 ---
 order: 9
-title: 
-  zh-CN: 月选择器
-  en-US: MonthPicker
+title: 月选择器
 ---

-## zh-CN
-
-使用 `MonthPicker` 实现月选择器。
-
-## en-US
-
-You can get a month selector by using `MonthPicker`.
+使用 `MonthPicker` 实现月选择器.

 ````jsx
 import { DatePicker } from 'antd';
--- a/components/date-picker/demo/range.md
+++ b/components/date-picker/demo/range.md
@@ -1,20 +1,10 @@
 ---
 order: 8
-title: 
-  zh-CN: 日期范围二
-  en-US: Date range, case 2
+title: 日期范围二
 ---

-## zh-CN
-
 使用 `RangePicker` 实现日期范围选择有更好的交互体验。

-## en-US
-
-By using `RangePicker` to specify a date range, you can achieve a better interactive experience.
-
-
-
 ````jsx
 import { DatePicker } from 'antd';
 const RangePicker = DatePicker.RangePicker;
--- a/components/date-picker/demo/size.md
+++ b/components/date-picker/demo/size.md
@@ -1,19 +1,10 @@
 ---
 order: 1
-title: 
-  zh-CN: 三种大小
-  en-US: Three sizes
+title: 三种大小
 ---

-## zh-CN
-
 三种大小的输入框，大的用在表单中，中的为默认。

-## en-US
-
-The input box comes in three sizes. `large` is used in the form, while the medium size is the default.
-
-
 ````jsx
 import { DatePicker } from 'antd';

--- a/components/date-picker/demo/start-end.md
+++ b/components/date-picker/demo/start-end.md
@@ -1,19 +1,10 @@
 ---
 order: 7
-title: 
-  zh-CN: 日期范围一
-  en-US: Date range, case 1
+title: 日期范围一
 ---

-## zh-CN
-
 可以设置 `disabledDate` 方法，来约束开始和结束日期。

-## en-US
-
-You can use the `disabledDate` property to limit the start and end dates.
-
-
 ````jsx
 import { DatePicker } from 'antd';

@@ -22,7 +13,6 @@ const DateRange = React.createClass({
    return {
      startValue: null,
      endValue: null,
-      endOpen: false,
    };
  },
  disabledStartDate(startValue) {
@@ -49,36 +39,17 @@ const DateRange = React.createClass({
  onEndChange(value) {
    this.onChange('endValue', value);
  },
-  handleStartToggle({ open }) {
-    if (!open) {
-      this.setState({ endOpen: true });
-    }
-  },
-  handleEndToggle({ open }) {
-    this.setState({ endOpen: open });
-  },
  render() {
    return (
      <div>
-        <DatePicker
-          disabledDate={this.disabledStartDate}
-          showTime
-          format="yyyy-MM-dd HH:mm:ss"
+        <DatePicker disabledDate={this.disabledStartDate}
          value={this.state.startValue}
          placeholder="开始日期"
-          onChange={this.onStartChange}
-          toggleOpen={this.handleStartToggle}
-        />
-        <DatePicker
-          disabledDate={this.disabledEndDate}
-          showTime
-          format="yyyy-MM-dd HH:mm:ss"
+          onChange={this.onStartChange} />
+        <DatePicker disabledDate={this.disabledEndDate}
          value={this.state.endValue}
          placeholder="结束日期"
-          onChange={this.onEndChange}
-          open={this.state.endOpen}
-          toggleOpen={this.handleEndToggle}
-        />
+          onChange={this.onEndChange} />
      </div>
    );
  },
--- a/components/date-picker/demo/time.md
+++ b/components/date-picker/demo/time.md
@@ -1,18 +1,10 @@
 ---
 order: 4
-title: 
-  zh-CN: 日期时间选择
-  en-US: To choose time
+title: 日期时间选择
 ---

-## zh-CN
-
 增加选择时间功能，当 `showTime` 为一个对象时，其属性会传递给内建的 `TimePicker`。

-## en-US
-
-This property provide an additional time selection. When `showTime` is an Object, its properties will be passed on to `TimePicker`, witch is a built-in function.
-
 ````jsx
 import { DatePicker } from 'antd';

--- a/components/date-picker/demo/with-time-picker.md
+++ b/components/date-picker/demo/with-time-picker.md
@@ -1,19 +1,11 @@
 ---
 order: 4
 hidden: true
-title: 
-  zh-CN: 日期时间选择二
-  en-US: To select a date, case 2
+title: 日期时间选择二
 ---

-## zh-CN
-
 和 <a href="/components/time-picker">时间选择框</a> 配合使用。

-## en-US
-
-Cooperate with `<a href="/components/time-picker">time-picker</a>`
-
 ````jsx
 import { DatePicker, TimePicker } from 'antd';

--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@@ -1,74 +0,0 @@
---
-category: Components
-type: Form Controls
-english: DatePicker
---
-
-To select/input a date.
-
-## When To Use
-
-By clicking the input box, you can select a date from a popup calendar.
-
-## API
-
-### DatePicker
-
-```html
-<DatePicker defaultValue="2015-01-01" />
-```
-
-> Warning: `Datepicker` is renamed to `DatePicker` after `0.11`.
-
-
-| Property         | Description           | Type     | Default       |
-|--------------|----------------|----------|--------------|
-| value        | to set date           | String/Date   | -           |
-| defaultValue | to set default date        | String/Date   | -           |
-| format       | to set the date format, refer to [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format) | String   | "yyyy-MM-dd" |
-| disabledDate | to specify the date that cannot be selected | function | -           |
-| onChange     | a callback function, can be executed when the selected time is changing | function(date, dateString) | -           |
-| disabled     | determine whether the DatePicker is disabled           | Boolean     | false        |
-| style        | to customize the style of the input box     | Object     | {}   |
-| popupStyle   | to customize the style of the popup calendar   | Object     | {}   |
-| size         | determine the size of the input box, the height of `large` and `small`, are 32px and 22px respectively, while default size is 28px | String   | -  |
-| locale       | localization configuration | Object   | [default](https://github.com/ant-design/ant-design/issues/424)  |
-| onOk         | a callback function, can be executed when OK-button is clicked | function(Date value) | - |
-| toggleOpen   | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - |
-| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
-| showTime     | to provide an additional time selection  | Object/Boolean | [TimePicker Options](http://ant.design/components/time-picker/#api) |
-
-### MonthPicker
-
-| Property         | Description           | Type     | Default       |
-|--------------|----------------|----------|--------------|
-| value        | to set date          | String/Date   | -           |
-| defaultValue | to set default date       | String/Date   | -           |
-| format       | to set the date format, refer to [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format) | String   | "yyyy-MM" |
-| disabledDate | to specify the date that cannot be selected | function | -           |
-| onChange     | a callback function, can be executed when the selected time is changing | function(Date value) | -           |
-| disabled     | determine whether the MonthPicker is disabled           | Boolean     | false        |
-| style        | to customize the style of the input box     | Object     | {}   |
-| popupStyle   | to customize the style of the popup calendar   | Object     | {}   |
-| size         | determine the size of the input box, the height of `large` and `small`, are 32px and 22px respectively, while default size is 28px | String   | -  |
-| locale       | localization configuration | Object   | [default](https://github.com/ant-design/ant-design/issues/424)  |
-| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
-
-### RangePicker
-
-| Property         | Description           | Type     | Default       |
-|--------------|----------------|----------|--------------|
-| value        | to set date          | [String/Date, String/Date]   | -           |
-| defaultValue | to set default date       | [String/Date, String/Date]   | -           |
-| format       | to set the date format  | String    | "yyyy-MM-dd HH:mm:ss" |
-| onChange     | a callback function, can be executed when the selected time is changing | function(date[], dateString[]) | -           |
-| showTime     | to provide an additional time selection  | Object/Boolean | [TimePicker Options](http://ant.design/components/time-picker/#api) |
-
-The following properties are the same with `DatePicker`: `disabled` `style` `popupStyle` `size` `locale` `showTime` `onOk` `getCalendarContainer`
-
-
-<style>
-.code-box-demo .ant-calendar-picker {
-  margin: 0 8px 12px 0;
-}
-</style>
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 chinese: 日期选择框
-type: Form Controls
+type: Form Control
 english: DatePicker
 ---

--- a/components/date-picker/style/Calendar.less
+++ b/components/date-picker/style/Calendar.less
@@ -246,7 +246,6 @@
  }

  .@{calendar-prefix-cls}-clear-btn {
-    display: none;
    position: absolute;
    right: 5px;
    text-indent: -76px;
--- a/components/date-picker/style/Picker.less
+++ b/components/date-picker/style/Picker.less
@@ -37,29 +37,7 @@
  > input {
    outline: none;
  }
-  &-clear {
-    opacity: 0;
-    position: absolute;
-    right: 7px;
-    z-index: 1;
-    background: #fff;
-    top: 50%;
-    font-size: 12px;
-    color: #ccc;
-    width: 14px;
-    height: 14px;
-    margin-top: -7px;
-    line-height: 14px;
-    cursor: pointer;
-    transition: color 0.3s ease, opacity 0.15s ease;
-    &:hover {
-      color: #999;
-    }
-  }

-  &:hover &-clear {
-    opacity: 1;
-  }
  &-icon {
    position: absolute;
    user-select: none;
--- a/components/date-picker/style/RangePicker.less
+++ b/components/date-picker/style/RangePicker.less
@@ -62,7 +62,6 @@
  }

  .@{calendar-prefix-cls}-input-wrap {
-    position: relative;
    height: @input-box-height;
  }
  .@{calendar-prefix-cls}-input {
@@ -110,22 +109,11 @@

  .@{calendar-prefix-cls}-in-range-cell {
    border-radius: 0;
-    position: relative;
-    > div {
-      position: relative;
-      z-index: 1;
-    }
-    &:before {
-      content: '';
-      display: block;
+    > span {
      background: tint(@primary-color, 90%);
+      width: 100%;
      border-radius: 0;
      border: 0;
-      position: absolute;
-      top: 4px;
-      bottom: 4px;
-      left: 0;
-      right: 0;
    }
  }

@@ -140,6 +128,5 @@
  .@{calendar-prefix-cls}-today-btn {
    margin: 8px 12px;
    height: 22px;
-    line-height: 22px;
  }
 }
--- a/components/date-picker/wrapPicker.jsx
+++ b/components/date-picker/wrapPicker.jsx
@@ -18,12 +18,22 @@ export default function wrapPicker(Picker, defaultFormat) {
      align: {
        offset: [0, -9],
      },
+      open: false,
    }

    static contextTypes = {
      antLocale: PropTypes.object,
    }

+    constructor(props) {
+      super(props);
+
+      this.state = {};
+    }
+
+    // remove input readonly warning
+    handleInputChange() {}
+
    getLocale() {
      const props = this.props;
      let locale = defaultLocale;
@@ -56,14 +66,19 @@ export default function wrapPicker(Picker, defaultFormat) {
      return value;
    }

-    toggleOpen = ({ open }) => {
-      this.props.toggleOpen({ open });
+    toggleOpen = (e) => {
+      this.setState({
+        open: e.open,
+      });
+      this.props.toggleOpen(e);
    }

    render() {
      const props = this.props;
+      const state = this.state;
      const pickerClass = classNames({
        'ant-calendar-picker': true,
+        'ant-calendar-picker-open': state.open,
      });
      const pickerInputClass = classNames({
        'ant-calendar-range-picker': true,
@@ -88,17 +103,18 @@ export default function wrapPicker(Picker, defaultFormat) {
          placeholder={locale.timePickerLocale.placeholder}
          locale={locale.timePickerLocale}
          transitionName="slide-up"
-        />
+          />
      ) : null;

      return (
        <Picker
-          {...props}
+          {...this.props}
          pickerClass={pickerClass}
          pickerInputClass={pickerInputClass}
          locale={locale}
          timePicker={timePicker}
          toggleOpen={this.toggleOpen}
+          handleInputChange={this.handleInputChange}
          getFormatter={this.getFormatter}
          parseDateFromValue={this.parseDateFromValue}
        />
--- a/components/dropdown/demo/overlay-visible.md
+++ b/components/dropdown/demo/overlay-visible.md
@@ -33,8 +33,7 @@ const OverlayVisible = React.createClass({
    return (
      <Dropdown overlay={menu}
        onVisibleChange={this.handleVisibleChange}
-        visible={this.state.visible}
-      >
+        visible={this.state.visible}>
        <a className="ant-dropdown-link" href="#">
          鼠标移入 <Icon type="down" />
        </a>
--- a/components/dropdown/dropdown-button.jsx
+++ b/components/dropdown/dropdown-button.jsx
@@ -23,7 +23,7 @@ export default class DropdownButton extends React.Component {
    const { type, overlay, trigger, align, children, className, onClick, ...restProps } = this.props;
    const cls = classNames({
      'ant-dropdown-button': true,
-      [className]: !!className,
+      className: !!className,
    });
    return (
      <ButtonGroup {...restProps} className={cls}>
--- a/components/dropdown/index.md
+++ b/components/dropdown/index.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 chinese: 下拉菜单
-type: Views
+type: Presentation
 english: Dropdown
 ---

@@ -33,7 +33,7 @@ english: Dropdown
 |-------------|------------------|--------------------|--------------|
 | type        | 按钮类型，和 [Button](/components/button) 一致 | String | 'default' |
 | onClick     | 点击左侧按钮的回调，和 [Button](/components/button) 一致 | Function   | - |
-| trigger     | 触发下拉的行为   | ['click'] or ['hover'] | ['hover']        |
+| trigger     | 触发下拉的行为   | "click" or "hover" | hover        |
 | overlay     | 菜单         | [Menu](/components/menu) | -     |
 | visible     | 菜单是否显示 | Bool   | 无           |
 | onVisibleChange  | 菜单显示状态改变时调用，参数为 { visible } | Function | - |
--- a/components/form/Form.jsx
+++ b/components/form/Form.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import classNames from 'classnames';
-import PureRenderMixin from 'react-addons-pure-render-mixin';

 export default class Form extends React.Component {
  static defaultProps = {
@@ -23,10 +22,6 @@ export default class Form extends React.Component {
    form: React.PropTypes.object,
  }

-  shouldComponentUpdate(...args) {
-    return PureRenderMixin.shouldComponentUpdate.apply(this, args);
-  }
-
  getChildContext() {
    return {
      form: this.props.form,
--- a/components/form/FormItem.jsx
+++ b/components/form/FormItem.jsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import classNames from 'classnames';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
+
+function prefixClsFn(prefixCls, ...args) {
+  return args.map((s) => `${prefixCls}-${s}`).join(' ');
+}

 export default class FormItem extends React.Component {
  static defaultProps = {
@@ -25,17 +28,13 @@ export default class FormItem extends React.Component {
    form: React.PropTypes.object,
  }

-  shouldComponentUpdate(...args) {
-    return PureRenderMixin.shouldComponentUpdate.apply(this, args);
-  }
-
  getLayoutClass(colDef) {
    if (!colDef) {
      return '';
    }
    const { span, offset } = colDef;
-    const col = span ? `ant-col-${span}` : '';
-    const offsetCol = offset ? ` ant-col-offset-${offset}` : '';
+    const col = span ? `col-${span}` : '';
+    const offsetCol = offset ? ` col-offset-${offset}` : '';
    return col + offsetCol;
  }

@@ -71,10 +70,11 @@ export default class FormItem extends React.Component {
  }

  renderHelp() {
-    const prefixCls = this.props.prefixCls;
+    const props = this.props;
+    const prefixCls = props.prefixCls;
    const help = this.getHelpMsg();
    return help ? (
-      <div className={`${prefixCls}-explain`} key="help">
+      <div className={prefixClsFn(prefixCls, 'explain')} key="help">
        {help}
      </div>
    ) : null;
@@ -83,7 +83,7 @@ export default class FormItem extends React.Component {
  renderExtra() {
    const { prefixCls, extra } = this.props;
    return extra ? (
-      <span className={`${prefixCls}-extra`}>{extra}</span>
+      <span className={prefixClsFn(prefixCls, 'extra')}>{extra}</span>
    ) : null;
  }

@@ -162,15 +162,9 @@ export default class FormItem extends React.Component {
      [`${props.prefixCls}-item-required`]: required,
    });

-    // remove user input colon
-    let label = props.label;
-    if (typeof label === 'string' && label.trim() !== '') {
-      label = props.label.replace(/：|:$/, '');
-    }
-
    return props.label ? (
      <label htmlFor={props.id || this.getId()} className={className} key="label">
-        {label}
+        {props.label}
      </label>
    ) : null;
  }
--- a/components/form/demo/advanced-search-form.md
+++ b/components/form/demo/advanced-search-form.md
@@ -16,70 +16,61 @@ ReactDOM.render(
    <Row gutter={16}>
      <Col sm={8}>
        <FormItem
-          label="搜索名称"
+          label="搜索名称："
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
+          wrapperCol={{ span: 14 }}>
          <Input placeholder="请输入搜索名称" size="default" />
        </FormItem>
        <FormItem
-          label="较长搜索名称"
+          label="较长搜索名称："
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
+          wrapperCol={{ span: 14 }}>
          <DatePicker size="default" />
        </FormItem>
        <FormItem
-          label="搜索名称"
+          label="搜索名称："
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
+          wrapperCol={{ span: 14 }}>
          <Input placeholder="请输入搜索名称" size="default" />
        </FormItem>
      </Col>
      <Col sm={8}>
        <FormItem
-          label="搜索名称"
+          label="搜索名称："
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
+          wrapperCol={{ span: 14 }}>
          <Input placeholder="请输入搜索名称" size="default" />
        </FormItem>
        <FormItem
-          label="较长搜索名称"
+          label="较长搜索名称："
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
+          wrapperCol={{ span: 14 }}>
          <DatePicker size="default" />
        </FormItem>
        <FormItem
-          label="搜索名称"
+          label="搜索名称："
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
+          wrapperCol={{ span: 14 }}>
          <Input placeholder="请输入搜索名称" size="default" />
        </FormItem>
      </Col>
      <Col sm={8}>
        <FormItem
-          label="搜索名称"
+          label="搜索名称："
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
+          wrapperCol={{ span: 14 }}>
          <Input placeholder="请输入搜索名称" size="default" />
        </FormItem>
        <FormItem
-          label="较长搜索名称"
+          label="较长搜索名称："
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
+          wrapperCol={{ span: 14 }}>
          <DatePicker size="default" />
        </FormItem>
        <FormItem
-          label="搜索名称"
+          label="搜索名称："
          labelCol={{ span: 10 }}
-          wrapperCol={{ span: 14 }}
-        >
+          wrapperCol={{ span: 14 }}>
          <Input placeholder="请输入搜索名称" size="default" />
        </FormItem>
      </Col>
@@ -105,7 +96,7 @@ ReactDOM.render(
 }

 /* 由于输入标签长度不确定，所以需要微调使之看上去居中 */
-.ant-advanced-search-form > .ant-row {
+.ant-advanced-search-form > .row {
  position: relative;
  left: -6px;
 }
--- a/components/form/demo/form-controls.md
+++ b/components/form/demo/form-controls.md
@@ -21,28 +21,25 @@ ReactDOM.render(
  <Form horizontal>
    <FormItem
      id="control-input"
-      label="输入框"
+      label="输入框："
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 14 }}
-    >
+      wrapperCol={{ span: 14 }}>
      <Input id="control-input" placeholder="Please enter..." />
    </FormItem>

    <FormItem
      id="control-textarea"
-      label="文本域"
+      label="文本域："
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 14 }}
-    >
+      wrapperCol={{ span: 14 }}>
      <Input type="textarea" id="control-textarea" rows="3" />
    </FormItem>

    <FormItem
      id="select"
-      label="Select 选择器"
+      label="Select 选择器："
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 14 }}
-    >
+      wrapperCol={{ span: 14 }}>
      <Select id="select" size="large" defaultValue="lucy" style={{ width: 200 }} onChange={handleSelectChange}>
        <Option value="jack">jack</Option>
        <Option value="lucy">lucy</Option>
@@ -52,30 +49,27 @@ ReactDOM.render(
    </FormItem>

    <FormItem
-      label="Checkbox 多选框"
+      label="Checkbox 多选框："
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
-    >
+      wrapperCol={{ span: 18 }} >
      <Checkbox className="ant-checkbox-vertical">选项一</Checkbox>
      <Checkbox className="ant-checkbox-vertical">选项二</Checkbox>
      <Checkbox className="ant-checkbox-vertical" disabled>选项三（不可选）</Checkbox>
    </FormItem>

    <FormItem
-      label="Checkbox 多选框"
+      label="Checkbox 多选框："
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
-    >
+      wrapperCol={{ span: 18 }} >
      <Checkbox className="ant-checkbox-inline">选项一</Checkbox>
      <Checkbox className="ant-checkbox-inline">选项二</Checkbox>
      <Checkbox className="ant-checkbox-inline">选项三</Checkbox>
    </FormItem>

    <FormItem
-      label="Radio 单选框"
+      label="Radio 单选框："
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 18 }}
-    >
+      wrapperCol={{ span: 18 }} >
      <RadioGroup defaultValue="b">
        <Radio value="a">A</Radio>
        <Radio value="b">B</Radio>
--- a/components/form/demo/form-in-modal.md
+++ b/components/form/demo/form-in-modal.md
@@ -42,14 +42,12 @@ let Demo = React.createClass({
          <Form horizontal form={this.props.form}>
            <FormItem
              {...formItemLayout}
-              label="用户名"
-            >
+              label="用户名：">
              <Input {...getFieldProps('username', {})} type="text" autoComplete="off" />
            </FormItem>
            <FormItem
              {...formItemLayout}
-              label="密码"
-            >
+              label="密码：">
              <Input {...getFieldProps('password', {})} type="password" autoComplete="off" />
            </FormItem>
          </Form>
--- a/components/form/demo/horizontal-form.md
+++ b/components/form/demo/horizontal-form.md
@@ -26,20 +26,17 @@ let Demo = React.createClass({
      <Form horizontal onSubmit={this.handleSubmit}>
        <FormItem
          {...formItemLayout}
-          label="用户名"
-        >
+          label="用户名：">
          <p className="ant-form-text" id="userName" name="userName">大眼萌 minion</p>
        </FormItem>
        <FormItem
          {...formItemLayout}
-          label="密码"
-        >
+          label="密码：">
          <Input type="password" {...getFieldProps('pass')} placeholder="请输入密码" />
        </FormItem>
        <FormItem
          {...formItemLayout}
-          label="您的性别"
-        >
+          label="您的性别：">
          <RadioGroup {...getFieldProps('gender', { initialValue: 'female' })}>
            <Radio value="male">男的</Radio>
            <Radio value="female">女的</Radio>
@@ -47,15 +44,13 @@ let Demo = React.createClass({
        </FormItem>
        <FormItem
          {...formItemLayout}
-          label="备注"
-          help="随便写点什么"
-        >
+          label="备注："
+          help="随便写点什么">
          <Input type="textarea" placeholder="随便写" {...getFieldProps('remark')} />
        </FormItem>
        <FormItem
          {...formItemLayout}
-          label={<span>卖身华府 <Tooltip title="我为秋香"><Icon type="question-circle-o" /></Tooltip></span>}
-        >
+          label={<span>卖身华府 <Tooltip title="我为秋香"><Icon type="question-circle-o" /></Tooltip> ：</span>}>
          <Checkbox {...getFieldProps('agreement')}>同意</Checkbox>
        </FormItem>
        <FormItem wrapperCol={{ span: 16, offset: 6 }} style={{ marginTop: 24 }}>
--- a/components/form/demo/inline-form.md
+++ b/components/form/demo/inline-form.md
@@ -20,18 +20,14 @@ let Demo = React.createClass({
    return (
      <Form inline onSubmit={this.handleSubmit}>
        <FormItem
-          label="账户"
-        >
+          label="账户：">
          <Input placeholder="请输入账户名"
-            {...getFieldProps('userName')}
-          />
+            {...getFieldProps('userName')} />
        </FormItem>
        <FormItem
-          label="密码"
-        >
+          label="密码：">
          <Input type="password" placeholder="请输入密码"
-            {...getFieldProps('password')}
-          />
+            {...getFieldProps('password')} />
        </FormItem>
        <FormItem>
          <Checkbox {...getFieldProps('agreement')}>记住我</Checkbox>
--- a/components/form/demo/input-group.md
+++ b/components/form/demo/input-group.md
@@ -11,47 +11,44 @@ const FormItem = Form.Item;
 const InputGroup = Input.Group;
 const Option = Select.Option;

-const selectAfter = (
-  <Select defaultValue=".com" style={{ width: 70 }}>
-    <Option value=".com">.com</Option>
-    <Option value=".jp">.jp</Option>
-    <Option value=".cn">.cn</Option>
-    <Option value=".org">.org</Option>
-  </Select>
-);
-
 ReactDOM.render(
  <Form horizontal>
    <FormItem
-      label="标签输入框"
+      label="标签输入框："
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 16 }}
-    >
+      wrapperCol={{ span: 16 }}>
      <Input addonBefore="Http://" defaultValue="mysite.com" id="site1" />
    </FormItem>

    <FormItem
-      label="标签输入框"
+      label="标签输入框："
      labelCol={{ span: 6 }}
      validateStatus="success"
-      wrapperCol={{ span: 16 }}
-    >
+      wrapperCol={{ span: 16 }}>
      <Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" id="site2" />
    </FormItem>

    <FormItem
-      label="select 标签输入框"
+      label="select 标签输入框："
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 16 }}
-    >
-      <Input addonAfter={selectAfter} placeholder="www.mysite" id="site4" />
+      wrapperCol={{ span: 16 }}>
+      <InputGroup>
+        <Input id="site4" placeholder="www.mysite" />
+        <div className="ant-input-group-wrap">
+          <Select defaultValue=".com" style={{ width: 70 }}>
+            <Option value=".com">.com</Option>
+            <Option value=".jp">.jp</Option>
+            <Option value=".cn">.cn</Option>
+            <Option value=".org">.org</Option>
+          </Select>
+        </div>
+      </InputGroup>
    </FormItem>

    <FormItem
-      label="输入身份证"
+      label="输入身份证："
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 16 }}
-    >
+      wrapperCol={{ span: 16 }}>
      <InputGroup>
        <Col span="6">
          <Input id="certNo1" />
@@ -69,10 +66,9 @@ ReactDOM.render(
    </FormItem>

    <FormItem
-      label="电话号码"
+      label="电话号码："
      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 16 }}
-    >
+      wrapperCol={{ span: 16 }}>
      <InputGroup>
        <Col span="4">
          <Input id="tel1" defaultValue="086" />
--- a/components/form/demo/mix.md
+++ b/components/form/demo/mix.md
@@ -44,21 +44,18 @@ let Demo = React.createClass({
    return (
      <Form horizontal onSubmit={this.handleSubmit} >
        <FormItem
-          label="InputNumber 数字输入框"
+          label="InputNumber 数字输入框："
          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 10 }}
-        >
+          wrapperCol={{ span: 10 }}>
          <InputNumber min={1} max={10} style={{ width: 100 }}
-            {...getFieldProps('inputNumber', { initialValue: 3 })}
-          />
+            {...getFieldProps('inputNumber', { initialValue: 3 })} />
          <span className="ant-form-text"> 台机器</span>
        </FormItem>

        <FormItem
-          label="我是标题"
+          label="我是标题："
          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 10 }}
-        >
+          wrapperCol={{ span: 10 }}>
          <p className="ant-form-text" id="static" name="static">唧唧复唧唧木兰当户织呀</p>
          <p className="ant-form-text">
            <a href="#">链接文字</a>
@@ -66,32 +63,28 @@ let Demo = React.createClass({
        </FormItem>

        <FormItem
-          label="Switch 开关"
+          label="Switch 开关："
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 10 }}
-          required
-        >
+          required>
          <Switch {...getFieldProps('switch', { valuePropName: 'checked' })} />
        </FormItem>

        <FormItem
-          label="Slider 滑动输入条"
+          label="Slider 滑动输入条："
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 10 }}
-          required
-        >
+          required>
          <Slider marks={['A', 'B', 'C', 'D', 'E', 'F', 'G']} {...getFieldProps('slider')} />
        </FormItem>

        <FormItem
-          label="Select 选择器"
+          label="Select 选择器："
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
-          required
-        >
+          required>
          <Select style={{ width: 200 }}
-            {...getFieldProps('select')}
-          >
+            {...getFieldProps('select')}>
            <Option value="jack">jack</Option>
            <Option value="lucy">lucy</Option>
            <Option value="disabled" disabled>disabled</Option>
@@ -100,20 +93,18 @@ let Demo = React.createClass({
        </FormItem>

        <FormItem
-          label="级联选择"
+          label="级联选择："
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          required
-          hasFeedback
-        >
+          hasFeedback>
          <Cascader style={{ width: 200 }} options={areaData} {...getFieldProps('area')} />
        </FormItem>

        <FormItem
-          label="DatePicker 日期选择框"
+          label="DatePicker 日期选择框："
          labelCol={{ span: 8 }}
-          required
-        >
+          required>
          <Col span="6">
            <FormItem>
              <DatePicker {...getFieldProps('startDate')} />
@@ -131,18 +122,16 @@ let Demo = React.createClass({


        <FormItem
-          label="TimePicker 时间选择器"
+          label="TimePicker 时间选择器："
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
-          required
-        >
+          required>
          <TimePicker {...getFieldProps('time')} />
        </FormItem>

        <FormItem
-          label="选项"
-          labelCol={{ span: 8 }}
-        >
+          label="选项："
+          labelCol={{ span: 8 }}>
          <RadioGroup {...getFieldProps('rg')}>
            <RadioButton value="a">选项一</RadioButton>
            <RadioButton value="b">选项二</RadioButton>
@@ -151,11 +140,10 @@ let Demo = React.createClass({
        </FormItem>

        <FormItem
-          label="logo图"
+          label="logo图："
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
-          help="提示信息要长长长长长长长长长长长长长长"
-        >
+          help="提示信息要长长长长长长长长长长长长长长">
          <Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}
            {...getFieldProps('upload', {
              valuePropName: 'fileList',
--- a/components/form/demo/validate-basic.md
+++ b/components/form/demo/validate-basic.md
@@ -112,45 +112,38 @@ let BasicDemo = React.createClass({
      <Form horizontal form={this.props.form}>
        <FormItem
          {...formItemLayout}
-          label="用户名"
+          label="用户名："
          hasFeedback
-          help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}
-        >
+          help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}>
          <Input {...nameProps} placeholder="实时校验，输入 JasonWood 看看" />
        </FormItem>

        <FormItem
          {...formItemLayout}
-          label="邮箱"
-          hasFeedback
-        >
+          label="邮箱："
+          hasFeedback>
          <Input {...emailProps} type="email" placeholder="onBlur 与 onChange 相结合" />
        </FormItem>

        <FormItem
          {...formItemLayout}
-          label="密码"
-          hasFeedback
-        >
+          label="密码："
+          hasFeedback>
          <Input {...passwdProps} type="password" autoComplete="off"
-            onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
-          />
+            onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
        </FormItem>

        <FormItem
          {...formItemLayout}
-          label="确认密码"
-          hasFeedback
-        >
+          label="确认密码："
+          hasFeedback>
          <Input {...rePasswdProps} type="password" autoComplete="off" placeholder="两次输入密码保持一致"
-            onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
-          />
+            onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
        </FormItem>

        <FormItem
          {...formItemLayout}
-          label="备注"
-        >
+          label="备注：">
          <Input {...textareaProps} type="textarea" placeholder="随便写" id="textarea" name="textarea" />
        </FormItem>

--- a/components/form/demo/validate-customized.md
+++ b/components/form/demo/validate-customized.md
@@ -145,8 +145,7 @@ let Demo = React.createClass({
            <Col span="18">
              <FormItem
                {...formItemLayout}
-                label="密码"
-              >
+                label="密码：">
                <Input {...passProps} type="password"
                  onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                  autoComplete="off" id="pass"
@@ -162,8 +161,7 @@ let Demo = React.createClass({
            <Col span="18">
              <FormItem
                {...formItemLayout}
-                label="确认密码"
-              >
+                label="确认密码：">
                <Input {...rePassProps} type="password"
                  onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                  autoComplete="off" id="rePass"
--- a/components/form/demo/validate-other.md
+++ b/components/form/demo/validate-other.md
@@ -6,7 +6,7 @@ title: 校验其他组件
 提供以下组件表单域的校验：`Select` `Radio` `DatePicker` `InputNumber` `Cascader`。在 submit 时使用 `validateFieldsAndScroll`，进行校验，可以自动把不在可见范围内的校验不通过的菜单域滚动进可见范围。

 ````jsx
-import { Select, Radio, Checkbox, Button, DatePicker, TimePicker, InputNumber, Form, Cascader, Icon } from 'antd';
+import { Select, Radio, Checkbox, Button, DatePicker, InputNumber, Form, Cascader, Icon } from 'antd';
 const Option = Select.Option;
 const RadioGroup = Radio.Group;
 const createForm = Form.create;
@@ -84,18 +84,12 @@ let Demo = React.createClass({
        {
          required: true,
          type: 'date',
-          message: '你的生日是什么呢？',
+          message: '你的生日是什么呢?',
        }, {
          validator: this.checkBirthday,
        },
      ],
    });
-    const timeProps = getFieldProps('time', {
-      getValueFromEvent: (value, timeString) => timeString,
-      rules: [
-        { required: true, message: '请选择一个时间' },
-      ],
-    });
    const primeNumberProps = getFieldProps('primeNumber', {
      rules: [{ validator: this.checkPrime }],
    });
@@ -110,8 +104,7 @@ let Demo = React.createClass({
      <Form horizontal form={this.props.form}>
        <FormItem
          {...formItemLayout}
-          label="国籍"
-        >
+          label="国籍：">
          <Select {...selectProps} placeholder="请选择国家" style={{ width: '100%' }}>
            <Option value="china">中国</Option>
            <Option value="use">美国</Option>
@@ -123,8 +116,7 @@ let Demo = React.createClass({

        <FormItem
          {...formItemLayout}
-          label="喜欢的颜色"
-        >
+          label="喜欢的颜色：">
          <Select {...multiSelectProps} multiple placeholder="请选择颜色" style={{ width: '100%' }}>
            <Option value="red">红色</Option>
            <Option value="orange">橙色</Option>
@@ -136,8 +128,7 @@ let Demo = React.createClass({

        <FormItem
          {...formItemLayout}
-          label="性别"
-        >
+          label="性别：">
          <RadioGroup {...radioProps}>
            <Radio value="male">男</Radio>
            <Radio value="female">女</Radio>
@@ -147,8 +138,7 @@ let Demo = React.createClass({

        <FormItem
          {...formItemLayout}
-          label="兴趣爱好"
-        >
+          label="兴趣爱好：">
          <Checkbox {...getFieldProps('eat', {
            valuePropName: 'checked',
          })}>吃饭饭</Checkbox>
@@ -162,35 +152,24 @@ let Demo = React.createClass({

        <FormItem
          {...formItemLayout}
-          label="生日"
-        >
+          label="生日：">
          <DatePicker {...birthdayProps} />
        </FormItem>

        <FormItem
          {...formItemLayout}
-          label="选一个时间"
-        >
-          <TimePicker {...timeProps} />
-        </FormItem>
-
-        <FormItem
-          {...formItemLayout}
-          label="8~12间的质数"
-        >
+          label="8~12间的质数：">
          <InputNumber {...primeNumberProps} min={8} max={12} />
        </FormItem>

        <FormItem
          {...formItemLayout}
-          label="选择地址"
-        >
+          label="选择地址：">
          <Cascader {...addressProps} options={address} />
        </FormItem>

        <FormItem
-          wrapperCol={{ span: 12, offset: 7 }}
-        >
+          wrapperCol={{ span: 12, offset: 7 }} >
          <Button type="primary" onClick={this.handleSubmit}>确定</Button>
          &nbsp;&nbsp;&nbsp;
          <Button type="ghost" onClick={this.handleReset}>重置</Button>
--- a/components/form/demo/validate-static.md
+++ b/components/form/demo/validate-static.md
@@ -18,71 +18,64 @@ const FormItem = Form.Item;
 ReactDOM.render(
  <Form horizontal>
    <FormItem
-      label="失败校验"
+      label="失败校验："
      labelCol={{ span: 5 }}
      wrapperCol={{ span: 12 }}
      validateStatus="error"
-      help="请输入数字和字母组合"
-    >
+      help="请输入数字和字母组合">
      <Input defaultValue="无效选择" id="error" />
    </FormItem>

    <FormItem
-      label="警告校验"
+      label="警告校验："
      labelCol={{ span: 5 }}
      wrapperCol={{ span: 12 }}
-      validateStatus="warning"
-    >
+      validateStatus="warning">
      <Input defaultValue="前方高能预警" id="warning" />
    </FormItem>

    <FormItem
-      label="校验中"
+      label="校验中："
      labelCol={{ span: 5 }}
      wrapperCol={{ span: 12 }}
      hasFeedback
      validateStatus="validating"
-      help="信息审核中..."
-    >
+      help="信息审核中...">
      <Input defaultValue="我是被校验的内容" id="validating" />
    </FormItem>

    <FormItem
-      label="成功校验"
+      label="成功校验："
      labelCol={{ span: 5 }}
      wrapperCol={{ span: 12 }}
      hasFeedback
-      validateStatus="success"
-    >
+      validateStatus="success">
      <Input defaultValue="我是正文" id="success" />
    </FormItem>

    <FormItem
-      label="警告校验"
+      label="警告校验："
      labelCol={{ span: 5 }}
      wrapperCol={{ span: 12 }}
      hasFeedback
-      validateStatus="warning"
-    >
+      validateStatus="warning">
      <Input defaultValue="前方高能预警" id="warning" />
    </FormItem>

    <FormItem
-      label="失败校验"
+      label="失败校验："
      labelCol={{ span: 5 }}
      wrapperCol={{ span: 12 }}
      hasFeedback
      validateStatus="error"
-      help="请输入数字和字母组合"
-    >
+      help="请输入数字和字母组合">
      <Input defaultValue="无效选择" id="error" />
    </FormItem>

    <FormItem
-      label="行内校验"
+      label="行内校验："
      labelCol={{ span: 5 }}
-      help
-    >
+      help>
      <Col span="6">
        <FormItem validateStatus="error" help="请选择正确日期">
          <DatePicker />
--- a/components/form/index.md
+++ b/components/form/index.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 chinese: 表单
-type: Form Controls
+type: Form Control
 cols: 1
 english: Form
 ---
@@ -34,7 +34,7 @@ english: Form

 ### Form

-**更多示例参考 [rc-form](http://react-component.github.io/form/)**。
+更多示例参考 [rc-form](http://react-component.github.io/form/)。

 | 参数      | 说明                                     | 类型       | 默认值 |
 |-----------|------------------------------------------|------------|-------|
@@ -76,9 +76,9 @@ CustomizedForm = Form.create({})(CustomizedForm);
 | resetFields | 重置一组输入控件的值与状态，如不传入参数，则重置所有组件 | Function([names: string[]]) |
 | getFieldProps | 用于和表单进行双向绑定，详见下方描述 | |

-### this.props.form.getFieldProps(id, options)
+#### this.props.form.getFieldProps(id, options)

-#### 特别注意
+##### 特别注意

 `getFieldProps` 调用不能位于纯函数组件中: https://github.com/facebook/react/pull/6534

@@ -86,19 +86,15 @@ CustomizedForm = Form.create({})(CustomizedForm);

 > 在表单中 `defaultValue` 也不应该被设置，请使用下面的 `initialValue`。

-#### getFieldProps options
-
-| 参数      | 说明                                     | 类型 | 默认值 |
+| 参数      | 说明                                     | 类型 |默认值 |
 |-----------|-----------------------------------------|-----|--------|
 | options.id | 必填输入控件唯一标志 | string | |
 | options.valuePropName | 子节点的值的属性，如 Switch 的是 'checked' | string | 'value' |
 | options.initialValue | 子节点的初始值，类型、可选值均由子节点决定  | | |
 | options.trigger | 收集子节点的值的时机 | string | 'onChange' |
-| options.getValueFromEvent | 可以把 onChange 的参数转化为控件的值，例如 DatePicker 可设为：`(date, dateString) => dateString` | function(..args) | [reference](https://github.com/react-component/form#optiongetvaluefromevent) |
 | options.validateTrigger | 校验子节点值的时机 | string | 'onChange' |
 | options.rules | 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) | array | |
 | options.onXXX | 由于 `getFieldProps` 会占用 `onChange` 等事件（即你所设置的 `trigger` `validateTrigger`），所以如果仍需绑定事件，请在 `options` 内设置 | function | 无 |
-| options.exclusive | 是否和其他控件互斥，特别用于 Radio 单选控件 | boolean | false |

 ### Form.Item

@@ -116,6 +112,7 @@ CustomizedForm = Form.create({})(CustomizedForm);
 | hasFeedback | 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | bool |  | false  |
 | prefixCls | 样式类名，默认为 ant-form，通常您不需要设置 | string |  |  'ant-form' |

+
 <style>
 .code-box-demo .ant-form-horizontal {
  max-width: 540px;
--- a/components/form/style/index.less
+++ b/components/form/style/index.less
@@ -84,13 +84,11 @@ input[type="checkbox"] {
    color: @label-color;
    text-align: right;
    vertical-align: middle;
-    padding: 7px 0;
+    padding-top: 7px;
+    padding-bottom: 7px;

-    &:after {
-      content: ":";
-      margin: 0 8px 0 2px;
-      position: relative;
-      top: -0.5px;
+    &:lang(en) {
+      padding-right: 8px;
    }
  }

@@ -161,11 +159,6 @@ form {
    display: block;
  }

-  .ant-checkbox-vertical + .ant-checkbox-vertical,
-  .ant-radio-vertical + .ant-radio-vertical {
-    margin-left: 0;
-  }
-
  .ant-input-number {
    margin-top: -1px;
    margin-right: 8px;
@@ -274,7 +267,7 @@ form {
    visibility: visible;
    font-family: "anticon" !important;
    .square(@input-height-lg);
-    line-height: @input-height-lg;
+    line-height: @input-height-lg + 2;
    text-align: center;
    font-size: 14px;
    animation: zoomIn .3s @ease-out-back;
@@ -399,7 +392,7 @@ form {
  }
 }

-.ant-advanced-search-form {
+.advanced-search-form {
  .@{form-prefix-cls}-item {
    margin-bottom: 16px;
  }
--- a/components/icon/index.jsx
+++ b/components/icon/index.jsx
@@ -3,5 +3,5 @@ import React from 'react';
 export default props => {
  let { type, className = '', ...other } = props;
  className += ` anticon anticon-${type}`;
-  return <i className={className.trim()} {...other} />;
+  return <i className={className} {...other} />;
 };
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
RaoHai	cb5b6543c4	version to 1.2.1	2016-05-27 18:04:57 +08:00
Benjy Cui	6a7c74fce9	fix: hide mirror	2016-05-27 18:04:27 +08:00