Merge branch 'master' of gitlab.alipay-inc.com:react-ui/ant-design

2024-12-12 15:19:58 +08:00 · 2016-03-15 10:06:02 +08:00 · 2016-03-15 10:06:02 +08:00 · 863ecbd6d4
commit 863ecbd6d4
parent d3a592764c f35a81a862
461 changed files with 10843 additions and 7402 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -1,45 +0,0 @@
-{
-  "extends": ["eslint-config-airbnb"],
-  "env": {
-    "browser": true,
-    "node": true,
-    "mocha": true,
-    "jest": true,
-    "es6": true
-  },
-  "ecmaFeatures": {
-    "jsx": true,
-    "experimentalObjectRestSpread": true
-  },
-  "plugins": [
-    "markdown-antd",
-    "react",
-    "babel"
-  ],
-  "rules": {
-    "constructor-super": 2,
-    "comma-dangle": 0,
-    "func-names": 0,
-    "guard-for-in": 0,
-    "one-var": [2, { "initialized": "never" }],
-    "prefer-const": 0,
-    "key-spacing": 0,
-    "no-eq-null": 0,
-    "no-else-return": 0,
-    "no-param-reassign": 0,
-    "no-this-before-super": 2,
-    "no-undef": 2,
-    "babel/object-shorthand": 0,
-    "react/jsx-no-duplicate-props": 2,
-    "react/sort-comp": 0,
-    "react/wrap-multilines": 0,
-    "react/no-multi-comp": 0,
-    "react/prop-types": 0,
-    "space-after-keywords": 0,
-    "space-before-blocks": 0,
-    "space-before-function-paren": 0,
-    "spaced-comment": 0,
-    "vars-on-top": 0,
-    "id-length": 0
-  }
-}
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -0,0 +1,39 @@
+{
+  "extends": ["eslint-config-airbnb"],
+  "env": {
+    "browser": true,
+    "node": true,
+    "mocha": true,
+    "jest": true,
+    "es6": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "ecmaFeatures": {
+      "jsx": true,
+      "experimentalObjectRestSpread": true
+    }
+  },
+  "plugins": [
+    "markdown",
+    "react",
+    "babel"
+  ],
+  "rules": {
+    "comma-dangle": 0,
+    "func-names": 0,
+    "prefer-const": 0,
+    "arrow-body-style": 0,
+    "react/sort-comp": 0,
+    "react/no-multi-comp": 0,
+    "react/prop-types": 0,
+    "react/prefer-es6-class": 0,
+    "react/prefer-stateless-function": 0,
+    "react/jsx-closing-bracket-location": 0,
+    "react/jsx-no-bind": 0,
+    "no-param-reassign": 0,
+    "no-return-assign": 0,
+    "max-len": 0,
+    "consistent-return": 0
+  }
+}
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@ -0,0 +1,56 @@
+# Contributing to Ant Design
+
+The following is a set of guidelines for contributing to Ant Design. Please spend several minutes in reading these guidelines before you create an issue or pull request.
+
+Anyway, these are just guidelines, not rules, use your best judgment and feel free to propose changes to this document in a pull request.
+
+
+## Do your homework before asking a question
+
+It's a great idea to read Eric Steven Raymond's [How To Ask Questions The Smart Way](http://www.catb.org/esr/faqs/smart-questions.html) twice before asking a question. But if you are busy now, I recommend to read [Don't post homework questions](http://www.catb.org/esr/faqs/smart-questions.html#homework) first.
+
+The following guidelines are about *How to avoid Homework Questions*.
+
+### 1. Read the documentation.
+
+It sad but true that someone just glance(not read) [Ant Design's documentation](http://ant.design/). Please read the documentation closely. What's more, you can modify and run our demo with [CodePen](http://codepen.io/anon/pen/pgdXYp?editors=001). It's helpful to understand our documentation.
+
+Tips: choose the corresponding documentation with versions selector which in the bottom-right corner.
+
+### 2. Make sure that your question is about Ant Design, not React
+
+Someone may think all of the questions that he/she meets in developing are about Ant Design, but it's not true. So, please read [React's documentaion](http://facebook.github.io/react/docs/getting-started.html) or just Google(not Baidu, seriously) your questions with keywork *React* first. If you are sure that your question is about Ant Design, go ahead.
+
+### 3. Read the FAQ and search the issues list of Ant Design
+
+Your questions may be asked and solved by others. So please spend several minutes on searching. Remember [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself), both code and questions.
+
+P.S.
+
+1. [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
+1. [Issues list](https://github.com/ant-design/ant-design/issues)
+
+## Close your issue if it's solved
+
+It is a good habit which will save maintainers' time. Thank you!
+
+## Providing a demo while reporting a bug
+
+It would be helpful to provide a demo which can re-produce the bug 100%. Please fork this [CodePen](http://codepen.io/anon/pen/pgdXYp?editors=001) and re-produce the bug you met. Then, create an issue. The most important thing is: double check before claiming that you have found a bug.
+
+
+## Tips about Feature Request
+
+If you believe that Ant Design should provide some features, but it does not. You could create an issue to discuss. However, Ant Design is not Swiss Army Knife, there are some features which Ant Design will not support:
+
+1. Request or operate data
+
+
+## Tips about Pull Request
+
+It's welcomed to pull request. And there are some tips about that:
+
+1. It is a good habit to create a feature request issue to disscuss whether the feature is necessary before you implement it. However, it's unnecessary to create an issue to claim that you found a typo or improved the readability of documentaion, just create a pull request.
+1. Run `npm run lint` and fix those errors before committing in order to keep consistent code style.
+1. Rebase before creating a PR to keep commit history clear.
+1. Add some descriptions and refer relative issues for you PR.
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@ -0,0 +1,25 @@
+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/pgdXYp?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)):
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -0,0 +1,7 @@
+First of all, thanks for your contribution! :-)
+
+Please makes sure these boxes are checked before submitting your PR, thank you!
+
+[ ] Run `npm run lint` and fix those errors before submitting in order to keep consistent code style.
+[ ] Rebase before creating a PR to keep commit history clear.
+[ ] Add some descriptions and refer relative issues for you PR.
--- a/.si.yml
+++ b/.si.yml
@ -1,6 +1,6 @@
 before_deploy:
  - tnpm install && tnpm update
-  - tnpm run just-deploy
+  - tnpm run site
 options:
  branch: 'master'
  dist: '_site'
--- a/.travis.yml
+++ b/.travis.yml
@ -1,4 +1,7 @@
+sudo: false
+
 language: node_js

 node_js:
  - "4"
+  - "5"
--- a/AUTHORS.txt
+++ b/AUTHORS.txt
@ -0,0 +1,54 @@
+Benjy Cui <benjytrys@gmail.com>
+Bozhao <yubz86@gmail.com>
+Cam Song <neosoyn@gmail.com>
+Cee Cirno <i@cee.moe>
+Daqi Song <dqaria@gmail.com>
+Emma <sima.zhang1990@gmail.com>
+Eward Song <eward.song@gmail.com>
+Guan Hao <raptium@gmail.com>
+Haibin Yu <haibin.yu@oceanwing.com>
+Hanai <ihanai1991@gmail.com>
+James <james@schoolshape.com>
+KgTong <kgtong1992@gmail.com>
+Leon Shi <superRaytin@163.com>
+MG12 <wuzhao.mail@gmail.com>
+Neverland <chenjiahan@buaa.edu.cn>
+Pyiner <lijiuyang1992@gmail.com>
+RaoHai <surgesoft@gmail.com>
+SimaQ <sima.zhang1990@gmail.com>
+The Gitter Badger <badger@gitter.im>
+Yuwei Ba <i@xiaoba.me>
+Zap <a124116186@qq.com>
+afc163 <afc163@gmail.com>
+chencheng (云谦) <sorrycc@gmail.com>
+elrrrrrrr <elrrrrrrr@gmail.com>
+genie <genie88@163.com>
+haoxin <coderhaoxin@outlook.com>
+ioldfish <fish.wangl@gmail.com>
+jiang <155259966@qq.com>
+kasinooya <kasinooya@gmail.com>
+leon.shi <superRaytin@163.com>
+lgmcolin <gengmin.lgm@gmail.com>
+lgmcolin <lgmcolin@gmail.com>
+pizn <pizner@gmail.com>
+popomore <sakura9515@gmail.com>
+shelwin <wxfans@gmail.com>
+shouyong <enlangs@163.com>
+simaQ <sima.zhang1990@gmail.com>
+sorrycc <sorrycc@gmail.com>
+tom <caolvchong@gmail.com>
+ustccjw <317713370@qq.com>
+warmhug <hualei5280@gmail.com>
+xiaoshuai <tangshuaiji@tangshuaijideMacBook-Pro.local>
+yiminghe <yiminghe@gmail.com>
+yubozhao <yubz86@gmail.com>
+yuche <i@yuche.me>
+zhangpc <zhangpc@tenxcloud.com>
+zhujun24 <zhujun87654321@gmail.com>
+zilong <jzlxiaohei@163.com>
+zinkey <yaya@uloveit.com.cn>
+低位 <zhujun87654321@gmail.com>
+偏右 <afc163@gmail.com>
+唐帅佶 <tangshuaiji@tangshuaijideMacBook-Pro.local>
+白羊座小葛 <abeyuhang@gmail.com>
+逸达 <dqaria@gmail.com>
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,15 +4,209 @@

 ---

-## 0.11.0 `2015-12-25`
+## 0.12.8

- 移除默认加载的样式文件，样式现在需要独立加载。
+`2016-03-06`
+
+- 新增 `heart` `calculator` 图标。
+- Table 补充了 `showHeader` 和 `footer` 属性。
+- Modal 补充了 `maskClosable` 属性。
+- 修正一个 Tag 和 Popover 配合使用的问题。[#1111](https://github.com/ant-design/ant-design/issues/1111)
+- 将 TreeSelect 的 `treeDefaultExpandAll` 默认属性设为 false，并优化了性能。
+- 修复 RadioGroup 无法垂直布局的问题。[#1119](https://github.com/ant-design/ant-design/issues/1119)
+- 统一了 less 文件的部分变量。
+- 修正部分组件的样式。
+
+## 0.12.7
+
+`2016-03-03`
+
+- 修正 Table 的 `rowSelect.onSelectAll` 的第三个参数 `deselectedRows` 为 `changeRows`，记录每次变化的列。
+
+## 0.12.6
+
+`2016-03-02`
+
+- 优化 Table 本地排序在 Chrome 下的稳定性问题。
+- 修正 Pagination 的 pageSize 属性为受控属性，并补充了 `defaultPageSize` 属性。[#1087](https://github.com/ant-design/ant-design/issues/1087)
+- 优化 Select 的 combobox 模式的交互体验。
+- 升级 react-slick 依赖到 `0.11`，修复自动播放有时会失效的问题。[#1009](https://github.com/ant-design/ant-design/issues/1009)
+- 修复 TreeSelect 的 allowClear 属性失效的问题。[#1084](https://github.com/ant-design/ant-design/issues/1084)
+- 修复 Input 组件的 className 属性失效的问题。[#1103](https://github.com/ant-design/ant-design/issues/1103)
+- 修复 Dropdown 的 onClick 属性失效的问题。[#1097](https://github.com/ant-design/ant-design/issues/1097)
+- 修复多个 CheckboxGroup 选项互相影响的问题。[#1101](https://github.com/ant-design/ant-design/pull/1101)
+- 修复 FormItem 的子元素为 `null` 时报错的问题。
+- 修复 Table 组件的选择功能和展开功能配合使用的问题。[#1102](https://github.com/ant-design/ant-design/issues/1102)
+- 增加了一个搜索框和提示功能结合的 [例子](http://ant.design/components/select/#demo-search-box)。
+- 允许可编辑的 Tabs 删除最后一个页签。[#1071](https://github.com/ant-design/ant-design/issues/1071)
+- Table 的 `rowSelect.onSelectAll` 补充了第三个参数 `deselectedRows`, `rowSelect.onChange` 补充了第二个参数 `selectedRows`。[#1105](https://github.com/ant-design/ant-design/issues/1105)
+- 修正部分组件的样式。
+
+## 0.12.5
+
+`2016-02-25`
+
+- Pagination 支持 `showTotal` 属性。[#1077](https://github.com/ant-design/ant-design/pull/1077)
+- Cascader 添加 `allowClear` 属性，允许隐藏清除按钮。
+- 补充了一个带图标的搜索建议框的例子。[#1067](https://github.com/ant-design/ant-design/issues/1067)
+- 修复 Transfer 在不支持 Object.assign 的浏览器上报错的问题。
+- 修复 Cascader 在 Safari 下错位的问题。[#1066](https://github.com/ant-design/ant-design/issues/1066)
+- 移除对 Button 圆角的降级方案。
+- 修复了部分组件样式的小问题。
+
+## 0.12.4
+
+`2016-02-22`
+
+- Radio 的 value 支持更多类型。[#1043](https://github.com/ant-design/ant-design/pull/1043)
+- 修复 Spin 组件的大小、居中等样式问题。
+- FormItem 补充 extra 属性的文档。[#931](https://github.com/ant-design/ant-design/issues/931)
+- 修复的 Table 下树形数据和选择框配合时的样式问题。
+- 修复一个水平表单的错误提示的样式错位问题。[#1040](https://github.com/ant-design/ant-design/issues/1040)
+- 添加了一个轻微的 Button 点击动效。
+
+## 0.12.3
+
+`2016-02-19`
+
+- DatePicker 补充 allowClear 属性，支持单选的清空。
+- 修复显示时间的 DatePicker 的清空按钮失效的问题。
+- 优化 DatePicker 的 `确定` 按钮失效样式。
+
+## 0.12.2
+
+`2016-02-19`
+
+- DatePicker 如果有 `确定` 按钮，现在只有点击 `确定` 按钮才会触发 onChange 事件。
+- 修复带时间选择的 DatePicker 日期格式缺少时间部分的问题。[#1005](https://github.com/ant-design/ant-design/issues/1005)
+- 修复 DatePicker 内输入框多余的时间展示的问题。[#953](https://github.com/ant-design/ant-design/issues/953)
+- 升级依赖 react-slick 到 `0.10`。
+- 支持表单校验错误时自动滚动到第一个错误项。[#993](https://github.com/ant-design/ant-design/issues/993)
+- 优化了 Select 和 TreeSelect 多选禁用的样式。
+- Upload 列表项支持链接展现形式。[#1013](https://github.com/ant-design/ant-design/issues/1013)
+- 修复 Safari 下的样式警告信息。[#999](https://github.com/ant-design/ant-design/issues/999)
+- Cascader 支持 popupPlacement 位置配置。
+
+## 0.12.1
+
+`2016-02-03`
+
+- 依赖升级到 `rc-pagination@1.4`、`rc-menu@4.10`、`rc-form@0.12`。
+- 修复 TreeSelect 的不可用样式。
+- DatePicker 补充 `getCalendarContainer` 属性，用于解决问题 [#991](https://github.com/ant-design/ant-design/issues/991)。
+- 修正 Modal `onCancel` 的参数为点击事件。[#980](https://github.com/ant-design/ant-design/issues/980)
+- 修复一个 Tooltip 内嵌套 Popconfirm 的问题。[#977](https://github.com/ant-design/ant-design/issues/977)
+- 修复 DatePicker 和 RangePicker 的 `onOk` 一直不可用的问题。
+- 修复一个 Badge 的 count 无法切换的问题。[#983](https://github.com/ant-design/ant-design/issues/983)
+
+## 0.12.0
+
+`2016-02-01`
+
+- 新增 [级联选择(Cascader)](http://ant.design/components/cascader/) 组件。
+- 新增 [树选择控件(TreeSelect)](http://ant.design/components/tree-select/) 组件。
+- Form 自身支持校验功能，废弃 Validation。[演示](http://ant.design/components/form/#demo-validate-basic)
+- Tabs
+  - `activeKey` 修正为受控属性。
+  - 当前项现在会始终显示。[#815](https://github.com/ant-design/ant-design/issues/815)
+- Modal 可以配置右上关闭按钮是否显示。
+- Select
+  - 打开选项菜单时，自动滚动到选中项。
+  - `combobox` 模式时，可配置是否默认选中第一项。[rc-select#38](https://github.com/react-component/select/issues/38)
+- Table
+  - filter 支持层级选择。
+  - 支持行点击事件 `onRowClick`。
+  - 支持多列的横向切换。[演示](http://ant.design/components/table/#demo-paging-columns)
+  - 更换 `dataSource` 和变换页面时不再默认清除选择数据，你可以用 `selectedRowKeys` 手动控制。`原来默认清除的行为会触发一个数据更新的死循环，而且难以实现跨页选择。`
+  - 支持固定表头。[演示](http://ant.design/components/table/#demo-fixed-header)
+- Tag 去除 `href` 属性，默认标签名从 `a` 改为 `span`。
+- Timeline 支持指定 pending 节点的内容。
+- Tree
+  - 节点支持拖拽。
+  - 支持动态控制节点展开与否。[演示](http://ant.design/components/tree/#demo-basic-controlled)
+  - 可以监听节点展开/关闭事件 `onExpand`。
+  - `onCheck` `onSelect` 参数调整。
+  - `onDataLoaded` 改为 `loadData`。
+  - 新增 drag&drop 相关属性：
+    - `onDragStart`
+    - `onDragEnter`
+    - `onDragOver`
+    - `onDragLeave`
+    - `onDrop`
+  - 新增 TreeNode 节点属性：
+    - `disableCheckbox`
+    - `isLeaf`
+- Transfer 给 `onChange` 增加参数。[#972](https://github.com/ant-design/ant-design/issues/972)
+- DatePicker
+  - 修复 RangePicker 开始结束日期相同的 bug。[#822](https://github.com/ant-design/ant-design/issues/822)
+  - 修复 `format` 对浮层不生效问题。[#917](https://github.com/ant-design/ant-design/issues/917)
+- TimePicker 修复一个 `value` 为 `null` 时没有进入受控模式的问题。
+- Upload
+  - 可以用 `headers` 设置上传头部。
+  - 新增上传图片卡片样式。[演示](http://ant.design/components/upload/#demo-picture-card)
+- Radio
+  - 更换 Radio.Button 的展现样式。
+  - 可以设置 Radio.Button 的大小。
+- Progress
+  - `format` 属性现在支持自定义 function 的方式进行定义。[#893](https://github.com/ant-design/ant-design/issues/893)
+  - `format` 指定 string 和 React.Node 的方式被废弃。
+  - 支持 `style` 属性。[#895](https://github.com/ant-design/ant-design/issues/895)
+- message && notification 现在可以销毁。
+- Button
+  - 小号 Button 的圆角调整为 `4px`。
+  - 修复 Button.Group disabled 后的样式问题。[#926](https://github.com/ant-design/ant-design/issues/926)
+- BreadCrumb
+  - 移除 `router` 属性，无需设置。
+  - 修复一个链接参数不对的问题。
+
+## 0.11.3
+
+`2016-01-19`
+
+- 修复 TimePicker 受控模式点选即关闭面板的问题。[#818](https://github.com/ant-design/ant-design/issues/818)
+- 修复一个两栏的 TimePicker 点击右边空白处无法关闭面板的问题。[#826](https://github.com/ant-design/ant-design/issues/826)
+- 修复 Table `pagination.onChange` 指定无效的问题。[#824](https://github.com/ant-design/ant-design/issues/824)
+- 修复 Transfer 搜索功能失效的问题。
+- 修复 DatePicker 的 MonthPicker 样式错乱的问题。
+- 修复 RangePicker 时区无法设置的问题。[#837](https://github.com/ant-design/ant-design/issues/837)
+- 修复二维码图标，新增一个扫描图标。[#772](https://github.com/ant-design/ant-design/issues/772)
+
+## 0.11.2
+
+`2015-01-03`
+
+- 新增了[贡献文档](https://github.com/ant-design/ant-design/blob/master/CONTRIBUTING.md)。
+- 修复一个 DatePicker 中选择的国际化文案问题。[#771](https://github.com/ant-design/ant-design/issues/771)
+- 增加了一个高级搜索类型表单的[演示](http://ant.design/components/form/#demo-advanced-search-form)。
+- Dropdown 支持多级的下拉菜单。[演示](http://ant.design/components/dropdown/#demo-sub-menu)
+- Table
+  - 新增 `rowSelection.onChange` 和 `rowSelection.selectedRowKeys`，完善选择功能。
+  - 更新 dataSource 时，选中项现在会被清空。
+  - 修复一个全选框和禁用的选择项配合的问题。
+- 修复 `0.11.1`版本 menu 内嵌型菜单（inline）选中后关闭的问题。
+- 修复 `0.11.1`版本对 React 版本要求太严的问题，对应的警告提示对于 `0.14.x` 将不再出现。
+- 组件和文档的样式小调整。
+
+## 0.11.1
+
+`2015-12-29`
+
+- 修复一个 Table 无法修改 pageSize 的问题。
+- 修复一个 Table 子表格展开的对齐问题。
+- 修复一个 Chrome 下部分图标左侧切边的问题。
+- 修复搜索输入框在表单下使用的样式问题。[#762](https://github.com/ant-design/ant-design/issues/762)
+
+## 0.11.0
+
+`2015-12-28`
+
+- **移除默认加载的样式文件，样式现在需要独立加载。**
 - 按钮圆角调整为 `6px`。
 - Modal、Popconfirm、Table、TimePicker 支持国际化配置。
 - 新增虚线型按钮。
 - 新增 [通用搜索框](http://ant.design/components/form/#demo-search-input) 样式。
 - 新增图片上传列表样式[演示](http://ant.design/components/upload/#demo-picture-style)。
- 部分设计资源开放 [下载](http://ant.design/spec/tools)，包括 Axure 组件库和 Iconfont 字体打包文件。
+- **部分设计资源开放 [下载](http://ant.design/spec/tools)，包括 Axure 组件库和 Iconfont 字体打包文件。**
 - 新增 [吊顶规范](http://ant.design/spec/layout/#demo-ceiling)。
 - 组件演示页面增加锚点。
 - 新增穿梭框 [Transfer](http://ant.design/components/transfer/) 组件。
@ -76,11 +270,21 @@
  - 替换 `antd build` 为 [atool-build](https://github.com/ant-tool/atool-build)，重构并改善了 webpack 配置的自定义方式。
  - 替换 `antd server` 为 [dora](https://github.com/dora-js/dora)，一个完全插件化的开发服务器，支持[代理转发和数据 Mock](https://github.com/dora-js/dora-plugin-proxy)、[atool-build](https://github.com/dora-js/dora-plugin-atool-build)、[热替换](https://github.com/dora-js/dora-plugin-hmr)。
  - 新增 babel 插件 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd)，转换 `import {Button} from 'antd'` 为 `import Button from 'antd/lib/button'`。
-  - 发布了 `antd-init@0.5.x`，支持以上改动。
+  - 发布了 `antd-init@0.6.x`，支持以上改动。

-> - [0.11 升级指南](http://ant.design/docs/upgrade-notes#0-10-gt-0-11)
+> [0.11 升级指南](http://ant.design/docs/react/upgrade-notes#0-10-gt-0-11)

-## 0.10.4 `2015-11-30`
+---
+
+## 0.10.5
+
+`2016-01-04`
+
+- 修复 Table 更新 dataSource 后，选中项没有置空的问题。[#793](https://github.com/ant-design/ant-design/issues/793)
+
+## 0.10.4
+
+`2015-11-30`

 - 将 media-match 加入默认的 polyfill 文件中。[5626974](https://github.com/ant-design/ant-design/commit/562697423b1139eb324c1dceb051c143f4870ed7)
 - 修复了 [MonthPicker](http://ant.design/components/datepicker/#demo-month-picker) 报错问题，并增加了相关演示。
@ -88,7 +292,9 @@
 - 修复今天是不可选日期时的一个展示问题。[#606](https://github.com/ant-design/ant-design/issues/606)


-## 0.10.3 `2015-11-26`
+## 0.10.3
+
+`2015-11-26`

 - 和 0.9.x 保持一致默认引入 `antd/lib/index.css`（而非 less 文件），方便第三方引用。引用 less 文件进行变量配置的可自行 `import 'antd/style/index.less'`。[#593](https://github.com/ant-design/ant-design/issues/593)
 - 升级 Pagination，增加 `defaultCurrent` 属性，修正原来的 `current` 为[完全受控属性](https://facebook.github.io/react/docs/forms.html#controlled-components)。
@ -96,7 +302,9 @@
 - 对演示和样式代码增加了 lint 检查。


-## 0.10.2 `2015-11-25`
+## 0.10.2
+
+`2015-11-25`

 - Slider 新增 `tipFormatter` 用于格式化 Tooltip 的内容。
 - 优化 Badge 动画效果。
@ -107,7 +315,9 @@
  - InputNumber 同时设置 `size` `className` 时会有冲突。


-## 0.10.1 `2015-11-20`
+## 0.10.1
+
+`2015-11-20`

 - 修改内部组件的引用结构，方便工具优化。[#566](https://github.com/ant-design/ant-design/pull/566)
  - 移除了演示中没有使用过的 `antd.ButtonGroup`，依然用 `const ButtonGroup = Button.Group` 来使用。
@ -120,7 +330,9 @@
 - 修复 Datepicker 的 `style` 和 `calendarStyle` 属性失效的问题，并将 `calendarStyle` 更名为 `popupStyle`。


-## 0.10.0 `2015-11-20`
+## 0.10.0
+
+`2015-11-20`

 - 全面兼容 `react@0.14.x`。
 - 新增 [时间选择 Timepicker](http://ant.design/components/timepicker/)、[日历 Calendar](http://ant.design/components/calendar/)、[加载中 Spin](http://ant.design/components/spin/) 组件。
@ -186,15 +398,20 @@
 > 备注：
 >
 > - [计划和推进 issue](https://github.com/ant-design/ant-design/issues/276)
-> - [0.10 升级指南](http://ant.design/docs/upgrade-notes#0-0-gt-0-10)
+> - [0.10 升级指南](http://010x.ant.design/docs/upgrade-to-0.10)

+---

-## 0.9.3 ~ 0.9.5 `2015-11-04`
+## 0.9.3 ~ 0.9.5
+
+`2015-11-04`

 * 增加对 React 版本的检测提示机制，0.9.x 序列只能使用 `react@~0.13.3`。


-## 0.9.2 `2015-10-26`
+## 0.9.2
+
+`2015-10-26`

 * Tooltip 的 title 为空时不展示浮层。[9b53117](https://github.com/ant-design/ant-design/commit/9b5311791e73270c7c16a602ac74dd59719a5f76)
 * 修复 Upload 文件列表链接的 target 属性。[340a170](https://github.com/ant-design/ant-design/commit/340a1702b6a7b065ac02d417c891e1886dfe470d)
@ -202,7 +419,9 @@
 * 修复一些小的样式问题。


-## 0.9.1 `2015-09-26`
+## 0.9.1
+
+`2015-09-26`

 * 添加 Pagination pageSize 发生变化的回调。[#317](https://github.com/ant-design/ant-design/issues/317)
 * 升级依赖 rc-upload 到 1.6.x，修复 IE8/9 下的兼容性问题。
@ -221,7 +440,9 @@
 * 部分组件交互和视觉效果修正。


-## 0.9.0 `2015-09-14`
+## 0.9.0
+
+`2015-09-14`

 * 新增 [timeline](components/timeline/) 和 [badge](components/badge/) 组件。
 * 优化弹出层类组件的动画效果，使其更加流畅。
@ -260,7 +481,9 @@
  * 支持和 react-router 结合使用。


-## 0.8.0 `2015-08-25`
+## 0.8.0
+
+`2015-08-25`

 这个版本是第一个稳定版，组件经过三期迭代，基本到齐，并有大量改进和变化，不向下兼容。

@ -272,12 +495,16 @@
 * 排查并修复 IE 和 safari 等浏览器的兼容问题。
 * 大量代码重构，演示代码补充，文档更新、以及样式上的优化。

-## 0.7.3 `2015-07-30`
+## 0.7.3
+
+`2015-07-30`

 * 小幅重构了 Table 分页，修复了分页导致的数据不展示的问题。
 * 更新了部分文档。

-## 0.7.2 `2015-07-27`
+## 0.7.2
+
+`2015-07-27`

 * 修复本地模式下 pagination 为 false 时数据无法显示的 [问题](https://github.com/ant-design/ant-design/commit/1954586665e59031eae5d2c8b2cdb08f83d64fcb)。
 * 重构了 message 组件。
@ -285,14 +512,18 @@
 * 部分代码切换至 ES6 模式。
 * 修正了部分组件的样式和演示，优化部分动画。

-## 0.7.1 `2015-07-22`
+## 0.7.1
+
+`2015-07-22`

 * 修复了 Table 组件的 pagination 为 false 时分页未消失的 [问题](https://github.com/ant-design/ant-design/commit/01a6c0f1e6707b72a54ef30d073d148a87b391a8)。
 * select 组件[选中后默认显示标签内容](https://github.com/ant-design/ant-design/issues/50)（原来是显示 value）。
 * 修正了部分组件的样式和演示。
 * 打包文件为 [umd 模式](https://github.com/ant-design/ant-design/commit/9b7b940cb417429d8fc57d83e252991b043d0f2f)。

-## 0.7.0 `2015-07-21`
+## 0.7.0
+
+`2015-07-21`

 * 第一个公开版本，发布 `layout`、`iconfont`、`button`、`form`、`checkbox`、`radio`、`switch`、`slider`、`input-number`、`datepicker`、`select`、`tabs`、`steps`、`breadcrumb`、`collapse`、`pagination`、`modal`、`message`、`dropdown`、`popover`、`popconfirm`、`tooltip`、`progress`、`table` 等组件。
 * 发布 [Ant Design 首页](http://ant.design/) 和入门文档。
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@ -4,7 +4,7 @@
  </a>
 </p>

-# Ant Design [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd) [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+# Ant Design [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd) [![Dependency Status](https://david-dm.org/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design) [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

 一套企业级的 UI 设计语言和 React 实现。

@ -41,12 +41,15 @@ import 'antd/lib/index.css';  // or 'antd/style/index.less'

 现代浏览器和 IE8 及以上。

+> [IE8 issues](https://github.com/xcatliu/react-ie8)
+
 ## 链接

 - [首页](http://ant.design/)
- [React UI 库](http://ant.design/docs/introduce)
+- [React UI 库](http://ant.design/docs/react/introduce)
 - [修改记录](CHANGELOG.md)
- [构建调试工具](https://github.com/ant-tool/xtool/)
+- [开发脚手架](https://github.com/ant-design/antd-init/)
+- [开发工具文档](http://ant-tool.github.io/)
 - [React 组件](http://react-component.github.io/)
 - [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)
--- a/README.md
+++ b/README.md
@ -4,15 +4,15 @@
  </a>
 </p>

-# Ant Design [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd) [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+# Ant Design [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd) [![Dependency Status](https://david-dm.org/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design) [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

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

 ## Features

- An enterprise-class graphical design language and framework for financial applications.
+- 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 workflow, supporting ES2015.
+- A npm + webpack + babel + dora [workflow](http://ant-tool.github.io/index.html).

 ## Install

@ -40,18 +40,21 @@ Use components on demand by writing as `import DatePicker from 'antd/lib/date-pi

 Normal browsers and Internet Explorer 8+.

+> [IE8 issues](https://github.com/xcatliu/react-ie8)

 ## Links

 - [Home page](http://ant.design/)
- [React UI library](http://ant.design/docs/introduce)
+- [React UI library](http://ant.design/docs/react/introduce)
 - [ChangeLog](CHANGELOG.md)
- [Build/Debug tools](https://github.com/ant-tool/xtool/)
+- [Scaffold tool](https://github.com/ant-design/antd-init/)
+- [Development tool](http://ant-tool.github.io/)
 - [React components](http://react-component.github.io/)
 - [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/%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)
 - [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)


 ## Contributing
--- a/components/affix/demo/basic.md
+++ b/components/affix/demo/basic.md
@ -13,5 +13,5 @@ ReactDOM.render(
  <Affix>
    <Button type="primary">固定在顶部</Button>
  </Affix>
-, document.getElementById('components-affix-demo-basic'));
+, mountNode);
 ````
--- a/components/affix/demo/offset.md
+++ b/components/affix/demo/offset.md
@ -13,5 +13,5 @@ ReactDOM.render(
  <Affix offset={75}>
    <Button type="primary">固定在距离顶部 75px 的位置</Button>
  </Affix>
-, document.getElementById('components-affix-demo-offset'));
+, mountNode);
 ````
--- a/components/affix/index.jsx
+++ b/components/affix/index.jsx
@ -4,14 +4,14 @@ import rcUtil from 'rc-util';
 import classNames from 'classnames';

 function getScroll(w, top) {
-  let ret = w['page' + (top ? 'Y' : 'X') + 'Offset'];
-  let method = 'scroll' + (top ? 'Top' : 'Left');
+  let ret = w[`page${top ? 'Y' : 'X'}Offset`];
+  let method = `scroll${top ? 'Top' : 'Left'}`;
  if (typeof ret !== 'number') {
    let d = w.document;
-    //ie6,7,8 standard mode
+    // ie6,7,8 standard mode
    ret = d.documentElement[method];
    if (typeof ret !== 'number') {
-      //quirks mode
+      // quirks mode
      ret = d.body[method];
    }
  }
--- a/components/alert/demo/basic.md
+++ b/components/alert/demo/basic.md
@ -10,5 +10,5 @@
 import { Alert } from 'antd';

 ReactDOM.render(<Alert message="成功提示的文案" type="success" />
-, document.getElementById('components-alert-demo-basic'));
+, mountNode);
 ````
--- a/components/alert/demo/closable.md
+++ b/components/alert/demo/closable.md
@ -9,7 +9,7 @@
 ````jsx
 import { Alert } from 'antd';

-const onClose = function(e) {
+const onClose = function (e) {
  console.log(e, '我要被关闭啦！');
 };

@ -23,5 +23,5 @@ ReactDOM.render(<div>
    type="error"
    closable
    onClose={onClose} />
-</div>, document.getElementById('components-alert-demo-closable'));
+</div>, mountNode);
 ````
--- a/components/alert/demo/close-text.md
+++ b/components/alert/demo/close-text.md
@ -11,5 +11,5 @@ import { Alert } from 'antd';

 ReactDOM.render(
 <Alert message="消息提示的文案" type="info" closeText="不再提醒" />
-, document.getElementById('components-alert-demo-close-text'));
+, mountNode);
 ````
--- a/components/alert/demo/description.md
+++ b/components/alert/demo/description.md
@ -24,5 +24,5 @@ ReactDOM.render(<div>
    message="错误提示的文案"
    description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
    type="error" />
-</div>, document.getElementById('components-alert-demo-description'));
+</div>, mountNode);
 ````
--- a/components/alert/demo/icon.md
+++ b/components/alert/demo/icon.md
@ -32,5 +32,5 @@ ReactDOM.render(<div>
    description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
    type="error"
    showIcon />
-</div>, document.getElementById('components-alert-demo-icon'));
+</div>, mountNode);
 ````
--- a/components/alert/demo/style.md
+++ b/components/alert/demo/style.md
@ -15,5 +15,5 @@ ReactDOM.render(<div>
  <Alert message="警告提示的文案" type="warn" />
  <Alert message="错误提示的文案" type="error" />
 </div>,
-document.getElementById('components-alert-demo-style'));
+mountNode);
 ````
--- a/components/alert/index.jsx
+++ b/components/alert/index.jsx
@ -21,10 +21,10 @@ export default React.createClass({
  handleClose(e) {
    e.preventDefault();
    let dom = ReactDOM.findDOMNode(this);
-    dom.style.height = dom.offsetHeight + 'px';
+    dom.style.height = `${dom.offsetHeight}px`;
    // Magic code
    // 重复一次后才能正确设置 height
-    dom.style.height = dom.offsetHeight + 'px';
+    dom.style.height = `${dom.offsetHeight}px`;

    this.setState({
      closing: false
@ -44,20 +44,20 @@ export default React.createClass({

    let iconType = '';
    switch (type) {
-    case 'success':
-      iconType = 'check-circle';
-      break;
-    case 'info':
-      iconType = 'info-circle';
-      break;
-    case 'error':
-      iconType = 'exclamation-circle';
-      break;
-    case 'warn':
-      iconType = 'exclamation-circle';
-      break;
-    default:
-      iconType = 'default';
+      case 'success':
+        iconType = 'check-circle';
+        break;
+      case 'info':
+        iconType = 'info-circle';
+        break;
+      case 'error':
+        iconType = 'exclamation-circle';
+        break;
+      case 'warn':
+        iconType = 'exclamation-circle';
+        break;
+      default:
+        iconType = 'default';
    }

    // use outline icon in alert with description
@ -67,10 +67,10 @@ export default React.createClass({

    let alertCls = classNames({
      [prefixCls]: true,
-      [prefixCls + '-' + type]: true,
-      [prefixCls + '-close']: !this.state.closing,
-      [prefixCls + '-with-description']: !!description,
-      [prefixCls + '-no-icon']: !showIcon,
+      [`${prefixCls}-${type}`]: true,
+      [`${prefixCls}-close`]: !this.state.closing,
+      [`${prefixCls}-with-description`]: !!description,
+      [`${prefixCls}-no-icon`]: !showIcon,
    });

    // closeable when closeText is assigned
@ -80,14 +80,14 @@ export default React.createClass({

    return this.state.closed ? null : (
      <Animate component=""
-               showProp="data-show"
-               transitionName="slide-up"
-               onEnd={this.animationEnd}>
+        showProp="data-show"
+        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>
-          <span className={prefixCls + '-description'}>{description}</span>
-          {closable ? <a onClick={this.handleClose} className={prefixCls + '-close-icon'}>
+          <span className={`${prefixCls}-message`}>{message}</span>
+          <span className={`${prefixCls}-description`}>{description}</span>
+          {closable ? <a onClick={this.handleClose} className={`${prefixCls}-close-icon`}>
            {closeText || <Icon type="cross" />}
          </a> : null}
        </div>
--- a/components/alert/index.md
+++ b/components/alert/index.md
@ -19,8 +19,8 @@
 |----------- |---------------------------------------------------------  | ---------- |-------|
 | type       | 必选参数，指定警告提示的样式，有四种选择`success`、`info`、`warn`、`error`   | String     | 无    |
 | closable   | 可选参数，默认不显示关闭按钮                                  | Boolean   | 无    |
-| closeText  | 可选参数，自定义关闭按钮                                     | String     | 无    |
-| message    | 必选参数，警告提示内容                                       | String     | 无    |
-| description | 可选参数，警告提示的辅助性文字介绍                            | String     | 无    |
+| closeText  | 可选参数，自定义关闭按钮                                     | React.Node   | 无    |
+| message    | 必选参数，警告提示内容                                       | React.Node   | 无    |
+| description | 可选参数，警告提示的辅助性文字介绍                            | React.Node   | 无    |
 | onClose     | 可选参数，关闭时触发的回调函数                                | Function   | 无    |
 | showIcon   | 可选参数，是否显示辅助图标                                 | Boolean   | false    |
--- a/components/badge/ScrollNumber.jsx
+++ b/components/badge/ScrollNumber.jsx
@ -26,21 +26,18 @@ class AntScrollNumber extends React.Component {
    if (this.state.count > this.lastCount) {
      if (currentDigit >= lastDigit) {
        return 10 + num;
-      } else {
-        return 20 + num;
-      }
-    } else {
-      if (currentDigit <= lastDigit) {
-        return 10 + num;
-      } else {
-        return num;
      }
+      return 20 + num;
    }
+    if (currentDigit <= lastDigit) {
+      return 10 + num;
+    }
+    return num;
  }

  componentWillReceiveProps(nextProps) {
-    if ('count' in nextProps && nextProps.count) {
-      if (this.lastCount === this.state.count) {
+    if ('count' in nextProps) {
+      if (this.state.count === nextProps.count) {
        return;
      }
      this.lastCount = this.state.count;
@ -79,8 +76,8 @@ class AntScrollNumber extends React.Component {
      className: `${this.props.prefixCls}-only`,
      style: {
        transition: removeTransition && 'none',
-        transform: 'translate3d(0, ' + (-position * height) + 'px, 0)',
-        height: height,
+        transform: `translate3d(0, ${-position * height}px, 0)`,
+        height,
      },
      key: i,
    }, this.renderNumberList());
@ -106,13 +103,12 @@ class AntScrollNumber extends React.Component {
        props,
        this.renderNumberElement()
      );
-    } else {
-      return createElement(
-        this.props.component,
-        props,
-        props.count
-      );
    }
+    return createElement(
+      this.props.component,
+      props,
+      props.count
+    );
  }
 }

@ -120,7 +116,7 @@ AntScrollNumber.defaultProps = {
  prefixCls: 'ant-scroll-number',
  count: null,
  component: 'sup',
-  onAnimated: function() {},
+  onAnimated() {},
  height: 18,
 };

--- a/components/badge/demo/99plus.md
+++ b/components/badge/demo/99plus.md
@ -16,5 +16,5 @@ ReactDOM.render(<div>
  <Badge count={200}>
    <a href="#" className="head-example"></a>
  </Badge>
-</div>, document.getElementById('components-badge-demo-99plus'));
+</div>, mountNode);
 ````
--- a/components/badge/demo/basic.md
+++ b/components/badge/demo/basic.md
@ -13,7 +13,7 @@ ReactDOM.render(
  <Badge count={5}>
    <a href="#" className="head-example"></a>
  </Badge>
-, document.getElementById('components-badge-demo-basic'));
+, mountNode);
 ````

 ````css
--- a/components/badge/demo/change.md
+++ b/components/badge/demo/change.md
@ -30,44 +30,37 @@ const Test = React.createClass({
  },
  onClick() {
    this.setState({
-      show: !this.state.show
-    });
-  },
-  onNumberClick() {
-    const count = this.state.count;
-    this.setState({
-      count: count ? 0 : 5
+      show: !this.state.show,
    });
  },
  render() {
-    return <div>
-      <Badge count={this.state.count}>
-        <a href="#" className="head-example"></a>
-      </Badge>
-      <Badge dot={this.state.show}>
-        <a href="#" className="head-example"></a>
-      </Badge>
-      <div style={{ marginTop: 10 }}>
-        <Button type="ghost" onClick={this.onNumberClick} style={{marginRight: 6}}>
-          切换数字显隐
-        </Button>
-        <Button type="ghost" onClick={this.onClick} style={{marginRight: 6}}>
-          切换红点显隐
-        </Button>
-        <ButtonGroup>
-          <Button type="ghost" onClick={this.decline}>
-            <Icon type="minus" />
+    return (
+      <div>
+        <Badge count={this.state.count}>
+          <a href="#" className="head-example"></a>
+        </Badge>
+        <Badge dot={this.state.show}>
+          <a href="#" className="head-example"></a>
+        </Badge>
+        <div style={{ marginTop: 10 }}>
+          <ButtonGroup>
+            <Button type="ghost" onClick={this.decline}>
+              <Icon type="minus" />
+            </Button>
+            <Button type="ghost" onClick={this.increase}>
+              <Icon type="plus" />
+            </Button>
+          </ButtonGroup>
+          <Button type="ghost" onClick={this.onClick} style={{ marginLeft: 8 }}>
+            切换红点显隐
          </Button>
-          <Button type="ghost" onClick={this.increase}>
-            <Icon type="plus" />
-          </Button>
-        </ButtonGroup>
+        </div>
      </div>
-    </div>;
+    );
  }
 });

 ReactDOM.render(
  <Test />
-, document.getElementById('components-badge-demo-change'));
+, mountNode);
 ````
--- a/components/badge/demo/dot.md
+++ b/components/badge/demo/dot.md
@ -16,7 +16,7 @@ ReactDOM.render(<div>
  <Badge dot>
    <a href="#">一个链接</a>
  </Badge>
-</div>, document.getElementById('components-badge-demo-dot'));
+</div>, mountNode);
 ````

 <style>
--- a/components/badge/demo/link.md
+++ b/components/badge/demo/link.md
@ -15,5 +15,5 @@ ReactDOM.render(
      <span className="head-example"></span>
    </Badge>
  </a>
-, document.getElementById('components-badge-demo-link'));
+, mountNode);
 ````
--- a/components/badge/demo/no-wrapper.md
+++ b/components/badge/demo/no-wrapper.md
@ -13,7 +13,7 @@ import { Badge } from 'antd';

 ReactDOM.render(<div>
  <Badge count={25} />
-  <Badge count={4} style={{backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9'}} />
-  <Badge count={109} style={{backgroundColor: '#87d068'}} />
-</div>, document.getElementById('components-badge-demo-no-wrapper'));
+  <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
+  <Badge count={109} style={{ backgroundColor: '#87d068' }} />
+</div>, mountNode);
 ````
--- a/components/badge/demo/overflow.md
+++ b/components/badge/demo/overflow.md
@ -16,5 +16,5 @@ ReactDOM.render(<div>
  <Badge count={1000} overflowCount={999}>
    <a href="#" className="head-example"></a>
  </Badge>
-</div>, document.getElementById('components-badge-demo-overflow'));
+</div>, mountNode);
 ````
--- a/components/badge/index.jsx
+++ b/components/badge/index.jsx
@ -4,10 +4,6 @@ import ScrollNumber from './ScrollNumber';
 import classNames from 'classnames';

 class AntBadge extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
  render() {
    let { count, prefixCls, overflowCount, className, style, children } = this.props;
    const dot = this.props.dot;
@ -33,7 +29,7 @@ class AntBadge extends React.Component {
        {children}
        <Animate component=""
          showProp="data-show"
-          transitionName={prefixCls + '-zoom'}
+          transitionName={`${prefixCls}-zoom`}
          transitionAppear>
          {
            hidden ? null :
--- a/components/breadcrumb/demo/basic.md
+++ b/components/breadcrumb/demo/basic.md
@ -16,5 +16,5 @@ ReactDOM.render(
    <Breadcrumb.Item href="">应用列表</Breadcrumb.Item>
    <Breadcrumb.Item>某应用</Breadcrumb.Item>
  </Breadcrumb>
-, document.getElementById('components-breadcrumb-demo-basic'));
+, mountNode);
 ````
--- a/components/breadcrumb/demo/router.md
+++ b/components/breadcrumb/demo/router.md
@ -2,52 +2,64 @@

 - order: 2

-和 `react-router@1.x` 进行结合使用。
+和 `react-router@2.x` 进行结合使用。

 ---

 ````jsx
 const ReactRouter = require('react-router');
-let { Router, Route, Link } = ReactRouter;
+let { Router, Route, Link, hashHistory } = ReactRouter;
 import { Breadcrumb } from 'antd';

 const Apps = React.createClass({
  render() {
-    return <ul className="app-list">
-      <li><Link to="/apps/1">应用1</Link></li>
-      <li><Link to="/apps/2">应用2</Link></li>
-    </ul>;
+    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 = React.createClass({
  render() {
-    return (<div>
-      <div className="demo-nav">
-        <Link to="/">首页</Link>
-        <Link to="/apps">应用列表</Link>
+    return (
+      <div>
+        <div className="demo-nav">
+          <Link to="/">首页</Link>
+          <Link to="/apps">应用列表</Link>
+        </div>
+        {this.props.children || 'Home'}
+        <div style={{
+          marginBottom: 15,
+          marginTop: 15,
+          paddingBottom: 15,
+          borderBottom: '1px dashed #ccc'
+        }}>
+          点击上面的导航切换页面，面包屑在下面：
+        </div>
+        <Breadcrumb {...this.props} />
      </div>
-      {this.props.children || 'Home'}
-      <div style={{
-        marginBottom: 15,
-        marginTop: 15,
-        paddingBottom: 15,
-        borderBottom: '1px dashed #ccc'
-      }}>点击上面的导航切换页面，面包屑在下面：</div>
-      <Breadcrumb {...this.props} router={ReactRouter} />
-    </div>);
+    );
  }
 });

-ReactDOM.render((
-  <Router>
+ReactDOM.render(
+  <Router history={hashHistory}>
    <Route name="home" breadcrumbName="首页" path="/" component={Home}>
      <Route name="apps" breadcrumbName="应用列表" path="apps" component={Apps}>
-        <Route name="app" breadcrumbName="应用:id" path=":id" />
+        <Route name="app" breadcrumbName="应用:id" path=":id">
+          <Route name="detail" breadcrumbName="详情" path="detail" />
+        </Route>
      </Route>
    </Route>
  </Router>
-), document.getElementById('components-breadcrumb-demo-router'));
+, mountNode);
 ````

 <style>
--- a/components/breadcrumb/demo/separator.md
+++ b/components/breadcrumb/demo/separator.md
@ -16,5 +16,5 @@ ReactDOM.render(
    <Breadcrumb.Item href="">应用列表</Breadcrumb.Item>
    <Breadcrumb.Item>某应用</Breadcrumb.Item>
  </Breadcrumb>
-, document.getElementById('components-breadcrumb-demo-separator'));
+, mountNode);
 ````
--- a/components/breadcrumb/demo/withIcon.md
+++ b/components/breadcrumb/demo/withIcon.md
@ -22,6 +22,6 @@ ReactDOM.render(
      应用
    </Breadcrumb.Item>
  </Breadcrumb>
-, document.getElementById('components-breadcrumb-demo-withicon'));
+, mountNode);
 ````

--- a/components/breadcrumb/index.jsx
+++ b/components/breadcrumb/index.jsx
@ -17,14 +17,16 @@ const BreadcrumbItem = React.createClass({
  },
  render() {
    const { prefixCls, separator, children } = this.props;
-    let link = <a className={prefixCls + '-link'} {...this.props}>{children}</a>;
+    let link = <a className={`${prefixCls}-link`} {...this.props}>{children}</a>;
    if (typeof this.props.href === 'undefined') {
-      link = <span className={prefixCls + '-link'} {...this.props}>{children}</span>;
+      link = <span className={`${prefixCls}-link`} {...this.props}>{children}</span>;
    }
-    return <span>
-      {link}
-      <span className={prefixCls + '-separator'}>{separator}</span>
-    </span>;
+    return (
+      <span>
+        {link}
+        <span className={`${prefixCls}-separator`}>{separator}</span>
+      </span>
+    );
  }
 });

@ -41,29 +43,35 @@ const Breadcrumb = React.createClass({
      React.PropTypes.string,
      React.PropTypes.element,
    ]),
-    router: React.PropTypes.object,
    routes: React.PropTypes.array,
-    params: React.PropTypes.object
+    params: React.PropTypes.object,
  },
  render() {
    let crumbs;
-    const { separator, prefixCls, router, routes, params, children } = this.props;
-    const ReactRouter = router;
-    if (routes && routes.length > 0 && ReactRouter) {
-      let Link = ReactRouter.Link;
-      crumbs = routes.map(function(route, i) {
+    const { separator, prefixCls, routes, params, children } = this.props;
+    if (routes && routes.length > 0) {
+      const paths = [];
+      crumbs = routes.map((route, i) => {
        if (!route.breadcrumbName) {
          return null;
        }
-        const name = route.breadcrumbName.replace(/\:(.*)/g, function(replacement, key) {
+        const name = route.breadcrumbName.replace(/\:(.*)/g, (replacement, key) => {
          return params[key] || replacement;
        });
+
        let link;
-        const path = route.path.indexOf('/') === 0 ? route.path : ('/' + route.path);
+        let path = route.path.replace(/^\//, '');
+        Object.keys(params).forEach(key => {
+          path = path.replace(`:${key}`, params[key]);
+        });
+        if (path) {
+          paths.push(path);
+        }
+
        if (i === routes.length - 1) {
          link = <span>{name}</span>;
        } else {
-          link = <Link to={path} params={params}>{name}</Link>;
+          link = <a href={`#/${paths.join('/')}`}>{name}</a>;
        }
        return <BreadcrumbItem separator={separator} key={name}>{link}</BreadcrumbItem>;
      });
--- a/components/breadcrumb/index.md
+++ b/components/breadcrumb/index.md
@ -29,7 +29,6 @@

 | 参数      | 说明                              | 类型              |  可选值 | 默认值 |
 |-----------|-----------------------------------|-------------------|---------|--------|
-| router    | 可传入 react-router 的实例        | Object            |         | -      |
 | routes    | router 的路由栈信息               | Array             |         | -      |
 | params    | 路由的参数                        | Object            |         | -      |
 | separator | 分隔符自定义                      | String or Element |         | '/'    |
--- a/components/button/button-group.jsx
+++ b/components/button/button-group.jsx
@ -5,13 +5,13 @@ const prefix = 'ant-btn-group-';

 export default class ButtonGroup extends React.Component {
  render() {
-    const {size, className, ...others} = this.props;
+    const { size, className, ...others } = this.props;

    // large => lg
    // small => sm
    const sizeCls = ({
-      'large': 'lg',
-      'small': 'sm'
+      large: 'lg',
+      small: 'sm',
    })[size] || '';

    const classes = classNames({
--- a/components/button/button.jsx
+++ b/components/button/button.jsx
@ -24,21 +24,30 @@ function insertSpace(child) {
  return child;
 }

+function clearButton(button) {
+  button.className = button.className.replace(`${prefix}clicked`, '');
+}
+
 export default class Button extends React.Component {
-  componentDidMount() {
-    if (window && window.PIE) {
-      window.PIE.attach(findDOMNode(this));
-    }
+  handleClick(...args) {
+    // Add click effect
+    const buttonNode = findDOMNode(this);
+    clearButton(buttonNode);
+    setTimeout(() => buttonNode.className += ` ${prefix}clicked`, 10);
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout(() => clearButton(buttonNode), 500);
+
+    this.props.onClick(...args);
  }
  render() {
    const props = this.props;
-    const {type, shape, size, onClick, className, htmlType, children, ...others} = props;
+    const { type, shape, size, className, htmlType, children, ...others } = props;

    // large => lg
    // small => sm
    const sizeCls = ({
-      'large': 'lg',
-      'small': 'sm'
+      large: 'lg',
+      small: 'sm',
    })[size] || '';

    const classes = classNames({
@ -46,15 +55,20 @@ export default class Button extends React.Component {
      [prefix + type]: type,
      [prefix + shape]: shape,
      [prefix + sizeCls]: sizeCls,
-      [prefix + 'loading']: ('loading' in props && props.loading !== false),
-      [className]: className
+      [`${prefix}loading`]: ('loading' in props && props.loading !== false),
+      [className]: className,
    });

    const kids = React.Children.map(children, insertSpace);

-    return <button {...others} type={htmlType || 'button'} className={classes} onClick={onClick}>
-      {kids}
-    </button>;
+    return (
+      <button {...others}
+        type={htmlType || 'button'}
+        className={classes}
+        onClick={this.handleClick.bind(this)}>
+        {kids}
+      </button>
+    );
  }
 }

--- a/components/button/demo/basic.md
+++ b/components/button/demo/basic.md
@ -19,7 +19,7 @@ ReactDOM.render(<div>
  <Button type="ghost">幽灵按钮</Button>
  <Button type="dashed">虚线按钮</Button>
 </div>,
-document.getElementById('components-button-demo-basic'));
+mountNode);
 ````

 <style>
--- a/components/button/demo/button-group.md
+++ b/components/button/demo/button-group.md
@ -19,9 +19,9 @@ ReactDOM.render(<div>
  <Button type="primary">取消</Button>
 </ButtonGroup>
 <ButtonGroup>
-  <Button>左</Button>
-  <Button>中</Button>
-  <Button>右</Button>
+  <Button disabled>左</Button>
+  <Button disabled>中</Button>
+  <Button disabled>右</Button>
 </ButtonGroup>
 <ButtonGroup>
  <Button type="primary">左</Button>
@ -79,7 +79,7 @@ ReactDOM.render(<div>
  <Button type="ghost">小</Button>
 </ButtonGroup>
 </div>
-, document.getElementById('components-button-demo-button-group'));
+, mountNode);
 ````

 <style>
--- a/components/button/demo/disabled.md
+++ b/components/button/demo/disabled.md
@ -22,7 +22,7 @@ ReactDOM.render(<div>
  <Button type="dashed">虚线按钮</Button>
  <Button type="dashed" disabled>虚线按钮(失效)</Button>
 </div>
-, document.getElementById('components-button-demo-disabled'));
+, mountNode);
 ````

 <style>
--- a/components/button/demo/icon.md
+++ b/components/button/demo/icon.md
@ -46,7 +46,7 @@ ReactDOM.render(<div>
    <Icon type="search" />
  </Button>
 </div>,
-document.getElementById('components-button-demo-icon'));
+mountNode);
 ````

 <style>
--- a/components/button/demo/loading.md
+++ b/components/button/demo/loading.md
@ -23,28 +23,30 @@ const App = React.createClass({
    this.setState({ iconLoading: true });
  },
  render() {
-    return <div>
-      <Button type="primary" size="large" loading>
-        加载中
-      </Button>
-      <Button type="primary" loading>
-        加载中
-      </Button>
-      <Button type="primary" size="small" loading>
-        加载中
-      </Button>
-      <br />
-      <Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
-        点击变加载
-      </Button>
-      <Button type="primary" loading={this.state.iconLoading} onClick={this.enterIconLoading}>
-        <Icon type="poweroff" />点击变加载
-      </Button>
-    </div>;
+    return (
+      <div>
+        <Button type="primary" size="large" loading>
+          加载中
+        </Button>
+        <Button type="primary" loading>
+          加载中
+        </Button>
+        <Button type="primary" size="small" loading>
+          加载中
+        </Button>
+        <br />
+        <Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
+          点击变加载
+        </Button>
+        <Button type="primary" loading={this.state.iconLoading} onClick={this.enterIconLoading}>
+          <Icon type="poweroff" />点击变加载
+        </Button>
+      </div>
+    );
  }
 });

-ReactDOM.render(<App />, document.getElementById('components-button-demo-loading'));
+ReactDOM.render(<App />, mountNode);
 ````

 <style>
--- a/components/button/demo/shape.md
+++ b/components/button/demo/shape.md
@ -30,7 +30,7 @@ ReactDOM.render(<div>
    <Icon type="search" />
  </Button>
 </div>
-, document.getElementById('components-button-demo-shape'));
+, mountNode);
 ````

 <style>
--- a/components/button/demo/size.md
+++ b/components/button/demo/size.md
@ -16,7 +16,7 @@ ReactDOM.render(<div>
  <Button type="primary">中号按钮(默认)</Button>
  <Button type="primary" size="small">小号按钮</Button>
 </div>
-, document.getElementById('components-button-demo-size'));
+, mountNode);
 ````

 <style>
--- a/components/button/index.md
+++ b/components/button/index.md
@ -21,25 +21,11 @@

 属性 | 说明 | 类型 | 默认值
 -----|-----|-----|------
-type | 设置按钮类型，可选值为 `primary` `ghost` 或者不设 | Enum | undefined
-htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 HTML标准 | Enum | `button`
-shape | 设置按钮形状，可选值为 `circle` `circle-outline` 或者不设 | Enum | undefined
-size | 设置按钮大小，可选值为 `small` `large` 或者不设 | Enum | undefined
-loading | 设置按钮载入状态，存在为 `true`，不存在为 `false`，或直接设置值，如：`loading="true"` | Bool | false
-onClick | `click` 事件的 handler | Function | `function() {}`
+type | 设置按钮类型，可选值为 `primary` `ghost` 或者不设 | string | -
+htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 HTML标准 | string | `button`
+shape | 设置按钮形状，可选值为 `circle` `circle-outline` 或者不设 | string | 无
+size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default`
+loading | 设置按钮载入状态 | boolean | false
+onClick | `click` 事件的 handler | function | `function() {}`

 - `<Button>Hello world!</Button>` 最终会被渲染为 `<button>Hello world!</button>`，并且除了上表中的属性，其它属性都会直接传到 `<button></button>`
-
-
-### IE8 border radius support
-
-Ant Design 视觉上采用渐进降级的方案，在 IE8 下圆角按钮将降级为直角。
-如果强烈需要圆角按钮，我们提供了 [css3pie](http://css3pie.com/) 的兼容方案。
-
-使用时只需在 html 头部加入以下代码即可。
-
-```html
-<!--[if IE 8]>
-<script src="https://t.alipayobjects.com/images/rmsweb/T1q8JiXftaXXXXXXXX.js"></script>
-<![endif]-->
-```
--- a/components/calendar/Header.jsx
+++ b/components/calendar/Header.jsx
@ -1,20 +1,20 @@
-import React, {PropTypes, Component} from 'react';
-import {PREFIX_CLS} from './Constants';
+import React, { PropTypes, Component } from 'react';
+import { PREFIX_CLS } from './Constants';
 import Select from '../select';
-import {Group, Button} from '../radio';
+import { Group, Button } from '../radio';

 function noop() {}

 class Header extends Component {
  getYearSelectElement(year) {
-    const {yearSelectOffset, yearSelectTotal, locale, prefixCls, fullscreen} = this.props;
+    const { yearSelectOffset, yearSelectTotal, locale, prefixCls, fullscreen } = this.props;
    const start = year - yearSelectOffset;
    const end = start + yearSelectTotal;
    const suffix = locale.year === '年' ? '年' : '';

    const options = [];
    for (let index = start; index < end; index++) {
-      options.push(<Option key={`${index}`}>{index + suffix}</Option> );
+      options.push(<Option key={`${index}`}>{index + suffix}</Option>);
    }
    return (
      <Select
@ -32,7 +32,7 @@ class Header extends Component {
  getMonthSelectElement(month) {
    const props = this.props;
    const months = props.locale.format.months;
-    const {prefixCls, fullscreen} = props;
+    const { prefixCls, fullscreen } = props;
    const options = [];

    for (let index = 0; index < 12; index++) {
@ -67,12 +67,9 @@ class Header extends Component {
    this.props.onTypeChange(e.target.value);
  }
  render() {
-    const {type, value, prefixCls, locale} = this.props;
-
+    const { type, value, prefixCls, locale } = this.props;
    const yearSelect = this.getYearSelectElement(value.getYear());
-
    const monthSelect = type === 'date' ? this.getMonthSelectElement(value.getMonth()) : null;
-
    const typeSwitch = (
      <Group onChange={this.onTypeChange.bind(this)} value={type}>
        <Button value="date">{locale.month}</Button>
--- a/components/calendar/demo/basic.md
+++ b/components/calendar/demo/basic.md
@ -15,5 +15,5 @@ function onPanelChange(value, mode) {

 ReactDOM.render(
  <Calendar onPanelChange={onPanelChange} />
-, document.getElementById('components-calendar-demo-basic'));
+, mountNode);
 ````
--- a/components/calendar/demo/card.md
+++ b/components/calendar/demo/card.md
@ -17,5 +17,5 @@ ReactDOM.render(
  <div style={{ width: 290, border: '1px solid #d9d9d9', borderRadius: 4 }}>
    <Calendar fullscreen={false} onPanelChange={onPanelChange} />
  </div>
-, document.getElementById('components-calendar-demo-card'));
+, mountNode);
 ````
--- a/components/calendar/demo/custom-render.md
+++ b/components/calendar/demo/custom-render.md
@ -19,6 +19,6 @@ function monthCellRender(value) {

 ReactDOM.render(
  <Calendar defaultValue={new Date('2010-10-10')}
-  dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
-, document.getElementById('components-calendar-demo-custom-render'));
+    dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
+, mountNode);
 ````
--- a/components/calendar/demo/locale.md
+++ b/components/calendar/demo/locale.md
@ -15,6 +15,6 @@ function onPanelChange(value, mode) {
 }

 ReactDOM.render(
-  <Calendar onPanelChange={onPanelChange} locale={enUS}/>
-, document.getElementById('components-calendar-demo-locale'));
+  <Calendar onPanelChange={onPanelChange} locale={enUS} />
+, mountNode);
 ````
--- a/components/calendar/demo/notice-calendar.md
+++ b/components/calendar/demo/notice-calendar.md
@ -12,41 +12,45 @@ import { Calendar } from 'antd';
 function getListData(value) {
  let listData;
  switch (value.getDayOfMonth()) {
-  case 8:
-    listData = [
-      { type: 'warn', content: '这里是警告事项.' },
-      { type: 'normal', content: '这里是普通事项.' }
-    ]; break;
-  case 10:
-    listData = [
-      { type: 'warn', content: '这里是警告事项.' },
-      { type: 'normal', content: '这里是普通事项.' },
-      { type: 'error', content: '这里是错误事项.' }
-    ]; break;
-  case 15:
-    listData = [
-      { type: 'warn', content: '这里是警告事项.' },
-      { type: 'normal', content: '这里是普通事项好长啊。。....' },
-      { type: 'error', content: '这里是错误事项.' },
-      { type: 'error', content: '这里是错误事项.' },
-      { type: 'error', content: '这里是错误事项.' },
-      { type: 'error', content: '这里是错误事项.' }
-    ]; break;
-  default:
+    case 8:
+      listData = [
+        { type: 'warn', content: '这里是警告事项.' },
+        { type: 'normal', content: '这里是普通事项.' }
+      ]; break;
+    case 10:
+      listData = [
+        { type: 'warn', content: '这里是警告事项.' },
+        { type: 'normal', content: '这里是普通事项.' },
+        { type: 'error', content: '这里是错误事项.' }
+      ]; break;
+    case 15:
+      listData = [
+        { type: 'warn', content: '这里是警告事项.' },
+        { type: 'normal', content: '这里是普通事项好长啊。。....' },
+        { type: 'error', content: '这里是错误事项.' },
+        { type: 'error', content: '这里是错误事项.' },
+        { type: 'error', content: '这里是错误事项.' },
+        { type: 'error', content: '这里是错误事项.' }
+      ]; break;
+    default:
  }
  return listData || [];
 }

 function dateCellRender(value) {
  let listData = getListData(value);
-  return <ul className="events">
-    {listData.map((item, index) =>
-      <li key={index}>
-        <span className={`event-${item.type}`}>●</span>
-        {item.content}
-      </li>
-    )}
-  </ul>;
+  return (
+    <ul className="events">
+      {
+        listData.map((item, index) =>
+          <li key={index}>
+            <span className={`event-${item.type}`}>●</span>
+            {item.content}
+          </li>
+        )
+      }
+    </ul>
+  );
 }


@ -66,7 +70,7 @@ function monthCellRender(value) {

 ReactDOM.render(
  <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
-, document.getElementById('components-calendar-demo-notice-calendar'));
+, mountNode);
 ````


--- a/components/calendar/index.jsx
+++ b/components/calendar/index.jsx
@ -1,15 +1,15 @@
-import React, {PropTypes, Component} from 'react';
+import React, { PropTypes, Component } from 'react';
 import GregorianCalendar from 'gregorian-calendar';
 import zhCN from './locale/zh_CN';
 import FullCalendar from 'rc-calendar/lib/FullCalendar';
-import {PREFIX_CLS} from './Constants';
+import { PREFIX_CLS } from './Constants';
 import Header from './Header';

-function noop () { return null; }
+function noop() { return null; }

-function zerofixed (v) {
-  if (v < 10) return '0' + v;
-  return v + '';
+function zerofixed(v) {
+  if (v < 10) return `0${v}`;
+  return `${v}`;
 }

 class Calendar extends Component {
@ -35,25 +35,29 @@ class Calendar extends Component {
  monthCellRender(value, locale) {
    const prefixCls = this.props.prefixCls;
    const month = value.getMonth();
-    return <div className={`${prefixCls}-month`}>
-      <div className={`${prefixCls}-value`}>
-        {locale.format.shortMonths[month]}
+    return (
+      <div className={`${prefixCls}-month`}>
+        <div className={`${prefixCls}-value`}>
+          {locale.format.shortMonths[month]}
+        </div>
+        <div className={`${prefixCls}-content`}>
+          {this.props.monthCellRender(value)}
+        </div>
      </div>
-      <div className={`${prefixCls}-content`}>
-        {this.props.monthCellRender(value)}
-      </div>
-    </div>;
+    );
  }
  dateCellRender(value) {
    const prefixCls = this.props.prefixCls;
-    return <div className={`${prefixCls}-date`}>
-      <div className={`${prefixCls}-value`}>
-        {zerofixed(value.getDayOfMonth())}
+    return (
+      <div className={`${prefixCls}-date`}>
+        <div className={`${prefixCls}-value`}>
+          {zerofixed(value.getDayOfMonth())}
+        </div>
+        <div className={`${prefixCls}-content`}>
+          {this.props.dateCellRender(value)}
+        </div>
      </div>
-      <div className={`${prefixCls}-content`}>
-        {this.props.dateCellRender(value)}
-      </div>
-    </div>;
+    );
  }
  setValue(value) {
    if (!('value' in this.props) && this.state.value !== value) {
@ -70,13 +74,13 @@ class Calendar extends Component {
  }
  render() {
    const props = this.props;
-    const {value, mode} = this.state;
-    const {locale, prefixCls, style, className, fullscreen} = props;
+    const { value, mode } = this.state;
+    const { locale, prefixCls, style, className, fullscreen } = props;
    const type = (mode === 'year') ? 'month' : 'date';

    let cls = className || '';
    if (fullscreen) {
-      cls += (' ' + prefixCls + '-fullscreen');
+      cls += (` ${prefixCls}-fullscreen`);
    }

    return (
@ -88,7 +92,7 @@ class Calendar extends Component {
          locale={locale.lang}
          prefixCls={prefixCls}
          onTypeChange={this.setType.bind(this)}
-          onValueChange={this.setValue.bind(this)}/>
+          onValueChange={this.setValue.bind(this)} />
        <FullCalendar
          {...props}
          Select={noop}
--- a/components/carousel/demo/autoplay.md
+++ b/components/carousel/demo/autoplay.md
@ -16,6 +16,6 @@ ReactDOM.render(
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
  </Carousel>
-, document.getElementById('components-carousel-demo-autoplay'));
+, mountNode);
 ````

--- a/components/carousel/demo/basic.md
+++ b/components/carousel/demo/basic.md
@ -20,5 +20,5 @@ ReactDOM.render(
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
  </Carousel>
-, document.getElementById('components-carousel-demo-basic'));
+, mountNode);
 ````
--- a/components/carousel/demo/fade.md
+++ b/components/carousel/demo/fade.md
@ -16,6 +16,6 @@ ReactDOM.render(
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
  </Carousel>
-, document.getElementById('components-carousel-demo-fade'));
+, mountNode);
 ````

--- a/components/carousel/demo/vertical.md
+++ b/components/carousel/demo/vertical.md
@ -16,5 +16,5 @@ ReactDOM.render(
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
  </Carousel>
-, document.getElementById('components-carousel-demo-vertical'));
+, mountNode);
 ````
--- a/components/carousel/index.jsx
+++ b/components/carousel/index.jsx
@ -4,10 +4,10 @@ if (typeof window !== 'undefined') {
  const matchMediaPolyfill = function matchMediaPolyfill() {
    return {
      matches: false,
-      addListener: function () {
+      addListener() {
+      },
+      removeListener() {
      },
-      removeListener: function () {
-      }
    };
  };
  window.matchMedia = window.matchMedia || matchMediaPolyfill;
@ -21,7 +21,7 @@ const AntCarousel = React.createClass({
  getDefaultProps() {
    return {
      dots: true,
-      arrows: false
+      arrows: false,
    };
  },
  render() {
@ -34,7 +34,7 @@ const AntCarousel = React.createClass({

    let className = 'ant-carousel';
    if (props.vertical) {
-      className = className + ' ant-carousel-vertical';
+      className = `${className} ant-carousel-vertical`;
    }

    return (
--- a/components/cascader/demo/basic.md
+++ b/components/cascader/demo/basic.md
@ -0,0 +1,43 @@
+# 基本
+
+- order: 0
+
+省市区级联。
+
+---
+
+````jsx
+import { Cascader } from 'antd';
+
+const options = [{
+  value: 'zhejiang',
+  label: '浙江',
+  children: [{
+    value: 'hangzhou',
+    label: '杭州',
+    children: [{
+      value: 'xihu',
+      label: '西湖',
+    }],
+  }],
+}, {
+  value: 'jiangsu',
+  label: '江苏',
+  children: [{
+    value: 'nanjing',
+    label: '南京',
+    children: [{
+      value: 'zhonghuamen',
+      label: '中华门',
+    }],
+  }],
+}];
+
+function onChange(value) {
+  console.log(value);
+}
+
+ReactDOM.render(
+  <Cascader options={options} onChange={onChange} />
+, mountNode);
+````
--- a/components/cascader/demo/change-on-select.md
+++ b/components/cascader/demo/change-on-select.md
@ -0,0 +1,43 @@
+# 选择即改变
+
+- order: 5
+
+这种交互允许只选中父级选项。
+
+---
+
+````jsx
+import { Cascader } from 'antd';
+
+const options = [{
+  value: 'zhejiang',
+  label: '浙江',
+  children: [{
+    value: 'hangzhou',
+    label: '杭州',
+    children: [{
+      value: 'xihu',
+      label: '西湖',
+    }],
+  }],
+}, {
+  value: 'jiangsu',
+  label: '江苏',
+  children: [{
+    value: 'nanjing',
+    label: '南京',
+    children: [{
+      value: 'zhonghuamen',
+      label: '中华门',
+    }],
+  }],
+}];
+
+function onChange(value) {
+  console.log(value);
+}
+
+ReactDOM.render(
+  <Cascader options={options} onChange={onChange} changeOnSelect />
+, mountNode);
+````
--- a/components/cascader/demo/custom-trigger.md
+++ b/components/cascader/demo/custom-trigger.md
@ -0,0 +1,53 @@
+# 可以自定义显示
+
+- order: 1
+
+切换按钮和结果分开。
+
+---
+
+````jsx
+import { Cascader } from 'antd';
+
+const options = [{
+  value: 'zhejiang',
+  label: '浙江',
+  children: [{
+    value: 'hangzhou',
+    label: '杭州',
+  }],
+}, {
+  value: 'jiangsu',
+  label: '江苏',
+  children: [{
+    value: 'nanjing',
+    label: '南京',
+  }],
+}];
+
+const CitySwitcher = React.createClass({
+  getInitialState() {
+    return {
+      text: '未选择',
+    };
+  },
+  onChange(value, selectedOptions) {
+    this.setState({
+      text: selectedOptions.map(o => o.label).join(', '),
+    });
+  },
+  render() {
+    return (
+      <span>
+        {this.state.text}
+        &nbsp;
+        <Cascader options={options} onChange={this.onChange}>
+          <a href="#">切换城市</a>
+        </Cascader>
+      </span>
+    );
+  },
+});
+
+ReactDOM.render(<CitySwitcher />, mountNode);
+````
--- a/components/cascader/demo/default-value.md
+++ b/components/cascader/demo/default-value.md
@ -0,0 +1,43 @@
+# 默认值
+
+- order: 0
+
+默认值通过数组的方式指定。
+
+---
+
+````jsx
+import { Cascader } from 'antd';
+
+const options = [{
+  value: 'zhejiang',
+  label: '浙江',
+  children: [{
+    value: 'hangzhou',
+    label: '杭州',
+    children: [{
+      value: 'xihu',
+      label: '西湖',
+    }],
+  }],
+}, {
+  value: 'jiangsu',
+  label: '江苏',
+  children: [{
+    value: 'nanjing',
+    label: '南京',
+    children: [{
+      value: 'zhonghuamen',
+      label: '中华门',
+    }],
+  }],
+}];
+
+function onChange(value) {
+  console.log(value);
+}
+
+ReactDOM.render(
+  <Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} onChange={onChange} />
+, mountNode);
+````
--- a/components/cascader/demo/disabled-option.md
+++ b/components/cascader/demo/disabled-option.md
@ -0,0 +1,44 @@
+# 禁用选项
+
+- order: 4
+
+通过指定 options 里的 `disabled` 字段。
+
+---
+
+````jsx
+import { Cascader } from 'antd';
+
+const options = [{
+  value: 'zhejiang',
+  label: '浙江',
+  children: [{
+    value: 'hangzhou',
+    label: '杭州',
+    children: [{
+      value: 'xihu',
+      label: '西湖',
+    }],
+  }],
+}, {
+  value: 'jiangsu',
+  label: '江苏',
+  disabled: true,
+  children: [{
+    value: 'nanjing',
+    label: '南京',
+    children: [{
+      value: 'zhonghuamen',
+      label: '中华门',
+    }],
+  }],
+}];
+
+function onChange(value) {
+  console.log(value);
+}
+
+ReactDOM.render(
+  <Cascader options={options} onChange={onChange} />
+, mountNode);
+````
--- a/components/cascader/demo/hover.md
+++ b/components/cascader/demo/hover.md
@ -0,0 +1,49 @@
+# 移入展开
+
+- order: 2
+
+通过移入展开下级菜单，点击完成选择。
+
+---
+
+````jsx
+import { Cascader } from 'antd';
+
+const options = [{
+  value: 'zhejiang',
+  label: '浙江',
+  children: [{
+    value: 'hangzhou',
+    label: '杭州',
+    children: [{
+      value: 'xihu',
+      label: '西湖',
+    }],
+  }],
+}, {
+  value: 'jiangsu',
+  label: '江苏',
+  children: [{
+    value: 'nanjing',
+    label: '南京',
+    children: [{
+      value: 'zhonghuamen',
+      label: '中华门',
+    }],
+  }],
+}];
+
+function onChange(value) {
+  console.log(value);
+}
+
+// 只展示最后一项
+function displayRender(label) {
+  return label[label.length - 1];
+}
+
+ReactDOM.render(
+  <Cascader options={options} expandTrigger="hover"
+    displayRender={displayRender} onChange={onChange} />
+, mountNode);
+````
--- a/components/cascader/demo/size.md
+++ b/components/cascader/demo/size.md
@ -0,0 +1,47 @@
+# 大小
+
+- order: 7
+
+不同大小的级联选择器。
+
+---
+
+````jsx
+import { Cascader } from 'antd';
+
+const options = [{
+  value: 'zhejiang',
+  label: '浙江',
+  children: [{
+    value: 'hangzhou',
+    label: '杭州',
+    children: [{
+      value: 'xihu',
+      label: '西湖',
+    }],
+  }],
+}, {
+  value: 'jiangsu',
+  label: '江苏',
+  children: [{
+    value: 'nanjing',
+    label: '南京',
+    children: [{
+      value: 'zhonghuamen',
+      label: '中华门',
+    }],
+  }],
+}];
+
+function onChange(value) {
+  console.log(value);
+}
+
+ReactDOM.render(
+  <div>
+    <Cascader size="large" options={options} onChange={onChange} /><br /><br />
+    <Cascader options={options} onChange={onChange} /><br /><br />
+    <Cascader size="small" options={options} onChange={onChange} /><br /><br />
+  </div>
+, mountNode);
+````
--- a/components/cascader/index.jsx
+++ b/components/cascader/index.jsx
@ -0,0 +1,118 @@
+import React from 'react';
+import Cascader from 'rc-cascader';
+import Input from '../input';
+import Icon from '../icon';
+import arrayTreeFilter from 'array-tree-filter';
+import classNames from 'classnames';
+
+class AntCascader extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.value || props.defaultValue || [],
+      popupVisible: false,
+    };
+    [
+      'handleChange',
+      'handlePopupVisibleChange',
+      'setValue',
+      'getLabel',
+      'clearSelection',
+    ].forEach((method) => this[method] = this[method].bind(this));
+  }
+  componentWillReceiveProps(nextProps) {
+    if ('value' in nextProps) {
+      this.setState({ value: nextProps.value || [] });
+    }
+  }
+  handleChange(value, selectedOptions) {
+    this.setValue(value, selectedOptions);
+  }
+  handlePopupVisibleChange(popupVisible) {
+    this.setState({ popupVisible });
+    this.props.onPopupVisibleChange(popupVisible);
+  }
+  setValue(value, selectedOptions = []) {
+    if (!('value' in this.props)) {
+      this.setState({ value });
+    }
+    this.props.onChange(value, selectedOptions);
+  }
+  getLabel() {
+    const { options, displayRender } = this.props;
+    const label = arrayTreeFilter(options, (o, level) => o.value === this.state.value[level])
+      .map(o => o.label);
+    return displayRender(label);
+  }
+  clearSelection(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.setValue([]);
+    this.setState({ popupVisible: false });
+  }
+  render() {
+    const { prefixCls, children, placeholder, size, disabled,
+            className, style, allowClear, ...otherProps } = this.props;
+    const sizeCls = classNames({
+      'ant-input-lg': size === 'large',
+      'ant-input-sm': size === 'small',
+    });
+    const clearIcon = (allowClear && !disabled && this.state.value.length > 0) ?
+      <Icon type="cross-circle"
+        className={`${prefixCls}-picker-clear`}
+        onClick={this.clearSelection} /> : null;
+    const arrowCls = classNames({
+      [`${prefixCls}-picker-arrow`]: true,
+      [`${prefixCls}-picker-arrow-expand`]: this.state.popupVisible,
+    });
+    const pickerCls = classNames({
+      [className]: !!className,
+      [`${prefixCls}-picker`]: true,
+      [`${prefixCls}-picker-disabled`]: disabled,
+    });
+
+    // Fix bug of https://github.com/facebook/react/pull/5004
+    delete otherProps.onChange;
+
+    return (
+      <Cascader {...this.props}
+        value={this.state.value}
+        popupVisible={this.state.popupVisible}
+        onPopupVisibleChange={this.handlePopupVisibleChange}
+        onChange={this.handleChange}>
+        {children ||
+          <span
+            style={style}
+            className={pickerCls}>
+            <Input {...otherProps}
+              placeholder={placeholder}
+              className={`${prefixCls}-input ant-input ${sizeCls}`}
+              style={{ width: '100%' }}
+              value={this.getLabel()}
+              disabled={disabled}
+              readOnly />
+            {clearIcon}
+            <Icon type="down" className={arrowCls} />
+          </span>
+        }
+      </Cascader>
+    );
+  }
+}
+
+AntCascader.defaultProps = {
+  prefixCls: 'ant-cascader',
+  placeholder: '请选择',
+  transitionName: 'slide-up',
+  popupPlacement: 'bottomLeft',
+  onChange() {},
+  options: [],
+  displayRender(label) {
+    return label.join(' / ');
+  },
+  disabled: false,
+  allowClear: true,
+  onPopupVisibleChange() {},
+};
+
+export default AntCascader;
--- a/components/cascader/index.md
+++ b/components/cascader/index.md
@ -0,0 +1,38 @@
+# Cascader
+
+- category: Components
+- chinese: 级联选择
+- type: 表单
+
+---
+
+级联选择框。
+
+
+## 何时使用
+
+- 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
+- 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
+- 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。
+
+## API
+
+```html
+<Cascader options={options} onChange={onChange} />
+```
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| options | 可选项数据源 | object | - |
+| defaultValue | 默认的选中项 | array  |[] |
+| value | 指定选中项 | array  | - |
+| onChange | 选择完成后的回调 | `function(value, selectedOptions)` | - |
+| displayRender | 选择后展示的渲染函数 | `function(label)`` | `function(label) { return label.join(' / ') }` |
+| style | 自定义样式 | string | - |
+| className | 自定义类名 | string | - |
+| popupClassName | 自定义浮层类名 | string | - |
+| popupPlacement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` |
+| placeholder | 输入框占位文本 | string | '请选择' |
+| size | 输入框大小，可选 `large` `default` `small` | string | `default` |
+| disabled | 禁用 | boolean | false |
+| allowClear | 是否支持清除 | boolean | true |
--- a/components/checkbox/Group.jsx
+++ b/components/checkbox/Group.jsx
@ -5,6 +5,7 @@ export default React.createClass({
  getDefaultProps() {
    return {
      options: [],
+      defaultValue: [],
      onChange() {},
    };
  },
@ -15,21 +16,25 @@ export default React.createClass({
    onChange: React.PropTypes.func,
  },
  getInitialState() {
-    const { value, defaultValue } = this.props;
-    return {
-      value: value || defaultValue || [],
-    };
+    const props = this.props;
+    let value;
+    if ('value' in props) {
+      value = props.value;
+    } else if ('defaultValue' in props) {
+      value = props.defaultValue;
+    }
+    return { value };
  },
  componentWillReceiveProps(nextProps) {
    if ('value' in nextProps) {
      this.setState({
-        value: nextProps.value,
+        value: nextProps.value || [],
      });
    }
  },
  toggleOption(option) {
    const optionIndex = this.state.value.indexOf(option);
-    const value = this.state.value;
+    const value = [...this.state.value];
    if (optionIndex === - 1) {
      value.push(option);
    } else {
@ -42,17 +47,19 @@ export default React.createClass({
  },
  render() {
    const options = this.props.options;
-    return <div className="ant-checkbox-group">
-      {
-        options.map(option =>
-          <label className="ant-checkbox-group-item" key={option}>
-            <Checkbox disabled={this.props.disabled}
-            checked={this.state.value.indexOf(option) !== -1}
-            onChange={this.toggleOption.bind(this, option)} />
-            {option}
-          </label>
-        )
-      }
-    </div>;
+    return (
+      <div className="ant-checkbox-group">
+        {
+          options.map(option =>
+            <label className="ant-checkbox-group-item" key={option}>
+              <Checkbox disabled={this.props.disabled}
+                checked={this.state.value.indexOf(option) !== -1}
+                onChange={this.toggleOption.bind(this, option)} />
+              {option}
+            </label>
+          )
+        }
+      </div>
+    );
  },
 });
--- a/components/checkbox/demo/basic.md
+++ b/components/checkbox/demo/basic.md
@ -10,11 +10,11 @@
 import { Checkbox } from 'antd';

 function onChange(e) {
-  console.log('checked = ' + e.target.checked);
+  console.log(`checked = ${e.target.checked}`);
 }

 ReactDOM.render(<label>
  <Checkbox defaultChecked={false} onChange={onChange} />
  Checkbox
-</label>, document.getElementById('components-checkbox-demo-basic'));
+</label>, mountNode);
 ````
--- a/components/checkbox/demo/controller.md
+++ b/components/checkbox/demo/controller.md
@ -17,35 +17,36 @@ const App = React.createClass({
    };
  },
  render() {
-    const label = (this.state.checked ? '选中' : '取消') + '-' +
-      (this.state.disabled ? '不可用' : '可用');
-    return <div>
-      <p style={{marginBottom: '20px'}}>
-        <label>
-          <Checkbox checked={this.state.checked}
-            disabled={this.state.disabled}
-            onChange={this.onChange} />
-            {label}
-        </label>
-      </p>
-      <p>
-        <Button type="primary" size="small"
-          onClick={this.toggleChecked}>
-          {!this.state.checked ? '选中' : '取消'}
-        </Button>
-        <Button style={{marginLeft: '10px'}}
-          type="primary" size="small"
-          onClick={this.toggleDisable}>
-          {!this.state.disabled ? '不可用' : '可用'}
-        </Button>
-      </p>
-    </div>;
+    const label = `${this.state.checked ? '选中' : '取消'}-${this.state.disabled ? '不可用' : '可用'}`;
+    return (
+      <div>
+        <p style={{ marginBottom: '20px' }}>
+          <label>
+            <Checkbox checked={this.state.checked}
+              disabled={this.state.disabled}
+              onChange={this.onChange} />
+              {label}
+            </label>
+          </p>
+          <p>
+            <Button type="primary" size="small"
+              onClick={this.toggleChecked}>
+              {!this.state.checked ? '选中' : '取消'}
+            </Button>
+            <Button style={{ marginLeft: '10px' }}
+              type="primary" size="small"
+              onClick={this.toggleDisable}>
+              {!this.state.disabled ? '不可用' : '可用'}
+            </Button>
+          </p>
+        </div>
+    );
  },
  toggleChecked() {
-    this.setState({checked: !this.state.checked});
+    this.setState({ checked: !this.state.checked });
  },
  toggleDisable() {
-    this.setState({disabled: !this.state.disabled});
+    this.setState({ disabled: !this.state.disabled });
  },
  onChange(e) {
    console.log('checked = ', e.target.checked);
@ -55,5 +56,5 @@ const App = React.createClass({
  }
 });

-ReactDOM.render(<App />, document.getElementById('components-checkbox-demo-controller'));
+ReactDOM.render(<App />, mountNode);
 ````
--- a/components/checkbox/demo/disable.md
+++ b/components/checkbox/demo/disable.md
@ -13,5 +13,5 @@ ReactDOM.render(<div>
  <Checkbox defaultChecked={false} disabled />
  <br />
  <Checkbox defaultChecked disabled />
-</div>, document.getElementById('components-checkbox-demo-disable'));
+</div>, mountNode);
 ````
--- a/components/checkbox/demo/group.md
+++ b/components/checkbox/demo/group.md
@ -2,7 +2,7 @@

 - order: 3

-方便的生成一个 Checkbox 组。
+方便的从数组生成 Checkbox 组。若需要 label 和 value 分离请直接使用 Checkbox。

 ---

@ -16,5 +16,5 @@ function onChange(checkedValues) {

 ReactDOM.render(
  <CheckboxGroup options={['Apple', 'Pear', 'Orange']} defaultValue={['Apple']} onChange={onChange} />
-, document.getElementById('components-checkbox-demo-group'));
+, mountNode);
 ````
--- a/components/checkbox/index.md
+++ b/components/checkbox/index.md
@ -10,8 +10,8 @@

 ## 何时使用

- 需要表示开关状态/两种状态之间的切换时；
- 和 `switch`的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。
+- 在一组可选项中进行多项选择时；
+- 单独使用可以表示两种状态之间的切换，和 `switch` 类似。区别在于切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。

 ## API

--- a/components/collapse/demo/accordion.md
+++ b/components/collapse/demo/accordion.md
@ -18,15 +18,15 @@ const text = `

 ReactDOM.render(
  <Collapse accordion>
-    <Panel header={`This is panel header 1`} key="1">
+    <Panel header={'This is panel header 1'} key="1">
      <p>{text}</p>
    </Panel>
-    <Panel header={`This is panel header 2`} key="2">
+    <Panel header={'This is panel header 2'} key="2">
      <p>{text}</p>
    </Panel>
-    <Panel header={`This is panel header 3`} key="3">
+    <Panel header={'This is panel header 3'} key="3">
      <p>{text}</p>
    </Panel>
  </Collapse>
-, document.getElementById('components-collapse-demo-accordion'));
+, mountNode);
 ````
--- a/components/collapse/demo/basic.md
+++ b/components/collapse/demo/basic.md
@ -32,5 +32,5 @@ ReactDOM.render(
      <p>{text}</p>
    </Panel>
  </Collapse>
-, document.getElementById('components-collapse-demo-basic'));
+, mountNode);
 ````
--- a/components/collapse/demo/mix.md
+++ b/components/collapse/demo/mix.md
@ -22,19 +22,19 @@ const text = `

 ReactDOM.render(
  <Collapse onChange={callback} accordion>
-    <Panel header={`This is panel header 1`} key="1">
+    <Panel header={'This is panel header 1'} key="1">
      <Collapse defaultActiveKey="1">
-        <Panel header={`This is panel nest panel`} key="1">
+        <Panel header={'This is panel nest panel'} key="1">
          <p>{text}</p>
        </Panel>
      </Collapse>
    </Panel>
-    <Panel header={`This is panel header 2`} key="2">
+    <Panel header={'This is panel header 2'} key="2">
      <p>{text}</p>
    </Panel>
-    <Panel header={`This is panel header 3`} key="3">
+    <Panel header={'This is panel header 3'} key="3">
      <p>{text}</p>
    </Panel>
  </Collapse>
-, document.getElementById('components-collapse-demo-mix'));
+, mountNode);
 ````
--- a/components/collapse/index.jsx
+++ b/components/collapse/index.jsx
@ -1,6 +1,5 @@
 import Collapse from 'rc-collapse';
 import React from 'react';
-const prefixCls = 'ant-collapse';

 class AntCollapse extends React.Component {
  render() {
@ -9,7 +8,7 @@ class AntCollapse extends React.Component {
 }

 AntCollapse.defaultProps = {
-  prefixCls: prefixCls
+  prefixCls: 'ant-collapse',
 };

 AntCollapse.Panel = Collapse.Panel;
--- a/components/common/openAnimation.js
+++ b/components/common/openAnimation.js
@ -14,10 +14,12 @@ function animate(node, show, transitionName, done) {
  }

  // Fix safari flash bug
+  /*eslint-disable */
  node.style.display = show ? 'block' : 'none';
+  /*eslint-enable */
  velocity(node, transitionName, {
    duration: 240,
-    complete: complete,
+    complete,
    easing: 'easeInOutQuad'
  });
  return {
--- a/components/date-picker/PickerMixin.jsx
+++ b/components/date-picker/PickerMixin.jsx
@ -13,7 +13,7 @@ export default {

  getFormatter() {
    const formats = this.formats = this.formats || {};
-    const format = this.props.format;
+    let format = this.props.format;
    if (formats[format]) {
      return formats[format];
    }
@ -24,21 +24,20 @@ export default {
  parseDateFromValue(value) {
    if (value) {
      if (typeof value === 'string') {
-        return this.getFormatter().parse(value, {locale: this.getLocale()});
+        return this.getFormatter().parse(value, { locale: this.getLocale() });
      } else if (value instanceof Date) {
        let date = new GregorianCalendar(this.getLocale());
        date.setTime(+value);
        return date;
      }
-    } else if (value === null) {
-      return value;
    }
-    return undefined;
+    return value;
  },

  // remove input readonly warning
  handleInputChange() {
  },
+
  toggleOpen(e) {
    this.setState({
      open: e.open
--- a/components/date-picker/RangePicker.jsx
+++ b/components/date-picker/RangePicker.jsx
@ -16,7 +16,9 @@ export default React.createClass({
      transitionName: 'slide-up',
      popupStyle: {},
      onChange() {
-      },  // onChange 可用于 Validator
+      },
+      onOk() {
+      },
      locale: {},
      align: {
        offset: [0, -9],
@ -25,7 +27,7 @@ export default React.createClass({
    };
  },
  getInitialState() {
-    const {value, defaultValue} = this.props;
+    const { value, defaultValue } = this.props;
    const start = (value && value[0]) || defaultValue[0];
    const end = (value && value[1]) || defaultValue[1];
    return {
@ -35,11 +37,12 @@ export default React.createClass({
      ]
    };
  },
-  mixins: [ PickerMixin ],
+  mixins: [PickerMixin],
  componentWillReceiveProps(nextProps) {
    if ('value' in nextProps) {
-      const start = this.parseDateFromValue(nextProps.value[0]);
-      const end = this.parseDateFromValue(nextProps.value[1]);
+      const value = nextProps.value || [];
+      const start = this.parseDateFromValue(value[0]);
+      const end = this.parseDateFromValue(value[1]);
      this.setState({
        value: [start, end]
      });
@ -61,28 +64,55 @@ export default React.createClass({
    let defaultCalendarValue = new GregorianCalendar(locale);
    defaultCalendarValue.setTime(Date.now());

-    const {disabledDate, showTime, size, startPlaceholder, endPlaceholder,
-           transitionName, disabled, popupStyle, align, style} = this.props;
+    const { disabledDate, showTime, size, startPlaceholder, endPlaceholder, getCalendarContainer,
+      transitionName, disabled, popupStyle, align, style, onOk } = this.props;
    const state = this.state;

-    const timePicker = showTime
-      ? <TimePicker prefixCls="ant-time-picker"
-          placeholder={locale.lang.timePlaceholder}
-          transitionName="slide-up" />
-      : null;
+    let timePicker = null;
+
+    if (showTime) {
+      timePicker = (<TimePicker
+        prefixCls="ant-time-picker"
+        placeholder={locale.lang.timePlaceholder}
+        transitionName="slide-up" />);
+    }

    const calendarClassName = classNames({
      ['ant-calendar-time']: this.props.showTime,
    });

-    const calendar = <RangeCalendar prefixCls="ant-calendar"
-                        className={calendarClassName}
-                        timePicker={timePicker}
-                        disabledDate={disabledDate}
-                        dateInputPlaceholder={[startPlaceholder, endPlaceholder]}
-                        locale={locale.lang}
-                        defaultValue={defaultCalendarValue}
-                        showClear />;
+    let pickerChangeHandler = {
+      onChange: this.handleChange,
+    };
+
+    let calendarHandler = {
+      onOk: this.handleChange,
+    };
+
+    if (timePicker) {
+      pickerChangeHandler.onChange = (value) => {
+        // Click clear button
+        if (value === null || value.length === 0) {
+          this.handleChange(value);
+        }
+      };
+    } else {
+      calendarHandler = {};
+    }
+
+    const calendar = (
+      <RangeCalendar
+        prefixCls="ant-calendar"
+        className={calendarClassName}
+        timePicker={timePicker}
+        disabledDate={disabledDate}
+        dateInputPlaceholder={[startPlaceholder, endPlaceholder]}
+        locale={locale.lang}
+        onOk={onOk}
+        defaultValue={[defaultCalendarValue, defaultCalendarValue]}
+        {...calendarHandler}
+      />
+    );

    const pickerClass = classNames({
      'ant-calendar-picker': true,
@ -105,22 +135,26 @@ export default React.createClass({
        prefixCls="ant-calendar-picker-container"
        style={popupStyle}
        align={align}
+        getCalendarContainer={getCalendarContainer}
        onOpen={this.toggleOpen}
        onClose={this.toggleOpen}
-        onChange={this.handleChange}>
+        {...pickerChangeHandler}
+      >
        {
-          ({value}) => {
+          ({ value }) => {
            const start = value[0];
            const end = value[1];
            return (
              <span className={pickerInputClass} disabled={disabled}>
-                <input disabled={disabled}
+                <input
+                  disabled={disabled}
                  onChange={this.handleInputChange}
                  value={start && this.getFormatter().format(start)}
                  placeholder={startPlaceholder}
                  className="ant-calendar-range-picker-input" />
                <span className="ant-calendar-range-picker-separator"> ~ </span>
-                <input disabled={disabled}
+                <input
+                  disabled={disabled}
                  onChange={this.handleInputChange}
                  value={end && this.getFormatter().format(end)}
                  placeholder={endPlaceholder}
--- a/components/date-picker/demo/basic.md
+++ b/components/date-picker/demo/basic.md
@ -13,7 +13,5 @@ function onChange(value) {
  console.log(value);
 }

-ReactDOM.render(
-  <DatePicker onChange={onChange} />
-, document.getElementById('components-date-picker-demo-basic'));
+ReactDOM.render(<DatePicker onChange={onChange} />, mountNode);
 ````
--- a/components/date-picker/demo/disabled-date.md
+++ b/components/date-picker/demo/disabled-date.md
@ -11,12 +11,12 @@
 ````jsx
 import { DatePicker } from 'antd';

-const disabledDate = function(current) {
+const disabledDate = function (current) {
  // can not select days after today
  return current && current.getTime() > Date.now();
 };

 ReactDOM.render(
  <DatePicker disabledDate={disabledDate} />
-, document.getElementById('components-date-picker-demo-disabled-date'));
+, mountNode);
 ````
--- a/components/date-picker/demo/disabled.md
+++ b/components/date-picker/demo/disabled.md
@ -11,5 +11,5 @@ import { DatePicker } from 'antd';

 ReactDOM.render(
  <DatePicker defaultValue="2015-06-06" disabled />
-, document.getElementById('components-date-picker-demo-disabled'));
+, mountNode);
 ````
--- a/components/date-picker/demo/formatter.md
+++ b/components/date-picker/demo/formatter.md
@ -11,5 +11,5 @@ import { DatePicker } from 'antd';

 ReactDOM.render(
  <DatePicker defaultValue="2015/01/01" format="yyyy/MM/dd" />
-, document.getElementById('components-date-picker-demo-formatter'));
+, mountNode);
 ````
--- a/components/date-picker/demo/locale.md
+++ b/components/date-picker/demo/locale.md
@ -26,6 +26,6 @@ const App = React.createClass({
  }
 });

-ReactDOM.render(<App />, document.getElementById('components-date-picker-demo-locale'));
+ReactDOM.render(<App />, mountNode);
 ````

--- a/components/date-picker/demo/month-picker.md
+++ b/components/date-picker/demo/month-picker.md
@ -11,5 +11,5 @@ import { DatePicker } from 'antd';
 const MonthPicker = DatePicker.MonthPicker;
 ReactDOM.render(
  <MonthPicker defaultValue="2015-12" />
-, document.getElementById('components-date-picker-demo-month-picker'));
+, mountNode);
 ````
--- a/components/date-picker/demo/range.md
+++ b/components/date-picker/demo/range.md
@ -14,8 +14,8 @@ function onChange(value) {
  console.log('From: ', value[0], ', to: ', value[1]);
 }
 ReactDOM.render(<div>
-  <RangePicker style={{width: 184}} onChange={onChange} />
+  <RangePicker style={{ width: 184 }} onChange={onChange} />
  <br />
-  <RangePicker showTime format="yyyy-MM-dd HH:mm:ss" onChange={onChange} />
-</div>, document.getElementById('components-date-picker-demo-range'));
+  <RangePicker showTime format="yyyy/MM/dd HH:mm:ss" onChange={onChange} />
+</div>, mountNode);
 ````
--- a/components/date-picker/demo/size.md
+++ b/components/date-picker/demo/size.md
@ -15,5 +15,5 @@ ReactDOM.render(
    <DatePicker />
    <DatePicker size="small" />
  </div>
-, document.getElementById('components-date-picker-demo-size'));
+, mountNode);
 ````
--- a/components/date-picker/demo/start-end.md
+++ b/components/date-picker/demo/start-end.md
@ -35,20 +35,22 @@ const DateRange = React.createClass({
    });
  },
  render() {
-    return <div>
-      <DatePicker disabledDate={this.disabledStartDate}
-        value={this.state.startValue}
-        placeholder="开始日期"
-        onChange={this.onChange.bind(this, 'startValue')} />
-      <DatePicker disabledDate={this.disabledEndDate}
-        value={this.state.endValue}
-        placeholder="结束日期"
-        onChange={this.onChange.bind(this, 'endValue')} />
-    </div>;
+    return (
+      <div>
+        <DatePicker disabledDate={this.disabledStartDate}
+          value={this.state.startValue}
+          placeholder="开始日期"
+          onChange={this.onChange.bind(this, 'startValue')} />
+        <DatePicker disabledDate={this.disabledEndDate}
+          value={this.state.endValue}
+          placeholder="结束日期"
+          onChange={this.onChange.bind(this, 'endValue')} />
+      </div>
+    );
  }
 });

 ReactDOM.render(
  <DateRange />
-, document.getElementById('components-date-picker-demo-start-end'));
+, mountNode);
 ````
--- a/components/date-picker/demo/time.md
+++ b/components/date-picker/demo/time.md
@ -2,7 +2,7 @@

 - order: 4

-增加选择时间功能。
+增加选择时间功能。不要修改时间的格式 `HH:mm:ss`。

 ---

@ -14,6 +14,6 @@ function onChange(value) {
 }

 ReactDOM.render(
-<DatePicker showTime format="yyyy-MM-dd HH:mm:ss" onChange={onChange} style={{width: 160}} />
-, document.getElementById('components-date-picker-demo-time'));
+<DatePicker showTime format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间" onChange={onChange} style={{ width: 160 }} />
+, mountNode);
 ````
--- a/components/date-picker/demo/with-time-picker.md
+++ b/components/date-picker/demo/with-time-picker.md
@ -3,7 +3,7 @@
 - order: 4
 - hidden: true

-和 [时间选择框](/components/timepicer) 配合使用。
+和 [时间选择框](/components/time-picker) 配合使用。

 ---

@ -37,10 +37,12 @@ const DateTimePicker = React.createClass({
    }
  },
  render() {
-    return <div>
-      <DatePicker onChange={this.handleChange.bind(null, 'date')} />
-      <TimePicker onChange={this.handleChange.bind(null, 'time')} />
-    </div>;
+    return (
+      <div>
+        <DatePicker onChange={this.handleChange.bind(null, 'date')} />
+        <TimePicker onChange={this.handleChange.bind(null, 'time')} />
+      </div>
+    );
  }
 });

@ -49,5 +51,5 @@ function onSelect(value) {
 }

 ReactDOM.render(<DateTimePicker onSelect={onSelect} />
-, document.getElementById('components-date-picker-demo-with-time-picker'));
+, mountNode);
 ````
--- a/components/date-picker/index.jsx
+++ b/components/date-picker/index.jsx
@ -17,12 +17,14 @@ function createPicker(TheCalendar, defaultFormat) {
        transitionName: 'slide-up',
        popupStyle: {},
        onChange() {
-        },  // onChange 可用于 Validator
+        },
+        onOk() {
+        },
        locale: {},
        align: {
          offset: [0, -9],
        },
-        open: false
+        open: false,
      };
    },
    getInitialState() {
@ -30,7 +32,7 @@ function createPicker(TheCalendar, defaultFormat) {
        value: this.parseDateFromValue(this.props.value || this.props.defaultValue)
      };
    },
-    mixins: [ PickerMixin ],
+    mixins: [PickerMixin],
    componentWillReceiveProps(nextProps) {
      if ('value' in nextProps) {
        this.setState({
@ -56,27 +58,49 @@ function createPicker(TheCalendar, defaultFormat) {
      const placeholder = ('placeholder' in this.props)
        ? this.props.placeholder : locale.lang.placeholder;

-      const timePicker = this.props.showTime
-        ? <TimePicker prefixCls="ant-time-picker"
-            placeholder={locale.lang.timePlaceholder}
-            transitionName="slide-up" />
+      const timePicker = this.props.showTime ? (<TimePicker
+        prefixCls="ant-time-picker"
+        placeholder={locale.lang.timePlaceholder}
+        transitionName="slide-up" />)
        : null;

+      const disabledTime = this.props.showTime ? this.props.disabledTime : null;
+
      const calendarClassName = classNames({
        ['ant-calendar-time']: this.props.showTime,
+        ['ant-calendar-month']: MonthCalendar === TheCalendar,
      });

+      let pickerChangeHandler = {
+        onChange: this.handleChange,
+      };
+
+      let calendarHandler = {
+        onOk: this.handleChange,
+      };
+
+      if (this.props.showTime) {
+        pickerChangeHandler.onChange = (value) => {
+          // Click clear button
+          if (value === null) {
+            this.handleChange(value);
+          }
+        };
+      } else {
+        calendarHandler = {};
+      }
+
      const calendar = (
        <TheCalendar
          disabledDate={this.props.disabledDate}
+          disabledTime={disabledTime}
          locale={locale.lang}
          timePicker={timePicker}
          defaultValue={defaultCalendarValue}
          dateInputPlaceholder={placeholder}
          prefixCls="ant-calendar"
          className={calendarClassName}
-          showOk={this.props.showTime}
-          showClear />
+          {...calendarHandler} />
      );

      let sizeClass = '';
@ -90,36 +114,40 @@ function createPicker(TheCalendar, defaultFormat) {
      if (this.state.open) {
        pickerClass += ' ant-calendar-picker-open';
      }
-
-      return <span className={pickerClass}>
-        <DatePicker
-          transitionName={this.props.transitionName}
-          disabled={this.props.disabled}
-          calendar={calendar}
-          value={this.state.value}
-          prefixCls="ant-calendar-picker-container"
-          style={this.props.popupStyle}
-          align={this.props.align}
-          onOpen={this.toggleOpen}
-          onClose={this.toggleOpen}
-          onChange={this.handleChange}>
-          {
-            ({value}) => {
-              return (
-                <span>
-                  <input disabled={this.props.disabled}
-                         onChange={this.handleInputChange}
-                         value={value && this.getFormatter().format(value)}
-                         placeholder={placeholder}
-                         style={this.props.style}
-                         className={'ant-calendar-picker-input ant-input' + sizeClass}/>
-                  <span className="ant-calendar-picker-icon"/>
-                </span>
-              );
+      return (
+        <span className={pickerClass}>
+          <DatePicker
+            transitionName={this.props.transitionName}
+            disabled={this.props.disabled}
+            calendar={calendar}
+            value={this.state.value}
+            prefixCls="ant-calendar-picker-container"
+            style={this.props.popupStyle}
+            align={this.props.align}
+            getCalendarContainer={this.props.getCalendarContainer}
+            onOpen={this.toggleOpen}
+            onClose={this.toggleOpen}
+            {...pickerChangeHandler}
+          >
+            {
+              ({ value }) => {
+                return (
+                  <span>
+                    <input
+                      disabled={this.props.disabled}
+                      onChange={this.handleInputChange}
+                      value={value && this.getFormatter().format(value)}
+                      placeholder={placeholder}
+                      style={this.props.style}
+                      className={`ant-calendar-picker-input ant-input${sizeClass}`} />
+                    <span className="ant-calendar-picker-icon" />
+                  </span>
+                );
+              }
            }
-          }
-        </DatePicker>
-      </span>;
+          </DatePicker>
+        </span>
+      );
    }
  });
 }
--- a/components/date-picker/index.md
+++ b/components/date-picker/index.md
@ -25,9 +25,9 @@

 | 参数         | 说明           | 类型     | 默认值       |
 |--------------|----------------|----------|--------------|
-| value        | 日期           | string   | 无           |
-| defaultValue | 默认日期       | string   | 无           |
-| format       | 展示的日期格式 | string   | "yyyy-MM-dd" |
+| value        | 日期           | string or Date   | 无           |
+| defaultValue | 默认日期       | string or Date   | 无           |
+| format       | 展示的日期格式，配置参考 [GregorianCalendarFormat](https://github.com/yiminghe/gregorian-calendar-format) | string   | "yyyy-MM-dd" |
 | disabledDate | 不可选择的日期 | function | 无           |
 | onChange     | 时间发生变化的回调，发生在用户选择时间时 | function(Date value) | 无           |
 | disabled     | 禁用           | bool     | false        |
@ -36,18 +36,19 @@
 | size         | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string   | 无  |
 | locale       | 国际化配置 | object   | [默认配置](https://github.com/ant-design/ant-design/issues/424)  |
 | showTime     | 增加时间选择功能 | bool | false  |
-| onOk         | 点击确定按钮的回调 | function | 无 |
+| onOk         | 点击确定按钮的回调 | function(Date value) | 无 |
+| getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |

 ### RangePicker

 | 参数         | 说明           | 类型     | 默认值       |
 |--------------|----------------|----------|--------------|
-| value        | 日期          | [string, string]   | 无           |
-| defaultValue | 默认日期       | [string, string]   | 无           |
+| value        | 日期          | [string/Date, string/Date]   | 无           |
+| defaultValue | 默认日期       | [string/Date, string/Date]   | 无           |
 | format       | 展示的日期格式  | string    | "yyyy-MM-dd HH:mm:ss" |
 | onChange     | 时间发生变化的回调，发生在用户选择时间时 | function([Date start, Date end]) | 无           |

-`disabled` `style` `popupStyle` `size` `locale` `showTime` `onOk` 属性与 DatePicker 的一致。
+`disabled` `style` `popupStyle` `size` `locale` `showTime` `onOk` `getCalendarContainer` 属性与 DatePicker 的一致。

 <style>
 .code-box-demo .ant-calendar-picker {
--- a/components/date-picker/locale/en_US.js
+++ b/components/date-picker/locale/en_US.js
@ -5,7 +5,8 @@ import CalendarLocale from 'rc-calendar/lib/locale/en_US';
 // 统一合并为完整的 Locale
 let locale = objectAssign({}, GregorianCalendarLocale);
 locale.lang = objectAssign({
-  placeholder: 'Select a date'
+  placeholder: 'Select date',
+  timePlaceholder: 'Select time',
 }, CalendarLocale);

 // All settings at:
--- a/components/dropdown/demo/basic.md
+++ b/components/dropdown/demo/basic.md
@ -9,17 +9,19 @@
 ````jsx
 import { Menu, Dropdown, Icon } from 'antd';

-const menu = <Menu>
-  <Menu.Item>
-    <a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
-  </Menu.Item>
-  <Menu.Item>
-    <a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
-  </Menu.Item>
-  <Menu.Item>
-    <a target="_blank" href="http://www.tmall.com/">第三个菜单项</a>
-  </Menu.Item>
-</Menu>;
+const menu = (
+  <Menu>
+    <Menu.Item>
+      <a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
+    </Menu.Item>
+    <Menu.Item>
+      <a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
+    </Menu.Item>
+    <Menu.Item>
+      <a target="_blank" href="http://www.tmall.com/">第三个菜单项</a>
+    </Menu.Item>
+  </Menu>
+);

 ReactDOM.render(
  <Dropdown overlay={menu}>
@ -27,5 +29,5 @@ ReactDOM.render(
      触发链接 <Icon type="down" />
    </a>
  </Dropdown>
-, document.getElementById('components-dropdown-demo-basic'));
+, mountNode);
 ````
--- a/components/dropdown/demo/dropdown-button.md
+++ b/components/dropdown/demo/dropdown-button.md
@ -10,21 +10,25 @@
 import { Menu, Dropdown } from 'antd';
 const DropdownButton = Dropdown.Button;

-const menu = <Menu>
-  <Menu.Item>
-    <a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
-  </Menu.Item>
-  <Menu.Item>
-    <a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
-  </Menu.Item>
-  <Menu.Item>
-    <a target="_blank" href="http://www.tmall.com/">第三个菜单项</a>
-  </Menu.Item>
-</Menu>;
+function handleButtonClick() {
+  console.log('click button');
+}
+
+function handleMenuClick(e) {
+  console.log('click', e);
+}
+
+const menu = (
+  <Menu onClick={handleMenuClick}>
+    <Menu.Item key="1">第一个菜单项</Menu.Item>
+    <Menu.Item key="2">第二个菜单项</Menu.Item>
+    <Menu.Item key="3">第三个菜单项</Menu.Item>
+  </Menu>
+);

 ReactDOM.render(
-<DropdownButton overlay={menu} type="primary">
-  某功能按钮
-</DropdownButton>
-, document.getElementById('components-dropdown-demo-dropdown-button'));
+  <DropdownButton onClick={handleButtonClick} overlay={menu} type="primary">
+    某功能按钮
+  </DropdownButton>
+, mountNode);
 ````
--- a/components/dropdown/demo/event.md
+++ b/components/dropdown/demo/event.md
@ -8,15 +8,17 @@

 ````jsx
 import { Menu, Dropdown, Icon } from 'antd';
-const onClick = function({key}) {
-  console.log('点击了菜单' + key);
+const onClick = function ({ key }) {
+  console.log(`点击了菜单${key}`);
 };

-const menu = <Menu onClick={onClick}>
-  <Menu.Item key="1">第一个菜单项</Menu.Item>
-  <Menu.Item key="2">第二个菜单项</Menu.Item>
-  <Menu.Item key="3">第三个菜单项</Menu.Item>
-</Menu>;
+const menu = (
+  <Menu onClick={onClick}>
+    <Menu.Item key="1">第一个菜单项</Menu.Item>
+    <Menu.Item key="2">第二个菜单项</Menu.Item>
+    <Menu.Item key="3">第三个菜单项</Menu.Item>
+  </Menu>
+);

 ReactDOM.render(
  <Dropdown overlay={menu}>
@ -24,5 +26,5 @@ ReactDOM.render(
      鼠标移入，点击菜单 <Icon type="down" />
    </a>
  </Dropdown>
-, document.getElementById('components-dropdown-demo-event'));
+, mountNode);
 ````
--- a/components/dropdown/demo/item.md
+++ b/components/dropdown/demo/item.md
@ -9,16 +9,18 @@
 ````jsx
 import { Menu, Dropdown, Icon } from 'antd';

-const menu = <Menu>
-  <Menu.Item key="0">
-    <a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
-  </Menu.Item>
-  <Menu.Item key="1">
-    <a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
-  </Menu.Item>
-  <Menu.Divider/>
-  <Menu.Item key="3" disabled>第三个菜单项（不可用）</Menu.Item>
-</Menu>;
+const menu = (
+  <Menu>
+    <Menu.Item key="0">
+      <a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
+    </Menu.Item>
+    <Menu.Item key="1">
+      <a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
+    </Menu.Item>
+    <Menu.Divider />
+    <Menu.Item key="3" disabled>第三个菜单项（不可用）</Menu.Item>
+  </Menu>
+);

 ReactDOM.render(
  <Dropdown overlay={menu}>
@ -26,5 +28,5 @@ ReactDOM.render(
      鼠标移入 <Icon type="down" />
    </a>
  </Dropdown>
-, document.getElementById('components-dropdown-demo-item'));
+, mountNode);
 ````
--- a/components/dropdown/demo/sub-menu.md
+++ b/components/dropdown/demo/sub-menu.md
@ -0,0 +1,31 @@
+# 多级菜单
+
+- order: 5
+
+传入的菜单里有多个层级。
+
+---
+
+````jsx
+import { Menu, Dropdown, Icon } from 'antd';
+const SubMenu = Menu.SubMenu;
+
+const menu = (
+  <Menu>
+    <Menu.Item>第一个菜单项</Menu.Item>
+    <Menu.Item>第二个菜单项</Menu.Item>
+    <SubMenu title="子菜单">
+      <Menu.Item>第三个菜单项</Menu.Item>
+      <Menu.Item>第四个菜单项</Menu.Item>
+    </SubMenu>
+  </Menu>
+);
+
+ReactDOM.render(
+  <Dropdown overlay={menu}>
+    <a className="ant-dropdown-link" href="#">
+      多级菜单 <Icon type="down" />
+    </a>
+  </Dropdown>
+, mountNode);
+````
--- a/Show More
+++ b/Show More