fix 0.9.3 error

check the React version is available
Conflicts: package.json
2026-02-17 23:02:28 +08:00 · 2015-11-04 10:59:19 +08:00 · 2015-11-03 11:06:42 +08:00 · 2015-10-27 14:27:02 +08:00 · 2015-10-26 17:34:23 +08:00 · 2015-10-26 17:29:22 +08:00
298 changed files with 10998 additions and 3202 deletions
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,34 +1,43 @@
 {
-  "rules": {
-    "indent": [
-      2,
-      2
-    ],
-    "quotes": [
-      2,
-      "single"
-    ],
-    "linebreak-style": [
-      2,
-      "unix"
-    ],
-    "semi": [
-      2,
-      "always"
-    ],
-    "react/react-in-jsx-scope": 1,
-    "react/jsx-uses-react": 1
-  },
+  "extends": ["eslint-config-airbnb"],
  "env": {
-    "es6": true,
    "browser": true,
    "node": true
  },
  "ecmaFeatures": {
-    "jsx": true,
-    "modules": true
+    "jsx": true
  },
+  "parser": "babel-eslint",
  "plugins": [
-    "react"
-  ]
+    "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,
+    "no-unused-vars": [2, { "vars": "all", "args": "none" }],
+    "babel/object-shorthand": 0,
+    "react/jsx-boolean-value": 0,
+    "react/jsx-no-duplicate-props": 2,
+    "react/prop-types": [2, { "ignore": [ "children", "className", "style" ] }],
+    "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
+  }
 }
--- a/.lesslintrc
+++ b/.lesslintrc
@@ -0,0 +1,6 @@
+{
+  "import": false,
+  "require-newline": false,
+  "leading-zero": false,
+  "single-comment": false
+}
--- a/.si.yml
+++ b/.si.yml
@@ -0,0 +1,6 @@
+before_deploy:
+  - tnpm install && tnpm update
+  - tnpm run just-deploy
+options:
+  branch: 'master'
+  dist: '_site'
--- a/404.html
+++ b/404.html
@@ -0,0 +1,6 @@
+<p>找不到此页，三秒后返回首页...</p>
+<script>
+setTimeout(function() {
+  location.href = '/';
+}, 3000);
+</script>
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,96 @@
-## 0.7.2 (2015-07-27)
+# 更新日志
+
+- category: 4
+
+---
+
+## 0.9.4 `2015-11-04`
+
+* 增加对 React 版本的检测提示机制，0.9.x 序列只能使用 `react@~0.13.3`。
+
+## 0.9.2 `2015-10-26`
+
+* Tooltip 的 title 为空时不展示浮层。[9b53117](9b5311791e73270c7c16a602ac74dd59719a5f76)
+* 修复 Upload 文件列表链接的 target 属性。[340a170](340a1702b6a7b065ac02d417c891e1886dfe470d)
+* 修复 Datepicker 设置 defaultValue 时星期顺序错误的问题。[9ef1450](9ef14500f3abfcc7081f8dceab8187ec835e3918)
+* 修复一些小的样式问题。
+
+## 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 下的兼容性问题。
+* 升级依赖 rc-steps 到 1.3.x。
+  * 新增 current 属性，方便配置当前的步骤。[#290](https://github.com/ant-design/ant-design/issues/290)
+  * 修复因滚动条影响页面宽度导致的错位问题。
+* 升级依赖 rc-menu 到 1.5.x。
+  * 新增 onSelect 回调中返回参数 keyPath，从而支持只展开当前父级菜单的交互方式。[demo](http://ant.design/components/menu/#demo-sider-current)
+  * 修复 hover 类型的弹出菜单能响应点击事件的问题。[react-component/menu#14](https://github.com/react-component/menu/issues/14)
+* 修复一个 Table 的分页无法正确展示的问题。[#253](https://github.com/ant-design/ant-design/issues/253)
+* 修复一个 combobox 选择框无法选中的问题。[0435ca6](https://github.com/ant-design/ant-design/commit/0435ca60e3b574bac3808a10ba3db62f482335fd)
+* 修复 Radio.Button 在 IE 8 下不可用的问题。[#321](https://github.com/ant-design/ant-design/issues/321)
+* 适配 breadcrumb 面包屑组件和 `react-router@1.0.0-rc1`。
+* 修复只能同时弹出一个 Modal 通知框的问题。[d6a4094](https://github.com/ant-design/ant-design/commit/d6a4094bc4c72acd05be001c7e46dbd17092001a)
+* 升级依赖 rc-tooltip 到 2.8.0，增加 overlayClassName 属性。
+* 部分组件交互和视觉效果修正。
+
+
+## 0.9.0 `2015-09-14`
+
+* 新增 [timeline](components/timeline/) 和 [badge](components/badge/) 组件。
+* 优化弹出层类组件的动画效果，使其更加流畅。
+* 部分文案更新。
+* 优化主站在小分辨率屏幕下的样式。
+* 使用 instantclick 改造主站，加载速度有明显提升。
+* antd-bin 升级到 [0.6.x](https://github.com/ant-design/antd-bin/blob/master/HISTORY.md) 。
+* Upload **重构了 API 接口，不向下兼容**，支持自定义的功能扩展。
+  * 新增 `onChange(file) {}` 接口，移出原来的 `onSuccess`、`onProgess`、`onError` 等接口。
+  * 新增 `fileList` 和 `defaultFileList` 属性，以满足更多的自定义功能，具体见演示。
+  * 设置 fileList 数组项的 url 属性可以作为链接展示在文件列表中方便下载。
+  * 移除内建的上传成功或失败的信息提示，业务可自行实现。
+  * 修正多文件选择上传时文件列表只展示一个文件的问题。
+* Table
+  * 新增可展开的 table。[#258](https://github.com/ant-design/ant-design/pull/258)
+  * 新增无数据的展示样式。[4c54644](https://github.com/ant-design/ant-design/commit/4c54644116d46cb2510d2d475234529bad60e5d5)
+  * 修复本地模式 `dataSource` 无法更新的问题。[6d2dcc4](https://github.com/ant-design/ant-design/commit/6d2dcc45393b6ec0ad1ba73caf8b1ec42353743f)
+  * 修复远程模式 loading 失效的问题。[9b8abb2](https://github.com/ant-design/ant-design/commit/9b8abb219934c246970a84200818aa8f85974bdf)
+  * 用 [reqwest-without-xhr2](http://npmjs.com/reqwest-without-xhr2) 代替了 reqwest，解决某些开发环境下 xhr2 依赖的问题。
+* Select
+  * 增加 label 属性，允许多选模式下展示标签（原来只能显示 value 值）。[演示](http://react-component.github.io/select/examples/mul-suggest.html)
+  * 修复 combobox 模式下 value 失效的问题。
+* Notification 修复不会自动消失的问题。[23fce55](https://github.com/ant-design/ant-design/commit/23fce559b0b2faf4e0b686a92dbcdd045727a464)
+* Steps 新增竖版的步骤条。
+* Carousel 修复 fade 模式下可以拖拽的问题。#212
+* Collapse 修复动画不生效的问题。
+* Datepicker 修复无法设置为空值的问题。
+* Modal
+  * 添加 [通知类型](http://ant.design/components/modal/#demo-info) 的对话框函数。
+  * 用 `Modal.confirm()` 代替 `confirm()` 方法。
+  * 修改为需要在 onCancel 手动设置 visible 属性来关闭。
+* Message 添加 [加载中类型](http://ant.design/components/message/#demo-loading)。
+* Radio 修改 Radio.Group 容器的盒模型属性为 inline-block 。
+* Enter Animation
+  * 大幅度的重构，全新 API 的设计。
+  * 支持和 react-router 结合使用。
+
+
+## 0.8.0 `2015-08-25`
+
+这个版本是第一个稳定版，组件经过三期迭代，基本到齐，并有大量改进和变化，不向下兼容。
+
+* 新增九个组件 `menu`、`upload`、`carousel`、`tree`、`notification`、`validation`、`affix`、`alert`、`enterAnimation`。目前共有组件 34 个，基本能满足后台类项目的组件需求。
+* 新增设计文档部分，包括文字、色彩、动画。
+* 重新梳理了设计和 React 实现部分的关系，强调了 Ant Design 的设计属性，并更新了网站的信息结构。
+* 构建工具 `antd-bin` 升级到 `0.4.0` 版本，支持合并 webpack 配置，热替换（HMR）等特性，[详见](https://github.com/ant-design/antd-bin)。
+* 组件动画优化和补充，体验更加流畅动感。
+* 排查并修复 IE 和 safari 等浏览器的兼容问题。
+* 大量代码重构，演示代码补充，文档更新、以及样式上的优化。
+
+## 0.7.3 `2015-07-30`
+
+* 小幅重构了 Table 分页，修复了分页导致的数据不展示的问题。
+* 更新了部分文档。
+
+## 0.7.2 `2015-07-27`

 * 修复本地模式下 pagination 为 false 时数据无法显示的 [问题](https://github.com/ant-design/ant-design/commit/1954586665e59031eae5d2c8b2cdb08f83d64fcb)。
 * 重构了 message 组件。
@@ -6,14 +98,14 @@
 * 部分代码切换至 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-en_US.md
+++ b/README-en_US.md
@@ -1,15 +1,13 @@
-# 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) [![Dependency Status](https://david-dm.org/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design)
+# 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) [![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 grade front-end development language and React-based implementation.
-
-Design documents and component implementations are still being revised so several pages are not yet complete.  We are currently planning a release version for August.
+An enterprise-class UI design language and React-based implementation.

 ![](https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg)

 ## Features

- An enterprise-grade graphical design language and framework for financial applications
- Rich library of React UI components.
+- An enterprise-class graphical design language and framework for financial applications
+- Rich library of UI components base on [React Component](http://react-component.github.io/badgeboard/).
 - A Component development model based on React.
 - Backed by the npm ecosystem.
 - webpack-based debug builds supporting ES6
@@ -18,9 +16,7 @@ Design documents and component implementations are still being revised so severa
 ## Usage example

 ```jsx
-var antd = require('antd');
-var Datepicker = antd.Datepicker;
-
+import { Datepicker } from 'antd';
 React.render(<Datepicker />, mountNode);
 ```

@@ -35,31 +31,10 @@ React.render(<Datepicker />, mountNode);
 - [React modules](http://react-component.github.io/)
 - [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/en-US/component-code-style.md)
 - [React component design guide](https://github.com/react-component/react-component.github.io/blob/master/docs/en-US/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)


 ## Contributing

 We welcome all contributions, please submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as a [GitHub issue](https://github.com/ant-design/ant-design/issues).
-
-
-## Development
-
-#### Building locally
-
-```bash
-$ npm start
-```
-
-Then open `http://127.0.0.1:8000`.
-
-#### [Website](http://ant.design) deployment
-
-```bash
-$ npm run deploy
-```
-
-#### Creating a release build
-
-```bash
-$ npm run release
-```
--- a/README.md
+++ b/README.md
@@ -1,15 +1,17 @@
-# 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) [![Dependency Status](https://david-dm.org/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design)
+# 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) [![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)

-一套企业级的前端设计语言和基于 React 的实现。
+一套企业级的 UI 设计语言和 React 实现。

-设计文档和组件实现均在紧密整理和开发中，部分页面可能不完善，预计 8 月份释出正式版本。
-
-![](https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg)
+<p align="center">
+  <a href="http://ant.design">
+    <img width="360" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
+  </a>
+</p>

 ## 特性

- 企业级金融产品的交互语言和视觉体系。
- 丰富实用的 React UI 组件。
+- 提炼自企业级后台产品的交互语言和视觉风格。
+- [React Component](http://react-component.github.io/badgeboard/) 基础上二次封装的丰富实用的 UI 组件。
 - 基于 React 的组件化开发模式。
 - 背靠 npm 生态圈。
 - 基于 webpack 的调试构建方案，支持 ES6。
@@ -18,9 +20,7 @@
 ## 示例

 ```jsx
-var antd = require('antd');
-var Datepicker = antd.Datepicker;
-
+import { Datepicker } from 'antd';
 React.render(<Datepicker />, mountNode);
 ```

@@ -29,38 +29,15 @@ React.render(<Datepicker />, mountNode);
 - [首页](http://ant.design/)
 - [文档](http://ant.design/docs/introduce)
 - [组件](http://ant.design/components/)
- [构建调试工具](https://github.com/ant-design/antd-bin)
+- [构建调试 antd-bin](https://github.com/ant-design/antd-bin)
 - [开发计划](https://github.com/ant-design/ant-design/issues/9)
 - [修改记录](CHANGELOG.md)
 - [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)
-
+- [网站和组件开发说明](https://github.com/ant-design/ant-design/wiki/%E7%BD%91%E7%AB%99%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E)
+- [版本发布手册](https://github.com/ant-design/ant-design/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)

 ## 如何贡献

-我们欢迎任何形式的贡献，有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或者给我们[提问](https://github.com/ant-design/ant-design/issues)。
-
-
-## 开发说明
-
-#### 本地调试
-
-```bash
-$ npm install
-$ npm start
-```
-
-然后访问 http://127.0.0.1:8000 。
-
-#### [网站](http://ant.design)部署
-
-```bash
-$ npm run deploy
-```
-
-#### 版本构建
-
-```bash
-$ npm run release
-```
+我们欢迎任何形式的贡献，有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或者给我们 [提问](https://github.com/ant-design/ant-design/issues)。
--- a/components/affix/demo/basic.md
+++ b/components/affix/demo/basic.md
@@ -0,0 +1,17 @@
+# 基本
+
+- order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+var Affix = antd.Affix;
+
+React.render(
+  <Affix>
+    <button className="ant-btn ant-btn-primary">固定在顶部</button>
+  </Affix>
+, document.getElementById('components-affix-demo-basic'));
+````
--- a/components/affix/demo/offset.md
+++ b/components/affix/demo/offset.md
@@ -0,0 +1,17 @@
+# 偏移
+
+- order: 1
+
+达到一定的偏移量才触发。
+
+---
+
+````jsx
+var Affix = antd.Affix;
+
+React.render(
+  <Affix offset={75}>
+    <button className="ant-btn ant-btn-primary">固定在距离顶部 75px 的位置</button>
+  </Affix>
+, document.getElementById('components-affix-demo-offset'));
+````
--- a/components/affix/index.jsx
+++ b/components/affix/index.jsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import rcUtil from 'rc-util';
+
+function getScroll(w, top) {
+  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
+    ret = d.documentElement[method];
+    if (typeof ret !== 'number') {
+      //quirks mode
+      ret = d.body[method];
+    }
+  }
+  return ret;
+}
+
+function getOffset(element) {
+  let rect = element.getBoundingClientRect();
+  let body = document.body;
+  let clientTop = element.clientTop || body.clientTop || 0;
+  let clientLeft = element.clientLeft || body.clientLeft || 0;
+  let scrollTop = getScroll(window, true);
+  let scrollLeft = getScroll(window);
+
+  return {
+    top: rect.top + scrollTop - clientTop,
+    left: rect.left + scrollLeft - clientLeft
+  };
+}
+
+let Affix = React.createClass({
+
+  getDefaultProps() {
+    return {
+      offset: 0
+    };
+  },
+
+  propTypes: {
+    offset: React.PropTypes.number
+  },
+
+  getInitialState() {
+    return {
+      affix: false,
+      affixStyle: null
+    };
+  },
+
+  handleScroll() {
+    let affix = this.state.affix;
+    let scrollTop = getScroll(window, true);
+    let elemOffset = getOffset(this.getDOMNode());
+
+    if (!affix && (elemOffset.top - this.props.offset) < scrollTop) {
+      this.setState({
+        affix: true,
+        affixStyle: {
+          top: this.props.offset,
+          left: elemOffset.left,
+          width: this.getDOMNode().offsetWidth
+        }
+      });
+    }
+
+    if (affix && (elemOffset.top - this.props.offset) > scrollTop) {
+      this.setState({
+        affix: false,
+        affixStyle: null
+      });
+    }
+  },
+
+  componentDidMount() {
+    this.scrollEvent = rcUtil.Dom.addEventListener(window, 'scroll', this.handleScroll);
+    this.resizeEvent = rcUtil.Dom.addEventListener(window, 'resize', this.handleScroll);
+  },
+
+  componentWillUnmount() {
+    if (this.scrollEvent) {
+      this.scrollEvent.remove();
+    }
+    if (this.resizeEvent) {
+      this.resizeEvent.remove();
+    }
+  },
+
+  render() {
+    const className = rcUtil.classSet({
+      [this.props.className]: this.props.className,
+      'ant-affix': this.state.affix
+    });
+
+    return (
+      <div {...this.props}>
+        <div className={className} style={this.state.affixStyle}>
+          {this.props.children}
+        </div>
+      </div>
+    );
+  }
+
+});
+
+module.exports = Affix;
--- a/components/affix/index.md
+++ b/components/affix/index.md
@@ -1,7 +1,21 @@
 # Affix

 - category: Components
- chinese: 固定
+- chinese: 固钉

 ---

+将页面元素钉在可视范围。
+
+## 何时使用
+
+当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
+
+页面可视范围过小时，慎用此功能以免遮挡页面内容。
+
+## API
+
+
+| 成员        | 说明           | 类型               | 默认值       |
+|-------------|----------------|--------------------|--------------|
+| offset      | 达到指定偏移量后触发   | Number | 0        |
--- a/components/alert/demo/basic.md
+++ b/components/alert/demo/basic.md
@@ -0,0 +1,14 @@
+# 基本
+
+- order: 0
+
+最简单的用法，适用于简短的警告提示。
+
+---
+
+````jsx
+var Alert = antd.Alert;
+
+React.render(<Alert message="成功提示的文案" type="success" />
+, document.getElementById('components-alert-demo-basic'));
+````
--- a/components/alert/demo/closable.md
+++ b/components/alert/demo/closable.md
@@ -0,0 +1,27 @@
+# 可关闭的警告提示
+
+- order: 1
+
+显示关闭按钮，点击可关闭警告提示。
+
+---
+
+````jsx
+var Alert = antd.Alert;
+
+var onClose = function(e) {
+  console.log(e, '我要被关闭啦！');
+};
+
+React.render(<div>
+  <Alert message="警告提示的文案"
+    type="warn"
+    closable
+    onClose={onClose} />
+  <Alert message="错误提示的文案"
+    description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
+    type="error"
+    closable
+    onClose={onClose} />
+</div>, document.getElementById('components-alert-demo-closable'));
+````
--- a/components/alert/demo/close-type.md
+++ b/components/alert/demo/close-type.md
@@ -0,0 +1,16 @@
+# 自定义关闭
+
+- order: 4
+
+可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。
+
+---
+
+````jsx
+var Alert = antd.Alert;
+var link = <a href="javascript:;">不再提醒</a>
+
+React.render(
+<Alert message="消息提示的文案" type="info" closeText={link} />
+, document.getElementById('components-alert-demo-close-type'));
+````
--- a/components/alert/demo/description.md
+++ b/components/alert/demo/description.md
@@ -0,0 +1,28 @@
+# 含有辅助性文字介绍
+
+- order: 2
+
+含有辅助性文字介绍的警告提示。
+
+---
+
+````jsx
+var Alert = antd.Alert;
+
+React.render(<div>
+  <Alert message="成功提示的文案"
+    description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
+    type="success" />
+  <Alert message="消息提示的文案"
+    description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
+    type="info" />
+  <Alert
+    message="警告提示的文案"
+    description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
+    type="warn" />
+  <Alert
+    message="错误提示的文案"
+    description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
+    type="error" />
+</div>, document.getElementById('components-alert-demo-description'));
+````
--- a/components/alert/demo/style.md
+++ b/components/alert/demo/style.md
@@ -0,0 +1,19 @@
+# 四种样式
+
+- order: 3
+
+共有四种样式`success`、`info`、`warn`、`error`。
+
+---
+
+````jsx
+var Alert = antd.Alert;
+
+React.render(<div>
+  <Alert message="成功提示的文案" type="success" />
+  <Alert message="消息提示的文案" type="info" />
+  <Alert message="警告提示的文案" type="warn" />
+  <Alert message="错误提示的文案" type="error" />
+</div>,
+document.getElementById('components-alert-demo-style'));
+````
--- a/components/alert/index.jsx
+++ b/components/alert/index.jsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import Animate from 'rc-animate';
+
+export default React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'ant-alert'
+    };
+  },
+  getInitialState() {
+    return {
+      closing: true,
+      closed: false
+    };
+  },
+  handleClose(e) {
+    let dom = React.findDOMNode(this);
+    dom.style.height = dom.offsetHeight + 'px';
+    // Magic code
+    // 重复一次后才能正确设置 height
+    dom.style.height = dom.offsetHeight + 'px';
+
+    this.setState({
+      closing: false
+    });
+    if (this.props.onClose) {
+      this.props.onClose.call(this, e);
+    }
+  },
+  animationEnd() {
+    this.setState({
+      closed: true,
+      closing: true
+    });
+  },
+  render() {
+    let iconClass = this.props.description ?
+      'ant-alert-with-description-icon anticon-' : 'ant-alert-icon anticon-';
+    switch (this.props.type) {
+    case 'success':
+      iconClass += 'check-circle';
+      break;
+    case 'info':
+      iconClass += 'info-circle';
+      break;
+    case 'error':
+      iconClass += 'exclamation-circle';
+      break;
+    case 'warn':
+      iconClass += 'question-circle';
+      break;
+    default:
+      iconClass += 'default';
+    }
+    let html;
+    let closeName = !this.state.closing ? ' ' + this.props.prefixCls + '-close' : '';
+    if (this.props.description) {
+      let close = this.props.closable ?
+        <a onClick={this.handleClose} className={'ant-alert-with-description-close-icon'}>
+          <span className="ant-alert-with-description-close-icon-x"></span>
+        </a> : '';
+      html = <div data-show={this.state.closing} className={'ant-alert-with-description ant-alert-with-description-' + this.props.type + closeName}>
+        <i className={'anticon ' + iconClass}></i>
+        <p className={'ant-alert-with-description-message'}>{this.props.message}</p>
+        <span className={'ant-alert-with-description-description'}>{this.props.description}</span>
+          {close}
+      </div>;
+    } else {
+      if (this.props.closeText) {
+        html = <div data-show={this.state.closing} className={'ant-alert ant-alert-' + this.props.type + closeName}>
+          <i className={'anticon ' + iconClass}></i>
+          <span className={'ant-alert-description'}>{this.props.message}</span>
+          <span onClick={this.handleClose} className={'ant-alert-close-text'}>{this.props.closeText}</span>
+        </div>;
+      } else {
+        let close = this.props.closable ?
+          <a onClick={this.handleClose} className={'ant-alert-close-icon'}>
+            <span className="ant-alert-close-icon-x"></span>
+          </a> : '';
+        html = <div data-show={this.state.closing} className={'ant-alert ant-alert-' + this.props.type + closeName}>
+          <i className={'anticon ' + iconClass}></i>
+          <span className={'ant-alert-description'}>{this.props.message}</span>
+          {close}
+        </div>;
+      }
+    }
+    return this.state.closed ? null : <Animate
+      component=""
+      showProp="data-show"
+      transitionName="slide-up"
+      onEnd={this.animationEnd}>
+      {html}
+    </Animate>;
+  }
+});
--- a/components/alert/index.md
+++ b/components/alert/index.md
@@ -1,6 +1,25 @@
 # Alert

- category: CSS
- chinese: 通知栏
+- category: Components
+- chinese: 警告提示
+- type: 展示

 ---
+
+警告提示，展现需要关注的信息。
+
+## 何时使用
+
+- 当某个页面需要向用户显示警告的信息时。
+- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
+
+## API
+
+| 参数        | 说明                                                      | 类型        | 默认值 |
+|----------- |---------------------------------------------------------  | ---------- |-------|
+| type       | 必选参数，指定警告提示的样式，有四种选择`success`、`info`、`warn`、`error`   | String     | 无    |
+| closable   | 可选参数，默认不显示关闭按钮                                  | Boolean   | 无    |
+| closeText  | 可选参数，自定义关闭按钮                                     | String     | 无    |
+| message    | 必选参数，警告提示内容                                       | String     | 无    |
+| description | 可选参数，警告提示的辅助性文字介绍                            | String     | 无    |
+| onClose     | 可选参数，关闭时触发的回调函数                                | Function   | 无    |
--- a/components/badge/demo/99plus.md
+++ b/components/badge/demo/99plus.md
@@ -0,0 +1,20 @@
+# 大数字
+
+- order: 1
+
+超过 99 的会显示为 `99+`。
+
+---
+
+````jsx
+var Badge = antd.Badge;
+
+React.render(<div>
+  <Badge count="99">
+    <a href="#" className="head-example"></a>
+  </Badge>
+  <Badge count="200">
+    <a href="#" className="head-example"></a>
+  </Badge>
+</div>, document.getElementById('components-badge-demo-99plus'));
+````
--- a/components/badge/demo/basic.md
+++ b/components/badge/demo/basic.md
@@ -0,0 +1,30 @@
+# 基本
+
+- order: 0
+
+简单的徽章展示。
+
+---
+
+````jsx
+var Badge = antd.Badge;
+
+React.render(
+  <Badge count="5">
+    <a href="#" className="head-example"></a>
+  </Badge>
+, document.getElementById('components-badge-demo-basic'));
+````
+
+````css
+.ant-badge {
+  margin-right: 16px;
+}
+.head-example {
+  width: 42px;
+  height: 42px;
+  border-radius: 6px;
+  background: #eee;
+  display: inline-block;
+}
+````
--- a/components/badge/demo/dot.md
+++ b/components/badge/demo/dot.md
@@ -0,0 +1,29 @@
+# 讨嫌的小红点
+
+- order: 3
+
+没有具体的数字。
+
+---
+
+````jsx
+var Badge = antd.Badge;
+
+React.render(<div>
+  <Badge dot={true}>
+    <i className="anticon anticon-notification"></i>
+  </Badge>
+  <Badge dot={true}>
+    <a href="#">一个链接</a>
+  </Badge>
+</div>, document.getElementById('components-badge-demo-dot'));
+````
+
+<style>
+.anticon-notification {
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  font-size: 16px;
+}
+</style>
--- a/components/badge/demo/link.md
+++ b/components/badge/demo/link.md
@@ -0,0 +1,19 @@
+# 可点击
+
+- order: 2
+
+用 a 标签进行包裹即可。
+
+---
+
+````jsx
+var Badge = antd.Badge;
+
+React.render(
+  <a href="#">
+    <Badge count="5">
+      <span className="head-example"></span>
+    </Badge>
+  </a>
+, document.getElementById('components-badge-demo-link'));
+````
--- a/components/badge/index.jsx
+++ b/components/badge/index.jsx
@@ -0,0 +1,49 @@
+import React, { cloneElement } from 'react';
+const prefixCls = 'ant-badge';
+
+class AntBadge extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      count: props.count
+    };
+  }
+
+  render() {
+    if (this.props.dot) {
+      return <span className={prefixCls} {...this.props}>
+        {this.props.children}
+        <sup className={prefixCls + '-dot'}></sup>
+      </span>;
+    }
+    let count = this.state.count;
+    if (!count) {
+      return cloneElement(this.props.children);
+    } else {
+      count = count >= 100 ? '99+' : count;
+      return (
+        <span className={prefixCls} title={this.state.count} {...this.props}>
+          {this.props.children}
+          <sup className={prefixCls + '-count'}>{count}</sup>
+        </span>
+      );
+    }
+  }
+}
+
+AntBadge.defaultProps = {
+  prefixCls: prefixCls,
+  count: null,
+  dot: false
+};
+
+AntBadge.propTypes = {
+  count: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.number
+  ]),
+  dot: React.PropTypes.bool
+};
+
+export default AntBadge;
--- a/components/badge/index.md
+++ b/components/badge/index.md
@@ -0,0 +1,26 @@
+# Badge
+
+- category: Components
+- chinese: 徽标数
+- type: 展示
+
+---
+
+图标右上角的圆形徽标数字。
+
+## 何时使用
+
+一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
+
+## API
+
+```jsx
+<Badge count="5">
+  <a href="#" className="head-example"></a>
+</Badge>
+```
+
+| 参数           | 说明                             | 类型       |  可选值 | 默认值 |
+|----------------|----------------------------------|------------|---------|--------|
+| count          | 展示的数字，大于 99 时显示为 99+ | Number     |         |        |
+| dot            | 不展示数字，只有一个小红点       | boolean    |         | false  |
--- a/components/breadcrumb/demo/router.md
+++ b/components/breadcrumb/demo/router.md
@@ -2,16 +2,16 @@

 - order: 2

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

 ---

 ````jsx
-var Router = require('react-router');
-var Route = Router.Route;
-var Link = Router.Link;
-var RouteHandler = Router.RouteHandler;
-var Breadcrumb = require('antd/lib/breadcrumb');
+var ReactRouter = require('react-router');
+var Router = ReactRouter.Router;
+var Route = ReactRouter.Route;
+var Link = ReactRouter.Link;
+var Breadcrumb = require('antd').Breadcrumb;

 var Apps = React.createClass({
  render() {
@@ -22,36 +22,34 @@ var Apps = React.createClass({
  }
 });

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

-var routes = (
-  <Route name="首页" path="/" handler={App} ignoreScrollBehavior>
-    <Route name="应用列表" path="/apps" handler={Apps}>
-      <Route name="应用:id" path="/apps/:id" handler={App} />
+React.render((
+  <Router>
+    <Route name="home" breadcrumbName="首页" path="/" component={Home} ignoreScrollBehavior>
+      <Route name="apps" breadcrumbName="应用列表" path="apps" component={Apps}>
+        <Route name="app" breadcrumbName="应用:id" path=":id" />
+      </Route>
    </Route>
-  </Route>
-);
-
-Router.run(routes, Router.HashLocation, (Root) => {
-  React.render(<Root />, document.getElementById('components-breadcrumb-demo-router'));
-});
+  </Router>
+), document.getElementById('components-breadcrumb-demo-router'));
 ````

 <style>
--- a/components/breadcrumb/index.jsx
+++ b/components/breadcrumb/index.jsx
@@ -3,9 +3,12 @@ import React from 'react';
 let prefixCls = 'ant-breadcrumb';

 let BreadcrumbItem = React.createClass({
+  propTypes: {
+    href: React.PropTypes.string
+  },
  render() {
-    var link = <a className={prefixCls + '-link'} {...this.props}>{this.props.children}</a>;
-    var slash = <span className={prefixCls + '-slash'}>/</span>;
+    let link = <a className={prefixCls + '-link'} {...this.props}>{this.props.children}</a>;
+    let slash = <span className={prefixCls + '-slash'}>/</span>;
    if (typeof this.props.href === 'undefined') {
      link = <span className={prefixCls + '-link'} {...this.props}>{this.props.children}</span>;
    }
@@ -14,24 +17,28 @@ let BreadcrumbItem = React.createClass({
 });

 let Breadcrumb = React.createClass({
-  contextTypes: {
-    router: React.PropTypes.func
+  propTypes: {
+    router: React.PropTypes.object,
+    routes: React.PropTypes.array,
+    params: React.PropTypes.object
  },
  render() {
-    var crumbs, routes, params;
-    if (this.context.router && this.props.Router) {
-      var Link = this.props.Router.Link;
-      routes = this.context.router.getCurrentRoutes();
-      params = this.context.router.getCurrentParams();
+    let crumbs;
+    let ReactRouter = this.props.router;
+    let routes = this.props.routes;
+    let params = this.props.params;
+    if (routes && routes.length > 0 && ReactRouter) {
+      let Link = ReactRouter.Link;
      crumbs = routes.map(function(route, i) {
-        var name = route.name.replace(/\:(.*)/g, function(replacement, key) {
+        let name = route.breadcrumbName.replace(/\:(.*)/g, function(replacement, key) {
          return params[key] || replacement;
        });
-        var link;
+        let link;
+        let path = route.path.indexOf('/') === 0 ? route.path : ('/' + route.path);
        if (i === routes.length - 1) {
          link = <span>{name}</span>;
        } else {
-          link = <Link to={route.path} params={params}>{name}</Link>;
+          link = <Link to={path} params={params}>{name}</Link>;
        }
        return <BreadcrumbItem key={name}>{link}</BreadcrumbItem>;
      });
--- a/components/breadcrumb/index.md
+++ b/components/breadcrumb/index.md
@@ -2,7 +2,7 @@

 - category: Components
 - chinese: 面包屑
- order: 8
+- type: 导航

 ---

@@ -13,3 +13,28 @@
 - 当系统拥有超过两级以上的层级结构时；
 - 当需要告知用户“你在哪里”时；
 - 当需要向上导航的功能时。
+
+## API
+
+```html
+<Breadcrumb>
+  <Breadcrumb.Item>首页</Breadcrumb.Item>
+  <Breadcrumb.Item href="">应用中心</Breadcrumb.Item>
+  <Breadcrumb.Item href="">应用列表</Breadcrumb.Item>
+  <Breadcrumb.Item>某应用</Breadcrumb.Item>
+</Breadcrumb>
+```
+
+### Breadcrumb
+
+| 参数      | 说明                                     | 类型       |  可选值 | 默认值 |
+|-----------|------------------------------------------|------------|---------|--------|
+| router    | 可传入 react-router 的实例               | Object     |         | -      |
+| routes    | router 的路由栈信息                      | Array      |         | -      |
+| params    | 路由的参数                               | Object     |         | -      |
+
+### Breadcrumb.Item
+
+| 参数      | 说明                                     | 类型       |  可选值 | 默认值 |
+|-----------|------------------------------------------|------------|---------|--------|
+| href      | 链接，如不传则不可点击                   | string     |         | -      |
--- a/components/button/demo/loading.md
+++ b/components/button/demo/loading.md
@@ -2,16 +2,48 @@

 - order: 7

-点击后进入加载状态。
+加载按钮。最后一个按钮演示点击后进入加载状态。

 ---

-````html
-<button class="ant-btn ant-btn-primary ant-btn-circle">
-  <span class="anticon anticon-loading"></span>
-</button>
-<button class="ant-btn ant-btn-primary">
-  <span>加载按钮</span>
-  <span class="anticon anticon-loading"></span>
-</button>
+````jsx
+var App = React.createClass({
+  getInitialState() {
+    return {
+      loading: false
+    };
+  },
+  enterLoading() {
+    this.setState({
+      loading: true
+    });
+  },
+  render() {
+    var loadingClass = this.state.loading ? 'ant-btn-loading' : '';
+    return <div>
+      <button className="ant-btn ant-btn-primary ant-btn-lg ant-btn-loading">
+        加载中
+      </button>
+      <button className="ant-btn ant-btn-primary ant-btn-loading">
+        加载中
+      </button>
+      <button className="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading">
+        加载中
+      </button>
+      <br />
+      <button className={'ant-btn ant-btn-primary ' + loadingClass} onClick={this.enterLoading}>
+        点击变加载
+      </button>
+    </div>;
+  }
+});
+
+React.render(<App />, document.getElementById('components-button-demo-loading'));
 ````
+
+<style>
+#components-button-demo-loading .ant-btn {
+  margin-right: 8px;
+  margin-bottom: 12px;
+}
+</style>
--- a/components/button/index.md
+++ b/components/button/index.md
@@ -1,8 +1,8 @@
 # Button

- category: CSS
+- category: Components
 - chinese: 按钮
- order: 2
+- type: 基本

 ---

@@ -17,8 +17,6 @@

 - 按钮的基础样式为 `ant-btn`。

-  在这里我们统一使用 **ant** 作为类名空间，当然你也可以自定义(通过覆盖 `@css-prefix` 变量即可)。
-
 - 通过类组装的形式来产生不同的按钮样式，推荐遵循如下顺序：
 ```
  .ant-btn
@@ -39,3 +37,5 @@
 | `.ant-btn-circle` `.ant-btn-circle-outline`  | 用于创建圆形按钮，`.ant-btn-circle-outline` 为描边按钮。 |
 | `.ant-btn-lg` `.ant-btn-sm`  | 定义按钮大小尺寸，目前提供三种尺寸：大中小，默认为中。 |
 | `.ant-btn-group` | 按钮组合，通过按钮组容器把一组按钮放在同一行里。 |
+
+> 当按钮只有两个汉字时，需要在两字中加空格。
--- a/components/carousel/demo/autoplay.md
+++ b/components/carousel/demo/autoplay.md
@@ -0,0 +1,21 @@
+# 自动切换
+
+- order: 3
+
+定时切换下一张。
+
+---
+
+````jsx
+var Carousel = antd.Carousel;
+
+React.render(
+  <Carousel autoplay="true">
+    <div><h3>1</h3></div>
+    <div><h3>2</h3></div>
+    <div><h3>3</h3></div>
+    <div><h3>4</h3></div>
+  </Carousel>
+, document.getElementById('components-carousel-demo-autoplay'));
+````
+
--- a/components/carousel/demo/basic.md
+++ b/components/carousel/demo/basic.md
@@ -0,0 +1,20 @@
+# 基本
+
+- order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+var Carousel = antd.Carousel;
+
+React.render(
+  <Carousel>
+    <div><h3>1</h3></div>
+    <div><h3>2</h3></div>
+    <div><h3>3</h3></div>
+    <div><h3>4</h3></div>
+  </Carousel>
+, document.getElementById('components-carousel-demo-basic'));
+````
--- a/components/carousel/demo/fade.md
+++ b/components/carousel/demo/fade.md
@@ -0,0 +1,21 @@
+# 渐显
+
+- order: 2
+
+切换效果为渐显。
+
+---
+
+````jsx
+var Carousel = antd.Carousel;
+
+React.render(
+  <Carousel effect="fade">
+    <div><h3>1</h3></div>
+    <div><h3>2</h3></div>
+    <div><h3>3</h3></div>
+    <div><h3>4</h3></div>
+  </Carousel>
+, document.getElementById('components-carousel-demo-fade'));
+````
+
--- a/components/carousel/demo/vertical.md
+++ b/components/carousel/demo/vertical.md
@@ -0,0 +1,20 @@
+# 垂直
+
+- order: 1
+
+垂直显示。
+
+---
+
+````jsx
+var Carousel = antd.Carousel;
+
+React.render(
+  <Carousel vertical="true">
+    <div><h3>1</h3></div>
+    <div><h3>2</h3></div>
+    <div><h3>3</h3></div>
+    <div><h3>4</h3></div>
+  </Carousel>
+, document.getElementById('components-carousel-demo-vertical'));
+````
--- a/components/carousel/index.jsx
+++ b/components/carousel/index.jsx
@@ -0,0 +1,33 @@
+import Carousel from 'react-slick';
+import React from 'react';
+import assign from 'object-assign';
+
+const AntCarousel = React.createClass({
+  getDefaultProps() {
+    return {
+      dots: true,
+      arrows: false
+    };
+  },
+  render() {
+    let props = assign({}, this.props);
+
+    if (props.effect === 'fade') {
+      props.fade = true;
+      props.draggable = false;
+    }
+
+    let className = 'ant-carousel';
+    if (props.vertical) {
+      className = className + ' ant-carousel-vertical';
+    }
+
+    return (
+      <div className={className}>
+        <Carousel {...props} />
+      </div>
+    );
+  }
+});
+
+export default AntCarousel;
--- a/components/carousel/index.md
+++ b/components/carousel/index.md
@@ -2,5 +2,40 @@

 - category: Components
 - chinese: 走马灯
+- type: 展示

 ---
+
+旋转木马，一组轮播的区域。
+
+## 何时使用
+
+- 当有一组平级的内容。
+- 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
+- 常用于一组图片或卡片轮播。
+
+## API
+
+| 参数             | 说明                                         | 类型     | 默认值                          |
+|------------------|----------------------------------------------|----------|---------------------------------|
+| effect           | 动画效果函数，可取 scrollx, fade | String | scrollx |
+| arrow | 是否显示前后翻页箭头 | Boolean   | false |
+| dots | 是否显示面板指示点 | Boolean   | true |
+| vertical | 垂直显示 | Boolean   | false |
+| autoplay | 是否自动切换 | Boolean   | false |
+| easing | 动画效果 | String   | linear |
+| onChange         | 切换面板的回调                               | Function | 无
+
+<style>
+.ant-carousel .slick-slide {
+  text-align: center;
+  height: 100px;
+  line-height: 100px;
+  background: #71B5DE;
+  color: #fff;
+  overflow: hidden;
+}
+#components-carousel-demo-vertical .ant-carousel {
+  margin-right: 35px;
+}
+</style>
--- a/components/checkbox/index.jsx
+++ b/components/checkbox/index.jsx
@@ -3,8 +3,11 @@ import React from 'react';

 export default React.createClass({
  getDefaultProps() {
-    return {prefixCls: 'ant-checkbox'};
-  }, render() {
-    return <Checkbox {...this.props}/>;
+    return {
+      prefixCls: 'ant-checkbox'
+    };
+  },
+  render() {
+    return <Checkbox {...this.props} />;
  }
 });
--- a/components/checkbox/index.md
+++ b/components/checkbox/index.md
@@ -2,7 +2,7 @@

 - category: Components
 - chinese: 多选框
- order: 1
+- type: 表单

 ---

--- a/components/collapse/index.md
+++ b/components/collapse/index.md
@@ -2,7 +2,7 @@

 - category: Components
 - chinese: 折叠面板
- order: 9
+- type: 展示

 ---

--- a/components/common/openAnimation.js
+++ b/components/common/openAnimation.js
@@ -0,0 +1,43 @@
+let velocity;
+if (typeof document !== 'undefined' && typeof window !== 'undefined') {
+  velocity = require('velocity-animate');
+}
+
+function animate(node, show, transitionName, done) {
+  let ok;
+
+  function complete() {
+    if (!ok) {
+      ok = true;
+      done();
+    }
+  }
+
+  // Fix safari flash bug
+  node.style.display = show ? 'block' : 'none';
+  velocity(node, transitionName, {
+    duration: 240,
+    complete: complete,
+    easing: 'easeInOutQuad'
+  });
+  return {
+    stop() {
+      velocity(node, 'finish');
+      complete();
+    }
+  };
+}
+
+const animation = {
+  enter(node, done) {
+    return animate(node, false, 'slideDown', done);
+  },
+  leave(node, done) {
+    return animate(node, true, 'slideUp', done);
+  },
+  appear(node, done) {
+    return animate(node, false, 'slideDown', done);
+  },
+};
+
+module.exports = animation;
--- a/components/datepicker/demo/basic.md
+++ b/components/datepicker/demo/basic.md
@@ -11,6 +11,6 @@
 var Datepicker = antd.Datepicker;

 React.render(
-  <Datepicker value="" />
+  <Datepicker defaultValue="2012-12-12" />
 , document.getElementById('components-datepicker-demo-basic'));
 ````
--- a/components/datepicker/demo/size.md
+++ b/components/datepicker/demo/size.md
@@ -0,0 +1,19 @@
+# 三种大小
+
+- order: 1
+
+三种大小的输入框，大的用在表单中，中的为默认。
+
+---
+
+````jsx
+var Datepicker = antd.Datepicker;
+
+React.render(
+  <div>
+    <Datepicker size="large" />
+    <Datepicker />
+    <Datepicker size="small" />
+  </div>
+, document.getElementById('components-datepicker-demo-size'));
+````
--- a/components/datepicker/index.jsx
+++ b/components/datepicker/index.jsx
@@ -1,7 +1,5 @@
 import React from 'react';
-import Calendar from 'rc-calendar';
-const Datepicker = Calendar.Picker;
-
+import Calendar, {MonthCalendar, Picker as Datepicker} from 'rc-calendar';
 import GregorianCalendar from 'gregorian-calendar';
 import zhCn from 'gregorian-calendar/lib/locale/zh-cn';
 import CalendarLocale from 'rc-calendar/lib/locale/zh-cn';
@@ -10,72 +8,114 @@ import DateTimeFormat from 'gregorian-calendar-format';
 // 和顶部文案保持一致
 import Locale from 'gregorian-calendar-format/lib/locale/zh-cn';
 Locale.shortMonths = ['1月', '2月', '3月', '4月', '5月', '6月',
-                      '7月', '8月', '9月', '10月', '11月', '12月'];
+  '7月', '8月', '9月', '10月', '11月', '12月'];

 // 以下两行代码
 // 给没有初始值的日期选择框提供本地化信息
 let defaultCalendarValue = new GregorianCalendar(zhCn);
 defaultCalendarValue.setTime(Date.now());

-export default React.createClass({
-  getInitialState() {
-    var value;
-    if (this.props.value) {
-      value = new GregorianCalendar(zhCn);
-      value.setTime(new Date(this.props.value).valueOf());
-    }
-    return {
-      value: value
-    };
-  },
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.value) {
-      var value = new GregorianCalendar(zhCn);
-      value.setTime(new Date(nextProps.value).valueOf());
-      this.setState({
+function createPicker(TheCalendar) {
+  return React.createClass({
+    getInitialState() {
+      let value;
+      if (this.props.value) {
+        value = new GregorianCalendar(zhCn);
+        value.setTime(new Date(this.props.value).valueOf());
+      }
+      return {
        value: value
+      };
+    },
+    componentWillReceiveProps(nextProps) {
+      if ('value' in nextProps) {
+        let value = null;
+        if (nextProps.value) {
+          value = new GregorianCalendar(zhCn);
+          value.setTime(new Date(nextProps.value).valueOf());
+        }
+        this.setState({
+          value: value
+        });
+      }
+    },
+    getDefaultProps() {
+      return {
+        format: 'yyyy-MM-dd',
+        placeholder: '请选择日期',
+        transitionName: 'slide-up',
+        onSelect() {
+        }
+      };
+    },
+    handleChange(v) {
+      this.setState({
+        value: v
      });
+      this.props.onSelect(new Date(v.getTime()));
+    },
+    render() {
+      let calendar = (
+        <TheCalendar
+          disabledDate={this.props.disabledDate}
+          locale={CalendarLocale}
+          orient={['top', 'left']}
+          defaultValue={defaultCalendarValue}
+          showTime={this.props.showTime}
+          prefixCls="ant-calendar"
+          showOk={this.props.showTime}
+          showClear={false} />
+      );
+      let sizeClass = '';
+      if (this.props.size === 'large') {
+        sizeClass = ' ant-input-lg';
+      } else if (this.props.size === 'small') {
+        sizeClass = ' ant-input-sm';
+      }
+      let defaultValue;
+      if (this.props.defaultValue) {
+        defaultValue = new GregorianCalendar(zhCn);
+        defaultValue.setTime(new Date(this.props.defaultValue).valueOf());
+      }
+      return (
+        <Datepicker
+          transitionName={this.props.transitionName}
+          disabled={this.props.disabled}
+          trigger={<span className="ant-calendar-picker-icon" />}
+          calendar={calendar}
+          adjustOrientOnCalendarOverflow={{x: true, y: false}}
+          formatter={new DateTimeFormat(this.props.format)}
+          value={this.state.value}
+          defaultValue={defaultValue}
+          prefixCls="ant-calendar-picker"
+          style={this.props.style}
+          onChange={this.handleChange}>
+          <input
+            placeholder={this.props.placeholder}
+            className={'ant-calendar-picker-input ant-input' + sizeClass}/>
+        </Datepicker>
+      );
    }
-  },
+  });
+}
+
+const AntDatePicker = createPicker(Calendar);
+
+const AntMonthPicker = createPicker(MonthCalendar);
+
+const AntCalendar = React.createClass({
  getDefaultProps() {
    return {
-      format: 'yyyy-MM-dd',
-      placeholder: '请选择日期',
-      transitionName: 'slide-up',
-      onSelect: function () {}
+      locale: CalendarLocale,
+      prefixCls: 'ant-calendar',
    };
  },
-  handleChange(v) {
-    this.setState({
-      value: v
-    });
-    this.props.onSelect(new Date(v.getTime()));
-  },
  render() {
-    var calendar = (
-      <Calendar
-        disabledDate={this.props.disabledDate}
-        locale={CalendarLocale}
-        orient={['top', 'left']}
-        defaultValue={defaultCalendarValue}
-        showTime={this.props.showTime}
-        prefixCls="ant-calendar"
-        showOk={this.props.showTime}
-        showClear={false}/>
-    );
-    return (
-      <Datepicker
-        transitionName={this.props.transitionName}
-        disabled={this.props.disabled}
-        trigger={<span className="ant-calendar-picker-icon" />}
-        calendar={calendar}
-        adjustOrientOnCalendarOverflow={false}
-        formatter={new DateTimeFormat(this.props.format)}
-        value={this.state.value}
-        prefixCls="ant-calendar-picker"
-        onChange={this.handleChange}>
-        <input placeholder={this.props.placeholder} className="ant-calendar-picker-input ant-input" />
-      </Datepicker>
-    );
+    return <Calendar {...this.props}/>;
  }
 });
+
+AntDatePicker.Calendar = AntCalendar;
+AntDatePicker.MonthPicker = AntMonthPicker;
+
+export default AntDatePicker;
--- a/components/datepicker/index.md
+++ b/components/datepicker/index.md
@@ -2,7 +2,7 @@

 - category: Components
 - chinese: 日期选择框
- order: 5
+- type: 表单

 ---

@@ -12,23 +12,25 @@

 当用户需要输入一个日期/时间，可以点击标准输入框，弹出日期面板进行选择。支持键盘操作。

+## API
+
 ```html
 <Datepicker value="2015-01-01" />
 ```

-## API
-
 | 参数         | 说明           | 类型     | 默认值       |
 |--------------|----------------|----------|--------------|
 | value        | 日期           | string   | 无           |
+| defaultValue | 默认日期       | string   | 无           |
 | format       | 展示的日期格式 | string   | "yyyy-MM-dd" |
 | disabledDate | 不可选择的日期 | function | 无           |
 | onSelect     | 选择日期的回调 | function | 无           |
 | showTime     | 显示时间选择条 | boolean  | false        |
 | disabled     | 禁用           | bool     | false        |
+| size         | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string   | 无  |

 <style>
-.code-box-demo .ant-calendar-picker-input {
-  width: 200px;
+.code-box-demo .ant-calendar-picker {
+  margin: 0 12px 12px 0;
 }
 </style>
--- a/components/dropdown/demo/event.md
+++ b/components/dropdown/demo/event.md
@@ -1,4 +1,4 @@
-# 基本
+# 触发事件

 - order: 3

@@ -9,11 +9,11 @@
 ````jsx
 var Menu = antd.Menu;
 var Dropdown = antd.Dropdown;
-var onClick = function (key){
+var onSelect = function ({key}){
  alert('选中了菜单' + key);
 };

-var menu = <Menu onClick={onClick}>
+var menu = <Menu onSelect={onSelect}>
  <Menu.Item key="1">第一个菜单项</Menu.Item>
  <Menu.Item key="2">第二个菜单项</Menu.Item>
  <Menu.Item key="3">第三个菜单项</Menu.Item>
--- a/components/dropdown/index.md
+++ b/components/dropdown/index.md
@@ -2,7 +2,7 @@

 - category: Components
 - chinese: 下拉菜单
- order: 13
+- type: 展示

 ---

@@ -10,18 +10,19 @@

 ## 何时使用

-当页面元素过多时，用此组件可以收纳元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。
+当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。

 ## API

 属性如下

-| 成员        | 说明           | 类型               | 默认值       |
-|-------------|----------------|--------------------|--------------|
-| trigger     | 触发下来行为   | "click" or "hover" | hover        |
-| overlay     | 菜单节点       | React.Element      | 无           |
+| 成员        | 说明             | 类型               | 默认值       |
+|-------------|------------------|--------------------|--------------|
+| trigger     | 触发下拉的行为   | "click" or "hover" | hover        |
+| overlay     | 菜单节点         | React.Element      | 无           |
+| onSelect    | 选择后的回调     | function(e) {}     | 无           |


-菜单可由 `antd.Menu` 取得，可设置 `onClick` 回调，菜单还包括菜单项 `antd.Menu.Item`，分割线 `antd.Menu.Divider`。
+菜单可由 `antd.Menu` 取得，可设置 `onSelect` 回调，菜单还包括菜单项 `antd.Menu.Item`，分割线 `antd.Menu.Divider`。

 > 注意： Menu.Item 必须设置唯一的 key 属性。
--- a/components/enter-animation/demo/basic.md
+++ b/components/enter-animation/demo/basic.md
@@ -0,0 +1,66 @@
+# 进场和离场
+
+- order: 1
+
+自动。
+
+---
+
+````jsx
+var EnterAnimation = antd.EnterAnimation;
+
+var Test = React.createClass({
+  getInitialState() {
+    return {
+      show: true
+    }
+  },
+  onClick() {
+    this.setState({
+      show: !this.state.show
+    })
+  },
+  render() {
+    return (
+      <div>
+        <div style={{marginBottom: 20}}>
+          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
+        </div>
+        <EnterAnimation>
+          {this.state.show ?
+            <div className="demo-content" key='a'>
+              <div className="demo-kp">
+                <ul>
+                  <li></li>
+                  <li></li>
+                  <li></li>
+                </ul>
+              </div>
+              <div className="demo-listBox">
+                <div className="demo-list">
+                  <div className="title"></div>
+                  <ul>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                  </ul>
+                </div>
+              </div>
+          </div> : null}
+        </EnterAnimation>
+      </div>
+    );
+  }
+});
+
+React.render(<Test />
+, document.getElementById('components-enter-animation-demo-basic'));
+````
+
+<style>
+#components-enter-animation-demo-basic {
+  text-align: center;
+  overflow: hidden;
+  margin: 20px auto;
+}
+</style>
--- a/components/enter-animation/demo/enter-data.md
+++ b/components/enter-animation/demo/enter-data.md
@@ -0,0 +1,76 @@
+# 指定节点动画进出场
+
+- order: 3
+
+通过加上 `enter-data` 属性来指定需要动画进场的元素，并且可以定义每个元素的动画效果。
+
+
+---
+
+````jsx
+var EnterAnimation = antd.EnterAnimation;
+
+var Test = React.createClass({
+  getInitialState() {
+    return {
+      enter: {
+        type: 'right',
+        interval: .1,
+      },
+      leave: {
+        type:'left',
+        interval: 0.03
+      },
+      show: true
+    }
+  },
+  onClick() {
+    this.setState({
+      show: !this.state.show
+    })
+  },
+  render() {
+    return (
+      <div>
+        <div style={{marginBottom: 20}}>
+          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
+        </div>
+        <EnterAnimation enter={this.state.enter} leave={this.state.leave}>
+        {this.state.show ? <div key='enter-data'>
+          <div className="demo-content">
+            <div className="demo-kp">
+              <ul>
+                <li enter-data></li>
+                <li enter-data></li>
+                <li enter-data></li>
+              </ul>
+            </div>
+            <div className="demo-listBox">
+              <div className="demo-list">
+                <div className="title" enter-data={{type: 'bottom', queueId: 1}}></div>
+                <ul>
+                  <li enter-data={{type: 'bottom', queueId: 1}}></li>
+                  <li enter-data={{type: 'bottom', queueId: 1}}></li>
+                  <li enter-data={{type: 'bottom', queueId: 1}}></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div> : null}
+        </EnterAnimation>
+      </div>
+    )
+  }
+});
+
+React.render(<Test />
+, document.getElementById('components-enter-animation-demo-enter-data'));
+````
+
+<style>
+#components-enter-animation-demo-enter-data {
+  text-align: center;
+  overflow: hidden;
+  margin: 18px auto;
+}
+</style>
--- a/components/enter-animation/demo/enter-leave.md
+++ b/components/enter-animation/demo/enter-leave.md
@@ -0,0 +1,82 @@
+# 配置进出场的样式
+
+- order: 2
+
+配置进出场动画样式。
+
+
+---
+
+````jsx
+var EnterAnimation = antd.EnterAnimation;
+
+var Test = React.createClass({
+  getInitialState() {
+    return {
+      enter:{
+        type: 'right',
+        interval: 0.3,
+        callback:() => {
+          console.log('enter');
+        }
+      },
+      leave:{
+        type: 'left',
+        interval: .1,
+        callback:() => {
+          console.log('leave');
+        }
+      },
+      show:true,
+    }
+  },
+  onClick() {
+    this.setState({
+      show:!this.state.show,
+
+    })
+  },
+  render() {
+    return (
+      <div>
+        <div style={{marginBottom: 20}}>
+          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
+        </div>
+        <EnterAnimation enter={this.state.enter} leave={this.state.leave}>
+          {this.state.show ? 
+            <div className="demo-content" key='demo'>
+              <div className="demo-kp">
+                <ul>
+                  <li></li>
+                  <li></li>
+                  <li></li>
+                </ul>
+              </div>
+              <div className="demo-listBox">
+                <div className="demo-list">
+                  <div className="title"></div>
+                  <ul>
+                    <li></li>
+                    <li></li>
+                    <li></li>
+                  </ul>
+                </div>
+              </div>
+          </div> : null}
+        </EnterAnimation>
+      </div>
+    );
+  }
+});
+
+React.render(<Test />
+, document.getElementById('components-enter-animation-demo-enter-leave'));
+````
+
+<style>
+#components-enter-animation-demo-enter-leave {
+  text-align: center;
+  overflow: hidden;
+  margin: 20px auto;
+}
+</style>
--- a/components/enter-animation/demo/form.md
+++ b/components/enter-animation/demo/form.md
@@ -0,0 +1,101 @@
+# 表单动画进出场
+
+- order: 6
+
+表单组合的进场与出场动画。
+
+---
+
+````jsx
+var EnterAnimation = antd.EnterAnimation;
+var Select = antd.Select;
+var Option = Select.Option;
+var Checkbox = antd.Checkbox;
+var Radio = antd.Radio;
+var RadioGroup = antd.Radio.Group;
+
+var Test = React.createClass({
+  getInitialState() {
+    return {
+      enter: {
+        type: 'right',
+        callback: null,
+        interval: 0.1
+      },
+      leave: {
+        type: 'left',
+        reverse: true,
+        interval: 0.05,
+        ease:'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
+        callback: ()=> {
+          console.log('出场结束')
+        }
+      },
+      show: true
+    }
+  },
+  onClick() {
+    this.setState({
+      show: !this.state.show
+    })
+  },
+  render() {
+    return (
+      <div>
+        <div style={{marginBottom: 20, textAlign: 'center'}}>
+          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
+        </div>
+        <EnterAnimation enter={this.state.enter} leave={this.state.leave} component='form' className="ant-form-horizontal">
+          {this.state.show ? <div key='from'>
+            <div className="ant-form-item ant-form-item-compact">
+              <label htmlFor="userName" className="col-6" required>用户名：</label>
+              <div className="col-6">
+                <p className="ant-form-text">大眼萌 minion</p>
+              </div>
+            </div>
+            <div className="ant-form-item">
+              <label htmlFor="password" className="col-6" required>密码：</label>
+              <div className="col-14">
+                <input className="ant-input" type="password" id="password" placeholder="请输入密码"/>
+              </div>
+            </div>
+            <div className="ant-form-item ant-form-item-compact">
+              <label  className="col-6" required>您的性别：</label>
+              <div className="col-14">
+                <RadioGroup value="male">
+                  <Radio value="male">男的</Radio>
+                  <Radio value="female">女的</Radio>
+                </RadioGroup>
+              </div>
+            </div>
+            <div className="ant-form-item">
+              <label htmlFor="remark" className="col-6" required>备注：</label>
+              <div className="col-14">
+                <textarea className="ant-input" id="remark" placeholder="随便写"></textarea>
+                <p className="ant-form-explain">随便写点什么</p>
+              </div>
+            </div>
+            <div className="ant-form-item ant-form-item-compact">
+              <div className="col-14 col-offset-6">
+                <label>
+                  <Checkbox />
+                  同意
+                </label>
+              </div>
+            </div>
+            <div className="row">
+              <div className="col-16 col-offset-6">
+                <input type="submit" className="ant-btn ant-btn-primary" value="确 定" />
+              </div>
+            </div>
+          </div> : null}
+        </EnterAnimation>
+      </div>
+    )
+  }
+});
+
+React.render(<Test />
+, document.getElementById('components-enter-animation-demo-form'));
+````
+
--- a/components/enter-animation/demo/page.md
+++ b/components/enter-animation/demo/page.md
@@ -0,0 +1,95 @@
+# 页面的进场和离场
+
+- order: 5
+
+页面的进场和离场。
+
+---
+
+````jsx
+var EnterAnimation = antd.EnterAnimation;
+
+var Test = React.createClass({
+  getInitialState() {
+    return {
+      show: true,
+      enter:{
+        type:'right',
+        ease:'cubic-bezier(0.19, 1, 0.22, 1)'
+      },
+      leave:{
+        type:'left',
+        ease:'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
+        reverse:true,
+        interval:0.05
+      }
+    }
+  },
+  onClick() {
+    this.setState({
+      show: !this.state.show
+    })
+  },
+  render() {
+    return (
+      <div>
+        <div style={{marginBottom: 20}}>
+          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
+        </div>
+        <EnterAnimation enter={this.state.enter} leave={this.state.leave}>
+          {this.state.show ? <div key='a'>
+            <div className="demo-header" enter-data leave-data={{type:'alpha'}}>
+              <div className="logo" leave-data={{type:'left'}}>
+                <img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
+                <span>logo</span>
+              </div>
+              <ul >
+                <li enter-data leave-data={{type:'right'}}></li>
+                <li enter-data leave-data={{type:'right'}}></li>
+                <li enter-data leave-data={{type:'right'}}></li>
+                <li enter-data leave-data={{type:'right'}}></li>
+                <li enter-data leave-data={{type:'right'}}></li>
+              </ul>
+            </div>
+            <div className="demo-content" >
+              <div className="demo-title" enter-data={{type:'bottom'}} leave-data={{type:'bottom',queueId:1}}>我是标题</div>
+              <div className="demo-kp">
+                <ul>
+                  <li enter-data={{interval:0.05}} leave-data={{type:'bottom',queueId:1}}></li>
+                  <li enter-data={{interval:0.05}} leave-data={{type:'bottom',queueId:1}}></li>
+                  <li enter-data={{interval:0.05}} leave-data={{type:'bottom',queueId:1,delay:0.2}}></li>
+                </ul>
+              </div>
+              <div className="demo-title" enter-data={{type:'bottom'}} leave-data={{type:'bottom',queueId:2}}>我是标题</div>
+              <div className="demo-listBox">
+                <div className="demo-list">
+                  <div className="title" enter-data={{type:'bottom'}} leave-data={{queueId:2}}></div>
+                  <ul>
+                    <li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
+                    <li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
+                    <li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
+                    <li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
+                    <li enter-data={{type:'bottom'}} leave-data={{queueId:2}}></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div className="demo-footer" enter-data={{type:'bottom'}} leave-data={{queueId:2}}></div>
+          </div> : null}
+        </EnterAnimation>
+      </div>
+    );
+  }
+});
+
+React.render(<Test />
+, document.getElementById('components-enter-animation-demo-page'));
+````
+
+<style>
+#components-enter-animation-demo-page {
+  text-align: center;
+  overflow: hidden;
+  margin: 20px auto;
+}
+</style>
--- a/components/enter-animation/demo/router.md
+++ b/components/enter-animation/demo/router.md
@@ -0,0 +1,99 @@
+# Router 默认进出场
+
+- order: 7
+
+router 组合的进场与出场动画。
+
+---
+
+````jsx
+var ReactRouter = require('react-router');
+var Router = ReactRouter.Router;
+var Route = ReactRouter.Route;
+var Link = ReactRouter.Link;
+var EnterAnimation = antd.EnterAnimation;
+var Menu = antd.Menu;
+
+var App = React.createClass({
+  getInitialState: function () {
+    return {};
+  },
+  clickPage() {
+    this.setState({
+      enter: {delay: 0.3},
+      leave: {delay: 0}
+    });
+  },
+  render() {
+    var key = this.props.location.pathname;
+    return (
+      <div>
+        <Menu style={{marginBottom: 20}} mode="horizontal">
+          <Menu.Item key='home'>
+            <Link to="/" onClick={this.clickPage}>首页</Link>
+          </Menu.Item>
+          <Menu.Item key='page1'>
+            <Link to="/page1" onClick={this.clickPage}>Page 1</Link>
+          </Menu.Item>
+          <Menu.Item key='page2'>
+            <Link to="/page2" onClick={this.clickPage}>Page 2</Link>
+          </Menu.Item>
+        </Menu>
+        <EnterAnimation className='demo-router-wap' enter={this.state.enter} leave={this.state.leave}>
+            {React.cloneElement(this.props.children || <div key='home' className='demo-router-child'><h1>Home</h1><div>这是首页</div></div>, {key: key})}
+        </EnterAnimation>
+      </div>
+    );
+  }
+});
+var Page1 = React.createClass({
+  render() {
+    return (
+      <div className="demo-router-child">
+        <h1>Page 1</h1>
+        <p><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
+        <p><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
+        <p><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
+        <p><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
+        <p><Link to="/page2">A link to page 2 should be active</Link>改变样式</p>
+      </div>
+    );
+  }
+});
+var Page2 = React.createClass({
+  render() {
+    return (
+      <div className="demo-router-child">
+        <h1>Page 2</h1>
+        <p><Link to="/page1">a link to page 1 </Link>我是页面2.</p>
+        <p><Link to="/page1">a link to page 1 </Link>我是页面2.</p>
+        <p><Link to="/page1">a link to page 1 </Link>我是页面2.</p>
+        <p><Link to="/page1">a link to page 1 </Link>我是页面2.</p>
+      </div>
+    );
+  }
+});
+React.render((
+  <Router>
+    <Route path="/" component={App} ignoreScrollBehavior>
+      <Route path="page1" component={Page1} />
+      <Route path="page2" component={Page2} />
+    </Route>
+  </Router>
+), document.getElementById('components-enter-animation-demo-router'));
+````
+
+<style>
+#components-enter-animation-demo-router {
+  text-align: center;
+}
+.demo-router-wap{
+  position: relative;
+  transition: height .5s;
+  width: 300px;
+  margin: auto;
+}
+.demo-router-child{
+  text-align:left;
+}
+</style>
--- a/components/enter-animation/demo/simple.md
+++ b/components/enter-animation/demo/simple.md
@@ -0,0 +1,27 @@
+# 默认
+
+- order: 0
+
+最简单的进场例子。
+
+---
+
+````jsx
+var EnterAnimation = antd.EnterAnimation;
+
+React.render(
+  <EnterAnimation>
+    <ul key="key">
+      <li>依次进场</li>
+      <li>依次进场</li>
+      <li>依次进场</li>
+      <li>依次进场</li>
+      <li>依次进场</li>
+      <li>依次进场</li>
+      <li>依次进场</li>
+      <li>依次进场</li>
+    </ul>
+  </EnterAnimation>
+, document.getElementById('components-enter-animation-demo-simple'));
+````
+
--- a/components/enter-animation/demo/style.md
+++ b/components/enter-animation/demo/style.md
@@ -0,0 +1,78 @@
+# style 自定义样式动画进出场
+
+- order: 4
+
+通过加上属性里的 `style` 来自定义 CSS 动画进出场。
+
+
+---
+
+````jsx
+var EnterAnimation = antd.EnterAnimation;
+
+var Test = React.createClass({
+  getInitialState() {
+    return {
+      enter: {
+        style: {
+          transform: "translateX(50px)",
+          opacity: 0
+        },
+        interval: .1,
+      },
+      leave: {
+        interval: 0.03
+      },
+      show: true
+    }
+  },
+  onClick() {
+    this.setState({
+      show: !this.state.show
+    })
+  },
+  render() {
+    return (
+      <div>
+        <div style={{marginBottom: 20}}>
+          <button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
+        </div>
+        <EnterAnimation enter={this.state.enter} leave={this.state.leave}>
+        {this.state.show ? <div key='enter-data'>
+          <div className="demo-content">
+            <div className="demo-kp">
+              <ul>
+                <li enter-data></li>
+                <li enter-data></li>
+                <li enter-data></li>
+              </ul>
+            </div>
+            <div className="demo-listBox">
+              <div className="demo-list">
+                <div className="title" enter-data={{style: {transform: 'translateY(30px)', opacity: 0}, queueId: 1}}></div>
+                <ul>
+                  <li enter-data={{style: {transform: 'translateY(30px)', opacity: 0}, queueId: 1}}></li>
+                  <li enter-data={{style: {transform: 'translateY(30px)', opacity: 0}, queueId: 1}}></li>
+                  <li enter-data={{style: {transform: 'translateY(30px)', opacity: 0}, queueId: 1}}></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div> : null}
+        </EnterAnimation>
+      </div>
+    )
+  }
+});
+
+React.render(<Test />
+, document.getElementById('components-enter-animation-demo-style'));
+````
+
+<style>
+#components-enter-animation-demo-style {
+  text-align: center;
+  overflow: hidden;
+  margin: 18px auto;
+}
+</style>
--- a/components/enter-animation/index.jsx
+++ b/components/enter-animation/index.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import EnterAnimation from 'enter-animation';
+
+class AntEnterAnimation extends React.Component {
+  render() {
+    return <EnterAnimation {...this.props} />;
+  }
+}
+
+AntEnterAnimation.to = EnterAnimation.to;
+export default AntEnterAnimation;
+
--- a/components/enter-animation/index.md
+++ b/components/enter-animation/index.md
@@ -0,0 +1,252 @@
+# EnterAnimation
+
+- category: Components
+- chinese: 进场动画
+
+
+---
+
+通过简单的配置对一组元素添加串行的进场动画效果。
+
+## 何时使用
+
+- 从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。
+
+- 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，使页面转场更加流畅和舒适，提高整体视觉效果和产品的质感。
+
+
+## API
+
+元素依次进场。
+
+```html
+<EnterAnimation>
+  <div key='demo'>
+    <div>依次进场</div>
+    <div>依次进场</div>
+    <div>依次进场</div>
+    <div>依次进场</div>
+  </div>
+</EnterAnimation>
+```
+
+如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历 dom 下一级节点来执行动画。
+
+```html
+<EnterAnimation enter={type:'left',delay:2}>
+  <div key='demo'>
+    <div>
+      <div enter-data>
+        依次进场
+      </div>
+    </div>
+    <div enter-data>依次进场</div>
+    <div enter-data={{type: 'bottom'}}>依次进场，并修改动画效果</div>
+    <div>没有动画</div>
+  </div>
+</EnterAnimation>
+```
+
+### <EnterAnimation />
+
+|参数             |类型    |默认值        |详细                                                 |
+|-----------------|-------|-------------|----------------------------------------------------|
+|enter|object| `{type:'right'}` |管理进场数据|
+|leave|object| null |管理当前元素出场的数据, null 时继承 enter 里的所有标签的值 |
+|component|string| `div` | EnterAnimation 替换的标签名|
+
+### enter = {} | leave = {}
+
+|参数             |类型    |默认值        |详细                                                 |
+|-----------------|-------|-------------|----------------------------------------------------|
+|type             |string |`right`  |内置动画样式：<br/> `alpha` `left` `right` `top` `bottom` `scale` `scaleBig` `scaleX` `scaleY`  |
+|style           |object / string |null   |同上， style 的样式动画, `type` 有值，此项无效。<br/>如 `{transform:'translateX(100px)'}` 或 `'transform: translateX(100px)'`|
+|duration         |number |0.5    |每个动画的时间,以秒为单位|
+|ease             |string|`cubic-bezier(0.165, 0.84, 0.44, 1);`|样式缓动,只支持 css 样式缓动;|
+|delay            |number |0      |整个区块的延时，以秒为单位|
+|reverse          |boolean|false  |是否倒放,从最后一个 dom 开始往上播放|
+|interval         |number |0.1    |递增延时值，以秒为单位|
+|callback         |function|null  |动画结束回调|
+
+### 一级标签key：
+
+|参数             |类型    |详细                                                 |
+|-----------------|-------|----------------------------------------------------|
+|key|string|必需，控制进出场；|
+
+### 子标签
+
+|参数             |类型    |默认值      |详细                                                 |
+|-----------------|-------|-----------|----------------------------------------------------|
+|enter-data       |object | `{type:'right'}`     |子标签进场参数|
+|leave-data       |object | `enter-data` |子标签出场参数|
+
+
+#### enter-data = {}  | leave-data = {}
+
+|参数              |类型            |默认值           |详细                                                 |
+|-----------------|-----------------|----------------|----------------------------------------------------|
+|type             |string          |`right`           |同标签里的 `type`,覆盖标签里的值|
+|style            |object / string          |null            |同标签里的 `style`,覆盖标签里的值|
+|duration         |number          |0.5             |同标签里的 `duration`,覆盖标签里的值|
+|ease             |string          |`cubic-bezier(0.165, 0.84, 0.44, 1)`|同标签里的 `ease`,覆盖标签里的值|
+|delay            |number          |0               |当前动画的延时，依照结构递增以上的 `interval`|
+|queueId          |number          |0               |动画的线程|
+
+> 由于使用了 CSS3 动画，所以 `IE9` 及更早的版本将没有进场效果。
+
+<style>
+.code-box-demo .demo-header {
+  width: 100%;
+  background: #ebedee;
+  height: 30px;
+}
+.code-box-demo .demo-header ul {
+  float: right;
+  margin-right: 5px;
+}
+.code-box-demo .demo-header ul li {
+  width: 50px;
+  height: 30px;
+  float: left;
+  background: #e4e4e4;
+  margin-left: 5px;
+}
+.code-box-demo .demo-header ul li:before {
+  margin: 10px auto;
+  width: 20px;
+  height: 10px;
+  background: #ebeded;
+}
+.code-box-demo .demo-header .logo {
+  float: left;
+  margin: 0px auto 0 10px;
+  line-height: 32px;
+}
+.code-box-demo .demo-header .logo img{
+  margin:auto
+}
+.code-box-demo .demo-header .logo span {
+  display: block;
+  float: right;
+}
+.code-box-demo .demo-content {
+  width: 80%;
+  margin: 10px auto;
+}
+.code-box-demo .demo-content .demo-title {
+  text-align:left;
+  background: #a4a4a4;
+  width: 40%;
+  height: 20px;
+  line-height: 20px;
+  color: #ebeded;
+  text-indent:10px
+}
+.code-box-demo .demo-content .demo-listBox {
+  margin-top: 10px;
+}
+.code-box-demo .demo-content .demo-listBox .demo-list .title {
+  height: 30px;
+  background: #cacaca;
+  overflow: hidden;
+}
+.code-box-demo .demo-content .demo-listBox .demo-list .title:before,.code-box-demo .demo-content .demo-listBox .demo-list .title:after{
+  width: 30%;
+  height: 5px;
+  background: #ebeded;
+  float:left;
+  margin:12px 35px 0;
+}
+.code-box-demo .demo-content .demo-listBox .demo-list .title:after{
+  width:15%;
+  float:right;
+  margin:12px 10px 0;
+
+}
+.code-box-demo .demo-content .demo-listBox .demo-list ul li {
+  height: 25px;
+  background: #ebeded;
+  border-bottom: 1px solid #cacaca;
+  overflow: hidden;
+  padding: 5px 15px;
+}
+.code-box-demo .demo-content .demo-listBox .demo-list ul li:before {
+  width: 10px;
+  height: 5px;
+  background: #cacaca;
+  float: left;
+  margin-top:4px
+}
+.code-box-demo .demo-content .demo-listBox .demo-list ul li:after {
+  width: 50%;
+  height: 5px;
+  background: #cacaca;
+  float: left;
+  margin-left: 10px;
+  margin-top: 4px;
+}
+.code-box-demo .demo-content .demo-kp {
+  margin: 10px auto;
+}
+.code-box-demo .demo-content .demo-kp ul li {
+  display: inline-block;
+  width: 32%;
+  height: 40px;
+  background: #cacaca;
+  color: #ebeded;
+  text-align: left;
+  padding: 10px;
+  margin-right: calc(2%);
+}
+.code-box-demo .demo-content .demo-kp ul li:last-child {
+  margin-right: 0%;
+}
+.code-box-demo .demo-content .demo-kp ul li:after {
+  width: 60%;
+  height: 5px;
+  background: #ebeded;
+  float: left;
+  margin-top: 7px;
+}
+.code-box-demo .demo-content .demo-kp ul li:before {
+  background: #ebeded;
+  float: left;
+  width: 15px;
+  height: 15px;
+  margin:2px 10% 0 0;
+
+}
+.code-box-demo .demo-footer {
+  margin-top: 10px;
+  background: #cacaca;
+  height: 40px;
+  float: left;
+  width: 100%;
+  display: table;
+}
+.code-box-demo .demo-footer:before {
+  width: 60%;
+  height: 5px;
+  background: #ededed;
+  margin: 10px auto 0;
+}
+.code-box-demo .demo-footer:after {
+  width: 30%;
+  height: 5px;
+  background: #ededed;
+  margin: 5px auto;
+}
+.code-box-demo .demo-header ul li:before,
+.code-box-demo .demo-content .demo-kp ul li:before,
+.code-box-demo .demo-content .demo-kp ul li:after,
+.code-box-demo .demo-content .demo-listBox .demo-list .title:before,
+.code-box-demo .demo-content .demo-listBox .demo-list .title:after,
+.code-box-demo .demo-content .demo-listBox .demo-list ul li:before,
+.code-box-demo .demo-content .demo-listBox .demo-list ul li:after,
+.code-box-demo .demo-footer:before,
+.code-box-demo .demo-footer:after {
+  display: block;
+  content: "";
+}
+</style>
--- a/components/form/demo/form-controls.md
+++ b/components/form/demo/form-controls.md
@@ -13,7 +13,7 @@ var Select = antd.Select;
 var Option = Select.Option;
 var Checkbox = antd.Checkbox;
 var Radio = antd.Radio;
-var RadioGroup = antd.RadioGroup;
+var RadioGroup = antd.Radio.Group;

 function handleSelectChange(value) {
  console.log('selected ' + value);
@@ -22,21 +22,21 @@ function handleSelectChange(value) {
 React.render(
 <form className="ant-form-horizontal">
  <div className="ant-form-item">
-    <label className="col-6">输入框：</label>
+    <label htmlFor="control-input" className="col-6">输入框：</label>
    <div className="col-14">
-      <input type="text" className="ant-input" placeholder="Please enter..." />
+      <input type="text" className="ant-input" id="control-input" placeholder="Please enter..." />
    </div>
  </div>
  <div className="ant-form-item">
-    <label className="col-6">文本域：</label>
+    <label htmlFor="control-textarea" className="col-6">文本域：</label>
    <div className="col-14">
-      <textarea className="ant-input"></textarea>
+      <textarea className="ant-input" id="control-textarea"></textarea>
    </div>
  </div>
  <div className="ant-form-item">
    <label className="col-6">Select 选择器：</label>
    <div className="col-14">
-      <Select value="lucy" style={{width:200}} onChange={handleSelectChange}>
+      <Select size="large" defaultValue="lucy" style={{width:200}} onChange={handleSelectChange}>
        <Option value="jack">jack</Option>
        <Option value="lucy">lucy</Option>
        <Option value="disabled" disabled>disabled</Option>
@@ -48,13 +48,13 @@ React.render(
    <label className="col-6">Checkbox 多选框：</label>
    <div className="col-18">
      <label className="ant-checkbox-vertical">
-        <Checkbox /> 选项一
+        <Checkbox />选项一
      </label>
      <label className="ant-checkbox-vertical">
-        <Checkbox /> 选项二
+        <Checkbox />选项二
      </label>
      <label className="ant-checkbox-vertical">
-        <Checkbox disabled={true} /> 选项三（不可选）
+        <Checkbox disabled={true} />选项三（不可选）
      </label>
    </div>
  </div>
--- a/components/form/demo/horizontal-form.md
+++ b/components/form/demo/horizontal-form.md
@@ -4,29 +4,29 @@

 为 `<form>` 标签添加 `.ant-form-horizontal` 类(这让 `.ant-form-item` 表现为栅格系统中的 `row`)，并结合使用我们提供的 [栅格系统](http://ant.design/components/layout/)，可以实现 label 标签和表单控件的水平排列。

-如需将一行静态文本和 `<label>` 标签置于同一行，则只需为 `<p>` 标签添加 `.ant-form-text` 类即可。
+如需将一行静态文本和 `<label>` 标签置于同一行，则只需为标签添加 `.ant-form-text` 类即可。

 为 `label` 标签添加 `required` 属性，表示该项必选。

-**注意**：对于表单域(`.ant-form-item`) 为静态文本、`checkbox`、`radio`以及`input[type="file"]`的，其高度不同于一般的表单域，需要在 `.ant-form-item` 类后再加上 `.ant-form-item-compact`。
+**注意**：在我们的设计里，表单域(`.ant-form-item`) 为静态文本、`checkbox`、`radio`以及`input[type="file"]`的，其高度不同于一般的表单域，需要在 `.ant-form-item` 类后再加上 **`.ant-form-item-compact`**。

 ---

 ````jsx
 var Checkbox = antd.Checkbox;
 var Radio = antd.Radio;
-var RadioGroup = antd.RadioGroup;
+var RadioGroup = antd.Radio.Group;

 React.render(
 <form className="ant-form-horizontal">
  <div className="ant-form-item ant-form-item-compact">
-    <label for="userName" className="col-6" required>用户名：</label>
+    <label htmlFor="userName" className="col-6" required>用户名：</label>
    <div className="col-6">
      <p className="ant-form-text">大眼萌 minion</p>
    </div>
  </div>
  <div className="ant-form-item">
-    <label for="password" className="col-6" required>密码：</label>
+    <label htmlFor="password" className="col-6" required>密码：</label>
    <div className="col-14">
      <input className="ant-input" type="password" id="password" placeholder="请输入密码"/>
    </div>
@@ -41,9 +41,9 @@ React.render(
    </div>
  </div>
  <div className="ant-form-item">
-    <label for="password" className="col-6" required>备注：</label>
+    <label htmlFor="remark" className="col-6" required>备注：</label>
    <div className="col-14">
-      <textarea className="ant-input" placeholder="随便写"></textarea>
+      <textarea className="ant-input" id="remark" placeholder="随便写"></textarea>
      <p className="ant-form-explain">随便写点什么</p>
    </div>
  </div>
--- a/components/form/demo/inline-form.md
+++ b/components/form/demo/inline-form.md
@@ -2,7 +2,7 @@

 - order: 1

-在**视口宽度大于等于 768px **时，你可以为 `<form>` 标签添加 `.ant-form-inline` 类可使其表现为 inline-block 级别的控件。
+你可以为 `<form>` 标签添加 `.ant-form-inline` 类可使其表现为 inline-block 级别的控件。

 ---

@@ -12,12 +12,12 @@ var Checkbox = antd.Checkbox;
 React.render(
 <form className="ant-form-inline">
  <div className="ant-form-item">
-    <label for="userName">账户：</label>
+    <label htmlFor="userName">账户：</label>
    <input className="ant-input" type="text" id="userName" placeholder="请输入账户名" />
  </div>
  <div className="ant-form-item">
-    <label for="password">密码：</label>
-    <input className="ant-input" type="password" id="password" placeholder="请输入密码" />
+    <label htmlFor="password2">密码：</label>
+    <input className="ant-input" type="password" id="password2" placeholder="请输入密码" />
  </div>
  <div className="ant-form-item">
    <label className="ant-checkbox-inline">
--- a/components/form/demo/inputs.md
+++ b/components/form/demo/inputs.md
@@ -4,8 +4,6 @@

 带标签的输入框：使用 `.ant-input-group` 类并结合 `.ant-input-group-addon` 类可以创建带标签的输入框。

-输入框组合：`.ant-inputs` 类由多个 `.ant-inputs-item` 组成，使多个 Input 可以在一行显示出来。
-
 ---

 ````jsx
@@ -15,31 +13,31 @@ var Option = Select.Option;
 React.render(
 <form className="ant-form-horizontal">
  <div className="ant-form-item">
-    <label className="col-6" for="site1">标签输入框：</label>
+    <label className="col-6" htmlFor="site1">标签输入框：</label>
    <div className="col-16">
      <div className="ant-input-group">
        <span className="ant-input-group-addon" id="basic-addon1">Http://</span>
-        <input type="text" id="site1" className="ant-input" value="mysite.com" />
+        <input type="text" id="site1" className="ant-input" defaultValue="mysite.com" />
      </div>
    </div>
  </div>
  <div className="ant-form-item">
-    <label className="col-6" for="site3">标签输入框：</label>
+    <label className="col-6" htmlFor="site3">标签输入框：</label>
    <div className="col-16">
      <div className="ant-input-group">
        <span className="ant-input-group-addon" id="basic-addon3">Http://</span>
-        <input type="text" className="ant-input" id="site3" value="mysite" />
+        <input type="text" className="ant-input" id="site3" defaultValue="mysite" />
        <span className="ant-input-group-addon" id="basic-addon4">.com</span>
      </div>
    </div>
  </div>
  <div className="ant-form-item">
-    <label className="col-6" for="site4">select 标签输入框：</label>
+    <label className="col-6" htmlFor="site4">select 标签输入框：</label>
    <div className="col-16">
      <div className="ant-input-group">
        <input type="text" className="ant-input" id="site4" placeholder="www.mysite" />
        <div className="ant-input-group-wrap">
-          <Select value=".com" style={{width:65}}>
+          <Select defaultValue=".com" style={{width:70}}>
            <Option value=".com">.com</Option>
            <Option value=".jp">.jp</Option>
            <Option value=".cn">.cn</Option>
@@ -50,7 +48,7 @@ React.render(
    </div>
  </div>
  <div className="ant-form-item">
-    <label className="col-6">输入身份证：</label>
+    <label className="col-6" htmlFor="certNo1">输入身份证：</label>
    <div className="col-16">
      <div className="ant-input-group">
        <div className="col-6">
@@ -68,12 +66,12 @@ React.render(
      </div>
    </div>
  </div>
-  <div className="ant-form-item has-error">
-    <label className="col-6">电话号码：</label>
+  <div className="ant-form-item">
+    <label className="col-6" htmlFor="tel1">电话号码：</label>
    <div className="col-16">
      <div className="row">
        <div className="col-4">
-          <input className="ant-input" type="text" id="tel1" value="086" />
+          <input className="ant-input" type="text" id="tel1" defaultValue="086" />
        </div>
        <div className="col-2">
          <p className="ant-form-split">--</p>
@@ -92,7 +90,6 @@ React.render(
          </div>
        </div>
      </div>
-      <p className="ant-form-explain">请输入正确的电话号码</p>
    </div>
  </div>
 </form>
--- a/components/form/demo/mix.md
+++ b/components/form/demo/mix.md
@@ -41,7 +41,7 @@ React.render(
  <div className="ant-form-item">
    <label className="col-8" required>InputNumber 数字输入框：</label>
    <div className="col-10">
-      <InputNumber min={1} max={10} defaultValue={3} onChange={onInputNumberChange} style={{width:100}}/>
+      <InputNumber size="large" min={1} max={10} defaultValue={3} onChange={onInputNumberChange} style={{width:100}}/>
      <span className="ant-form-text"> 台机器</span>
    </div>
  </div>
@@ -57,21 +57,21 @@ React.render(
    </div>
  </div>
  <div className="ant-form-item">
-    <label for="" className="col-8" required>Switch 开关：</label>
+    <label htmlFor="" className="col-8" required>Switch 开关：</label>
    <div className="col-10">
      <Switch />
    </div>
  </div>
  <div className="ant-form-item">
-    <label for="" className="col-8" required>Slider 滑动输入条：</label>
+    <label htmlFor="" className="col-8" required>Slider 滑动输入条：</label>
    <div className="col-10">
      <Slider marks={["A","B","C","D","E","F","G"]} />
    </div>
  </div>
  <div className="ant-form-item">
-    <label for="" className="col-8" required>Select 选择器：</label>
+    <label htmlFor="" className="col-8" required>Select 选择器：</label>
    <div className="col-16">
-      <Select value="lucy" style={{width:200}} onChange={handleSelectChange}>
+      <Select size="large" defaultValue="lucy" style={{width:200}} onChange={handleSelectChange}>
        <Option value="jack">jack</Option>
        <Option value="lucy">lucy</Option>
        <Option value="disabled" disabled>disabled</Option>
@@ -80,7 +80,7 @@ React.render(
    </div>
  </div>
  <div className="ant-form-item">
-    <label for="" className="col-8" required>Datepicker 日期选择框：</label>
+    <label htmlFor="" className="col-8" required>Datepicker 日期选择框：</label>
    <div className="col-6">
      <Datepicker />
    </div>
@@ -92,7 +92,7 @@ React.render(
    </div>
  </div>
  <div className="ant-form-item has-error">
-    <label for="" className="col-8" required>Datepicker 校验：</label>
+    <label htmlFor="" className="col-8" required>Datepicker 校验：</label>
    <div className="col-6">
      <Datepicker />
    </div>
--- a/components/form/demo/validate.md
+++ b/components/form/demo/validate.md
@@ -8,7 +8,7 @@

 将以上三种校验状态类添加到这些控件的父级元素即可。

-另外为输入框添加反馈图标，可以更好地反馈当前的校验状态，使用 `.has-feedback` 类包裹 input 输入框即可。
+另外为输入框添加反馈图标，可以更好地反馈当前的校验状态，使用 `.has-feedback` 类包裹 input 输入框即可，在这里校验状态类就要和 `.has-feedback` 类同级。

 **注意**: 反馈图标只能使用在文本输入框 `<input class="ant-input">` 元素上。

@@ -39,41 +39,37 @@
 	<div class="ant-form-item">
  	<label class="col-5" for="validating">校验中：</label>
  	<div class="col-12">
-  		<div class="has-feedback">
+  		<div class="has-feedback is-validating">
    		<input class="ant-input" type="text" id="validating" value="我是被校验的内容"/>
-    		<i class="anticon anticon-loading"></i>
+        <div class="ant-form-explain">信息审核中...</div>
  		</div>
-  		<div class="ant-form-explain">信息审核中...</div>
  	</div>
 	</div>

-	<div class="ant-form-item has-success">
+	<div class="ant-form-item">
  	<label class="col-5" for="input1">成功校验：</label>
  	<div class="col-12">
-  		<div class="has-feedback">
+  		<div class="has-feedback has-success">
    		<input class="ant-input" type="text" id="input1" value="我是正文"/>
-    		<i class="anticon anticon-check-circle"></i>
  		</div>
  	</div>
 	</div>

-	<div class="ant-form-item has-error">
+	<div class="ant-form-item">
  	<label class="col-5" for="input2">失败校验：</label>
  	<div class="col-12">
-  		<div class="has-feedback">
+  		<div class="has-feedback has-error">
    		<input class="ant-input" type="text" id="input2" value="无效选择"/>
-    		<i class="anticon anticon-cross-circle"></i>
+        <div class="ant-form-explain">请输入数字和字母组合</div>
  		</div>
-  		<div class="ant-form-explain">请输入数字和字母组合</div>
  	</div>
 	</div>

-	<div class="ant-form-item has-warning">
+	<div class="ant-form-item">
  	<label class="col-5" for="input3">警告校验：</label>
  	<div class="col-12">
-  		<div class="has-feedback">
+  		<div class="has-feedback has-warning">
    		<input class="ant-input" type="text" id="input3" value="前方高能预警"/>
-    		<i class="anticon anticon-exclamation-circle"></i>
  		</div>
  	</div>
 	</div>
--- a/components/form/index.md
+++ b/components/form/index.md
@@ -1,8 +1,8 @@
 # Form

- category: CSS
+- category: Components
 - chinese: 表单
- order: 3
+- type: 表单

 ---

@@ -16,8 +16,6 @@
 - 水平排列：`.ant-form-horizontal` 类可以实现 `label` 标签和表单控件的水平排列;
 - 行内排列：`.ant-form-inline` 类可使其表现为 inline-block 级别的控件。

-**注**: `.ant-form-inline` 类只适用于**视口宽度大于等于 768px **的情形。
-
 ### 表单域

 表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。
--- a/components/iconfont/index.md
+++ b/components/iconfont/index.md
@@ -1,9 +1,9 @@
 # Iconfont

- category: CSS
+- category: Components
 - chinese: 字体图标
- order: 1
- nodemos: true
+- type: 基本
+- noinstant: true

 ---

@@ -26,7 +26,7 @@
 使用时所有的图标都需要一个基类 `.anticon` 和对应每个图标的类。在这里，我们使用 `<i>` 标签，如下面代码演示使用即可。

 ```html
-<i class="anticon anticon-link"></i>
+<i className="anticon anticon-link"></i>
 ```

 > 点击图标复制代码。
@@ -391,8 +391,8 @@
 		<span class="anticon-class">laptop</span>
 	</li>
 	<li>
-		<i class="anticon anticon-large"></i>
-		<span class="anticon-class">large</span>
+		<i class="anticon anticon-appstore"></i>
+		<span class="anticon-class">appstore</span>
 	</li>
 	<li>
 		<i class="anticon anticon-line-chart"></i>
@@ -520,6 +520,7 @@ ul.anticons-list {
  margin: 20px 0;
  list-style: none;
  width: 120%;
+  overflow: hidden;
 }
 ul.anticons-list li {
  float: left;
@@ -573,7 +574,7 @@ ul.anticons-list li.copied:after {
 }
 </style>

-<script src="/static/ZeroClipboard.js"></script>
+<script src="../../static/ZeroClipboard.js"></script>
 <script>
 $(function() {
  ZeroClipboard.config({
--- a/components/index.html
+++ b/components/index.html
@@ -1 +0,0 @@
-<meta http-equiv="refresh" content="0; url=/components/layout" />
--- a/components/input-number/demo/disabled.md
+++ b/components/input-number/demo/disabled.md
@@ -1,6 +1,6 @@
 # 不可用

- order: 0
+- order: 2

 点击按钮切换可用状态。

--- a/components/input-number/demo/size.md
+++ b/components/input-number/demo/size.md
@@ -0,0 +1,29 @@
+# 三种大小
+
+- order: 1
+
+三种大小的数字输入框，当 size 分别为 `large` 和 `small` 时，输入框高度为 `32px` 和 `22px` ，默认高度为 `28px`
+
+---
+
+````jsx
+var InputNumber = antd.InputNumber;
+
+function onChange(value) {
+  console.log('changed', value);
+}
+
+React.render(
+<div>
+  <InputNumber size="large" min={1} max={100000} defaultValue={3} onChange={onChange} />
+  <InputNumber min={1} max={100000} defaultValue={3} onChange={onChange} />
+  <InputNumber size="small" min={1} max={100000} defaultValue={3} onChange={onChange} />
+</div>
+, document.getElementById('components-input-number-demo-size'));
+````
+
+````css
+.ant-input-number{
+  margin-right: 10px;
+}
+````
--- a/components/input-number/index.jsx
+++ b/components/input-number/index.jsx
@@ -8,6 +8,12 @@ export default React.createClass({
    };
  },
  render() {
-    return <InputNumber style={{width: 90}} {...this.props} />;
+    let sizeClass = '';
+    if (this.props.size === 'large') {
+      sizeClass = 'ant-input-number-lg';
+    } else if (this.props.size === 'small') {
+      sizeClass = 'ant-input-number-sm';
+    }
+    return <InputNumber className={sizeClass} style={{width: 90}} {...this.props} />;
  }
 });
--- a/components/input-number/index.md
+++ b/components/input-number/index.md
@@ -2,7 +2,7 @@

 - category: Components
 - chinese: 数字输入框
- order: 4
+- type: 表单

 ---

@@ -25,3 +25,4 @@
 | defaultValue     | 初始值       | Number      |            |
 | onChange     | 变化回调       | Function      |            |
 | disabled     | 禁用       | Boolean      |      false      |
+| size    | 输入框大小  | String      |      无      |
--- a/components/layout/index.md
+++ b/components/layout/index.md
@@ -1,8 +1,9 @@
 # Layout

- category: CSS
+- category: Components
 - chinese: 布局
- order: 0
+- type: 基本
+- cols: 1

 ---

--- a/components/menu/demo/horizontal.md
+++ b/components/menu/demo/horizontal.md
@@ -0,0 +1,47 @@
+# 顶部导航
+
+- order: 0
+
+水平的顶部导航菜单。
+
+---
+
+````jsx
+var Menu = antd.Menu;
+var SubMenu = Menu.SubMenu;
+
+var App = React.createClass({
+  getInitialState() {
+    return {
+      current: 'mail'
+    }
+  },
+  handleClick(e) {
+    console.log('click ', e);
+    this.setState({
+      current: e.key
+    });
+  },
+  render() {
+    return <Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
+    <Menu.Item key="mail">
+      <i className="anticon anticon-mail"></i>导航一
+    </Menu.Item>
+    <Menu.Item key="app">
+      <i className="anticon anticon-appstore"></i>导航二
+    </Menu.Item>
+    <SubMenu title={<span><i className="anticon anticon-setting"></i>导航 - 子菜单</span>}>
+      <Menu.Item key="setting:1">选项1</Menu.Item>
+      <Menu.Item key="setting:2">选项2</Menu.Item>
+      <Menu.Item key="setting:3">选项3</Menu.Item>
+      <Menu.Item key="setting:4">选项4</Menu.Item>
+    </SubMenu>
+    <Menu.Item key="alipay">
+      <a href="http://www.alipay.com/" target="_blank">导航四 - 链接</a>
+    </Menu.Item>
+  </Menu>
+  }
+});
+
+React.render(<App />, document.getElementById('components-menu-demo-horizontal'));
+````
--- a/components/menu/demo/sider-current.md
+++ b/components/menu/demo/sider-current.md
@@ -0,0 +1,64 @@
+# 只展开当前父级菜单
+
+- order: 2
+
+点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。
+
+---
+
+````jsx
+var Menu = antd.Menu;
+var SubMenu = Menu.SubMenu;
+
+var Sider = React.createClass({
+  getInitialState() {
+    return {
+      current: '1',
+      openKeys: []
+    }
+  },
+  handleClick(e) {
+    console.log('click ', e);
+    this.setState({
+      current: e.key,
+      openKeys: e.keyPath.slice(1)
+    });
+  },
+  onToggle(info){
+    this.setState({
+      openKeys: info.openKeys
+    });
+  },
+  render() {
+    return <Menu onClick={this.handleClick}
+                 style={{width:240}}
+                 openKeys={this.state.openKeys}
+                 onOpen={this.onToggle}
+                 onClose={this.onToggle}
+                 selectedKeys={[this.state.current]}
+                 mode="inline">
+      <SubMenu key="sub1" title={<span><i className="anticon anticon-mail"></i><span>导航一</span></span>}>
+        <Menu.Item key="1">选项1</Menu.Item>
+        <Menu.Item key="2">选项2</Menu.Item>
+        <Menu.Item key="3">选项3</Menu.Item>
+        <Menu.Item key="4">选项4</Menu.Item>
+      </SubMenu>
+      <SubMenu key="sub2" title={<span><i className="anticon anticon-appstore"></i><span>导航二</span></span>}>
+        <Menu.Item key="5">选项5</Menu.Item>
+        <Menu.Item key="6">选项6</Menu.Item>
+        <SubMenu key="sub3" title="三级导航">
+          <Menu.Item key="7">选项7</Menu.Item>
+          <Menu.Item key="8">选项8</Menu.Item>
+        </SubMenu>
+      </SubMenu>
+      <SubMenu key="sub4" title={<span><i className="anticon anticon-setting"></i><span>导航三</span></span>}>
+        <Menu.Item key="9">选项9</Menu.Item>
+        <Menu.Item key="10">选项10</Menu.Item>
+        <Menu.Item key="11">选项11</Menu.Item>
+        <Menu.Item key="12">选项12</Menu.Item>
+      </SubMenu>
+    </Menu>;
+  }
+});
+React.render(<Sider />, document.getElementById('components-menu-demo-sider-current'));
+````
--- a/components/menu/demo/sider.md
+++ b/components/menu/demo/sider.md
@@ -0,0 +1,55 @@
+# 内嵌菜单
+
+- order: 1
+
+垂直菜单，子菜单内嵌在菜单区域。
+
+---
+
+````jsx
+var Menu = antd.Menu;
+var SubMenu = Menu.SubMenu;
+
+var Sider = React.createClass({
+  getInitialState() {
+    return {
+      current: '1'
+    }
+  },
+  handleClick(e) {
+    console.log('click ', e);
+    this.setState({
+      current: e.key
+    });
+  },
+  render() {
+    return <Menu onClick={this.handleClick}
+                 style={{width:240}}
+                 defaultOpenKeys={['sub1']}
+                 selectedKeys={[this.state.current]}
+                 mode="inline">
+      <SubMenu key="sub1" title={<span><i className="anticon anticon-mail"></i><span>导航一</span></span>}>
+        <Menu.Item key="1">选项1</Menu.Item>
+        <Menu.Item key="2">选项2</Menu.Item>
+        <Menu.Item key="3">选项3</Menu.Item>
+        <Menu.Item key="4">选项4</Menu.Item>
+      </SubMenu>
+      <SubMenu key="sub2" title={<span><i className="anticon anticon-appstore"></i><span>导航二</span></span>}>
+        <Menu.Item key="5">选项5</Menu.Item>
+        <Menu.Item key="6">选项6</Menu.Item>
+        <SubMenu key="sub3" title="三级导航">
+          <Menu.Item key="7">选项7</Menu.Item>
+          <Menu.Item key="8">选项8</Menu.Item>
+        </SubMenu>
+      </SubMenu>
+      <SubMenu key="sub4" title={<span><i className="anticon anticon-setting"></i><span>导航三</span></span>}>
+        <Menu.Item key="9">选项9</Menu.Item>
+        <Menu.Item key="10">选项10</Menu.Item>
+        <Menu.Item key="11">选项11</Menu.Item>
+        <Menu.Item key="12">选项12</Menu.Item>
+      </SubMenu>
+    </Menu>;
+  }
+});
+React.render(<Sider />, document.getElementById('components-menu-demo-sider'));
+````
--- a/components/menu/demo/vertical.md
+++ b/components/menu/demo/vertical.md
@@ -0,0 +1,41 @@
+# 垂直菜单
+
+- order: 3
+
+子菜单是弹出的形式。
+
+---
+
+````jsx
+var Menu = antd.Menu;
+var MenuItem = Menu.Item;
+var SubMenu = Menu.SubMenu;
+
+function handleClick(e) {
+  console.log('click', e);
+}
+
+React.render(<Menu onClick={handleClick} style={{width:240}} mode="vertical">
+  <SubMenu key="sub1" title={<span><i className="anticon anticon-mail"></i><span>导航一</span></span>}>
+    <MenuItem key="1">选项1</MenuItem>
+    <MenuItem key="2">选项2</MenuItem>
+    <MenuItem key="3">选项3</MenuItem>
+    <MenuItem key="4">选项4</MenuItem>
+  </SubMenu>
+  <SubMenu key="sub2" title={<span><i className="anticon anticon-appstore"></i><span>导航二</span></span>}>
+    <MenuItem key="5">选项5</MenuItem>
+    <MenuItem key="6">选项6</MenuItem>
+    <SubMenu key="sub3" title="三级导航">
+      <MenuItem key="7">选项7</MenuItem>
+      <MenuItem key="8">选项8</MenuItem>
+    </SubMenu>
+  </SubMenu>
+  <SubMenu key="sub4" title={<span><i className="anticon anticon-setting"></i><span>导航三</span></span>}>
+    <MenuItem key="9">选项9</MenuItem>
+    <MenuItem key="10">选项10</MenuItem>
+    <MenuItem key="11">选项11</MenuItem>
+    <MenuItem key="12">选项12</MenuItem>
+  </SubMenu>
+</Menu>
+, document.getElementById('components-menu-demo-vertical'));
+````
--- a/components/menu/index.jsx
+++ b/components/menu/index.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import Menu from 'rc-menu';
+import animation from '../common/openAnimation';
+
+const AntMenu = React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'ant-menu'
+    };
+  },
+  render() {
+    let openAnimation = '';
+    switch (this.props.mode) {
+    case 'horizontal':
+      openAnimation = 'slide-up';
+      break;
+    case 'vertical':
+      openAnimation = 'zoom-big';
+      break;
+    case 'inline':
+      openAnimation = animation;
+      break;
+    default:
+    }
+    if (this.props.mode === 'inline') {
+      return <Menu {...this.props} openAnimation={openAnimation} />;
+    } else {
+      return <Menu {...this.props} openTransitionName={openAnimation} />;
+    }
+  }
+});
+
+AntMenu.Divider = Menu.Divider;
+AntMenu.Item = Menu.Item;
+AntMenu.SubMenu = Menu.SubMenu;
+
+export default AntMenu;
--- a/components/menu/index.md
+++ b/components/menu/index.md
@@ -2,5 +2,52 @@

 - category: Components
 - chinese: 导航菜单
+- cols: 1
+- type: 导航

 ---
+
+为页面和功能提供导航的菜单列表。
+
+## 何时使用
+
+导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。
+
+```html
+<Menu>
+  <MenuItem>菜单项</MenuItem>
+  <SubMenu title="子菜单">
+    <MenuItem>子菜单项</MenuItem>
+  </SubMenu>
+</Menu>
+```
+
+## API
+
+### Menu props
+
+| 参数     | 说明           | 类型     | 默认值       |
+|----------|----------------|----------|--------------|
+| mode    | 菜单类型 | enum: 'vertical', 'horizontal', 'inline' | vertical |
+| selectedKeys | 当前选中的菜单项 key 数组 |  |      |
+| defaultSelectedKeys | 初始选中的菜单项 key 数组 |  |      |
+| openKeys | 当前展开的菜单项 key 数组 |  |      |
+| defaultOpenKeys | 初始展开的菜单项 key 数组 |  |      |
+| onSelect | 被选中时调用，参数 {item, key, selectedKeys} 对象 | function | 无   |
+| onDeselect | 取消选中时调用，参数 {item, key, selectedKeys} 对象，仅在 multiple 生效 | function | 无   |
+| onClick | 点击 menuitem 调用此函数，参数为 {item, key} | function | 无 |
+| style | 根节点样式 | object | | |
+
+### Menu.Item props
+
+| 参数     | 说明           | 类型     | 默认值       |
+|----------|----------------|----------|--------------|
+| disabled    | 是否禁用 | Boolean   |  false  |
+| key   | item 的唯一标志 |  String |  | |
+
+### Menu.SubMenu props
+
+| 参数     | 说明           | 类型     | 默认值       |
+|----------|----------------|----------|--------------|
+| title    | 子菜单项值 | String or React.Element   |    |
+| children   | (MenuItem or SubMenu)[] |  子菜单的菜单项 | | |
--- a/components/message/demo/duration.md
+++ b/components/message/demo/duration.md
@@ -1,8 +1,8 @@
-# 基本
+# 修改延时

 - order: 4

-全局提示 - 操作成功提示,并自定义时长`10s`，默认时长`1.5s`。
+自定义时长 `10s`，默认时长为 `1.5s`。

 ---

--- a/components/message/demo/error.md
+++ b/components/message/demo/error.md
@@ -1,8 +1,8 @@
-# 基本
+# 错误或失败

 - order: 1

-全局提示 - 操作失败反馈。
+操作失败反馈。

 ---

--- a/components/message/demo/info.md
+++ b/components/message/demo/info.md
@@ -1,8 +1,8 @@
-# 基本
+# 普通提示

 - order: 2

-全局提示 - 提醒反馈。
+信息提醒反馈。

 ---

--- a/components/message/demo/loading.md
+++ b/components/message/demo/loading.md
@@ -0,0 +1,20 @@
+# 加载中
+
+- order: 5
+
+进行全局 loading，异步自行移除。
+
+---
+
+````jsx
+var message = antd.message;
+
+var success = function() {
+  var hide = message.loading('正在执行中...', 0);
+  // 异步手动移除
+  setTimeout(hide, 2500);
+};
+
+React.render(<button className="ant-btn" onClick={success}>显示加载中...</button>
+, document.getElementById('components-message-demo-loading'));
+````
--- a/components/message/demo/success.md
+++ b/components/message/demo/success.md
@@ -1,13 +1,14 @@
-# 基本
+# 成功

 - order: 0

-全局提示 - 操作成功提示。
+操作成功反馈。

 ---

 ````jsx
 var message = antd.message;
+
 var success = function() {
  message.success('这是一条成功的提示');
 };
--- a/components/message/index.jsx
+++ b/components/message/index.jsx
@@ -2,40 +2,63 @@ import React from 'react';
 import Notification from 'rc-notification';

 let defaultDuration = 1.5;
+let top;
+let messageInstance;
+let key = 1;

 function getMessageInstance() {
-  return Notification.newInstance({
+  messageInstance = messageInstance || Notification.newInstance({
    prefixCls: 'ant-message',
    transitionName: 'move-up',
-    style: {}  // 覆盖原来的样式
+    style: {
+      top: top
+    }  // 覆盖原来的样式
  });
+  return messageInstance;
 }

-function notice(content, duration = defaultDuration, type) {
+function notice(content, duration = defaultDuration, type, onClose) {
  let iconClass = ({
    'info': 'anticon-info-circle ant-message-info',
    'success': 'anticon-check-circle ant-message-success',
-    'error': 'anticon-exclamation-circle ant-message-error'
+    'error': 'anticon-exclamation-circle ant-message-error',
+    'loading': 'anticon-loading ant-message-loading'
  })[type];
-  getMessageInstance().notice({
-    key: 'simpleMessage',
+  let instance = getMessageInstance();
+  instance.notice({
+    key: key,
    duration: duration,
    style: {},
    content: <div className="ant-message-custom-content">
      <i className={'anticon ' + iconClass}></i>
      <span>{content}</span>
-    </div>
+    </div>,
+    onClose: onClose
  });
+  return (function() {
+    let target = key++;
+    return function() {
+      instance.removeNotice(target);
+    };
+  })();
 }

 export default {
-  info(content, duration) {
-    notice(content, duration, 'info');
+  info(content, duration, onClose) {
+    return notice(content, duration, 'info', onClose);
  },
-  success(content, duration) {
-    notice(content, duration, 'success');
+  success(content, duration, onClose) {
+    return notice(content, duration, 'success', onClose);
  },
-  error(content, duration) {
-    notice(content, duration, 'error');
+  error(content, duration, onClose) {
+    return notice(content, duration, 'error', onClose);
+  },
+  loading(content, duration, onClose) {
+    return notice(content, duration, 'loading', onClose);
+  },
+  config(options) {
+    if (options.top) {
+      top = options.top;
+    }
  }
 };
--- a/components/message/index.md
+++ b/components/message/index.md
@@ -2,7 +2,7 @@

 - category: Components
 - chinese: 全局提示
- order: 12
+- type: 展示

 ---

@@ -18,6 +18,7 @@
 - `message.success(content, duration)`
 - `message.error(content, duration)`
 - `message.info(content, duration)`
+- `message.loading(content, duration)`

 组件提供了三个静态方法，参数如下：

@@ -25,3 +26,18 @@
 |------------|----------------|----------------------------|--------------|
 | content    | 提示内容       | React.Element or String    | 无           |
 | duration   | 自动关闭的延时 | number                     | 1.5          |
+
+
+还提供了一个全局配置方法：
+
+- `message.config(options)`
+
+```js
+message.config({
+  top: 100
+});
+```
+
+| 参数       | 说明               | 类型                       | 默认值       |
+|------------|--------------------|----------------------------|--------------|
+| top        | 消息距离顶部的位置 | Number                     | 24px         |
--- a/components/modal/confirm.jsx
+++ b/components/modal/confirm.jsx
@@ -1,23 +1,31 @@
 import React from 'react';
-import Dialog from 'rc-dialog';
-var div;
+import Dialog from './index';

 export default function (props) {
-  var d;
+  let div = document.createElement('div');
+  document.body.appendChild(div);
+
+  let d;
  props = props || {};
-  props.iconClassName = props.iconClassName || 'anticon-exclamation-circle';
-  var width = props.width || 375;
+  props.iconClassName = props.iconClassName || 'anticon-question-circle';
+  let width = props.width || 416;
+
+  // 默认为 true，保持向下兼容
+  if (!('okCancel' in props)) {
+    props.okCancel = true;
+  }

  function close() {
    d.setState({
      visible: false
    });
+    React.unmountComponentAtNode(div);
  }

  function onCancel() {
-    var cancelFn = props.onCancel;
+    let cancelFn = props.onCancel;
    if (cancelFn) {
-      var ret;
+      let ret;
      if (cancelFn.length) {
        ret = cancelFn(close);
      } else {
@@ -35,9 +43,9 @@ export default function (props) {
  }

  function onOk() {
-    var okFn = props.onOk;
+    let okFn = props.onOk;
    if (okFn) {
-      var ret;
+      let ret;
      if (okFn.length) {
        ret = okFn(close);
      } else {
@@ -54,29 +62,35 @@ export default function (props) {
    }
  }

-  var body = <div className="ant-confirm-body">
+  let body = <div className="ant-confirm-body">
    <i className={'anticon ' + props.iconClassName}></i>
    <span className="ant-confirm-title">{props.title}</span>
    <div className="ant-confirm-content">{props.content}</div>
  </div>;
-  var footer = <div className="ant-confirm-btns">
+  let footer = <div className="ant-confirm-btns">
    <button type="button" className="ant-btn-default ant-btn ant-btn-lg" onClick={onCancel}>取 消</button>
    <button type="button" className="ant-btn-primary ant-btn ant-btn-lg" onClick={onOk}>确 定</button>
  </div>;

-  if (!div) {
-    div = document.createElement('div');
-    document.body.appendChild(div);
+  if (props.okCancel) {
+    footer = <div className="ant-confirm-btns">
+      <button type="button" className="ant-btn-default ant-btn ant-btn-lg" onClick={onCancel}>取 消</button>
+      <button type="button" className="ant-btn-primary ant-btn ant-btn-lg" onClick={onOk}>确 定</button>
+    </div>;
+  } else {
+    footer = <div className="ant-confirm-btns">
+      <button type="button" className="ant-btn-primary ant-btn ant-btn-lg" onClick={onOk}>知道了</button>
+    </div>;
  }

  React.render(<Dialog
    prefixCls="ant-modal"
    className="ant-confirm"
-    renderToBody={false}
    visible={true}
    closable={false}
    title=""
    transitionName="zoom"
+    footer=""
    maskTransitionName="fade" width={width}>
    <div style={{zoom: 1, overflow: 'hidden'}}>{body} {footer}</div>
  </Dialog>, div, function () {
--- a/components/modal/demo/basic.md
+++ b/components/modal/demo/basic.md
@@ -9,11 +9,9 @@
 ````jsx
 var Modal = antd.Modal;

-var Test = React.createClass({
-  getInitialState(){
-    return{
-      visible: false
-    }
+var App = React.createClass({
+  getInitialState() {
+    return { visible: false };
  },
  showModal() {
    this.setState({
@@ -23,11 +21,11 @@ var Test = React.createClass({
  handleOk() {
    console.log('点击了确定');
    this.setState({
+      confirmLoading: false,
      visible: false
    });
  },
  handleCancel() {
-    console.log('点击了取消');
    this.setState({
      visible: false
    });
@@ -35,10 +33,8 @@ var Test = React.createClass({
  render() {
    return <div>
      <button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
-      <Modal title="第一个 Modal"
-        visible={this.state.visible}
-        onOk={this.handleOk}
-        onCancel={this.handleCancel}>
+      <Modal title="第一个 Modal" visible={this.state.visible}
+        confirmLoading={this.state.confirmLoading} onOk={this.handleOk} onCancel={this.handleCancel}>
        <p>对话框的内容</p>
        <p>对话框的内容</p>
        <p>对话框的内容</p>
@@ -47,6 +43,5 @@ var Test = React.createClass({
  }
 });

-React.render(<Test/> , document.getElementById('components-modal-demo-basic'));
+React.render(<App /> , document.getElementById('components-modal-demo-basic'));
 ````
-
--- a/components/modal/demo/confirm-promise.md
+++ b/components/modal/demo/confirm-promise.md
@@ -7,7 +7,7 @@
 ---

 ````jsx
-var confirm = antd.confirm;
+var confirm = antd.Modal.confirm;

 function showConfirm(){
  confirm({
@@ -15,8 +15,8 @@ function showConfirm(){
    content: '一些解释',
    onOk: function() {
      alert('1 秒后关闭');
-      return new Promise(function(resolve){
-        setTimeout(resolve,1000);
+      return new Promise(function(resolve) {
+        setTimeout(resolve, 1000);
      });
    },
    onCancel: function() {}
--- a/components/modal/demo/confirm.md
+++ b/components/modal/demo/confirm.md
@@ -7,7 +7,7 @@
 ---

 ````jsx
-var confirm = antd.confirm;
+var confirm = antd.Modal.confirm;

 function showConfirm(){
  confirm({
--- a/components/modal/demo/custom.md
+++ b/components/modal/demo/custom.md
@@ -26,11 +26,11 @@ var Test = React.createClass({
    this.setState({
      ModalText: '对话框将在两秒后关闭'
    });
-    setTimeout((function() {
+    setTimeout(() => {
      this.setState({
        visible: false
      });
-    }).bind(this), 2000);
+    }, 2000);
  },
  handleCancel() {
    console.log('点击了取消');
--- a/components/modal/demo/footer.md
+++ b/components/modal/demo/footer.md
@@ -17,11 +17,13 @@ var Test = React.createClass({
    };
  },
  showModal() {
-    this.setState({ visible: true });
+    this.setState({
+      visible: true
+    });
  },
  handleOk() {
    this.setState({ loading: true });
-    setTimeout(()=> {
+    setTimeout(() => {
      this.setState({ loading: false, visible: false });
    }, 3000);
  },
@@ -37,10 +39,9 @@ var Test = React.createClass({
       visible={this.state.visible}
       title="对话框标题" onOk={this.handleOk} onCancel={this.handleCancel}
        footer={[
-          <button key="back" className="ant-btn" onClick={this.handleCancel}>返 回</button>,
-          <button key="submit" className="ant-btn ant-btn-primary" onClick={this.handleOk}>
+          <button key="back" className="ant-btn ant-btn-lg" onClick={this.handleCancel}>返 回</button>,
+          <button key="submit" className={'ant-btn ant-btn-primary ant-btn-lg ' + (this.state.loading?'ant-btn-loading':'')} onClick={this.handleOk}>
            提 交
-            <i className={'anticon anticon-loading'+(this.state.loading?'':'hide')}></i>
          </button>
        ]}>
        <p>对话框的内容</p>
--- a/components/modal/demo/info.md
+++ b/components/modal/demo/info.md
@@ -0,0 +1,40 @@
+# 信息提示
+
+- order: 5
+
+各种类型的信息提示，只提供一个按钮用于关闭。
+
+---
+
+````jsx
+var Modal = antd.Modal;
+
+function info() {
+  Modal.info({
+    title: '这是一条通知信息',
+    content: '一些附加信息一些附加信息一些附加信息',
+    onOk: function() {}
+  });
+}
+
+function success() {
+  Modal.success({
+    title: '这是一条通知信息',
+    content: '一些附加信息一些附加信息一些附加信息'
+  });
+}
+
+function error() {
+  Modal.error({
+    title: '这是一条通知信息',
+    content: '一些附加信息一些附加信息一些附加信息'
+  });
+}
+
+React.render(<div>
+  <button className="ant-btn" onClick={info}>信息提示</button>
+  <button className="ant-btn" onClick={success}>成功提示</button>
+  <button className="ant-btn" onClick={error}>失败提示</button>
+</div>, document.getElementById('components-modal-demo-info'));
+````
+
--- a/components/modal/index.jsx
+++ b/components/modal/index.jsx
@@ -1,59 +1,117 @@
 import React from 'react';
 import Dialog from 'rc-dialog';
+import { Dom } from 'rc-util';
+import confirm from './confirm';
+
 function noop() {
 }

-export default React.createClass({
-  getInitialState() {
-    return {
-      visible: false,
-      confirmLoading: false
-    };
-  },
-
-  handleCancel() {
-    var d = this.refs.d;
-    d.requestClose();
-  },
+let mousePosition;
+let mousePositionEventBinded;

+let AntModal = React.createClass({
  getDefaultProps() {
    return {
      prefixCls: 'ant-modal',
      onOk: noop,
-      onCancel: noop
+      onCancel: noop,
+      width: 520,
+      transitionName: 'zoom',
+      maskAnimation: 'fade'
    };
  },

+  getInitialState() {
+    return {
+      confirmLoading: false,
+      visible: this.props.visible
+    };
+  },
+
+  handleCancel() {
+    this.props.onCancel();
+  },
+
  handleOk() {
    this.setState({
      confirmLoading: true
    });
-    if (typeof this.props.onOk) {
-      this.props.onOk();
-    }
+    this.props.onOk();
  },

  componentWillReceiveProps(nextProps) {
+    let newState = {};
    if ('visible' in nextProps) {
-      // 隐藏后去除按钮 loading 效果
+      newState.visible = nextProps.visible;
+      // 隐藏后默认去除按钮 loading 效果
      if (!nextProps.visible) {
-        this.setState({
-          confirmLoading: false
-        });
+        newState.confirmLoading = false;
      }
    }
+    if ('confirmLoading' in nextProps) {
+      newState.confirmLoading = nextProps.confirmLoading;
+    }
+    this.setState(newState);
+  },
+
+  componentDidMount() {
+    if (mousePositionEventBinded) {
+      return;
+    }
+    // 只有点击事件支持从鼠标位置动画展开
+    Dom.addEventListener(document.body, 'click', function onDocumentMousemove(e) {
+      mousePosition = {
+        x: e.pageX,
+        y: e.pageY
+      };
+      // 20ms 内发生过点击事件，则从点击位置动画展示
+      // 否则直接 zoom 展示
+      // 这样可以兼容非点击方式展开
+      setTimeout(() => mousePosition = null, 20);
+    });
+    mousePositionEventBinded = true;
  },

  render() {
-    var loadingIcon = this.state.confirmLoading ?
-      <i className="anticon anticon-loading"></i> : '';
-    var props = this.props;
-    var footer = props.footer || [
+    let loadingClass = this.state.confirmLoading ? ' ant-btn-loading' : '';
+    let props = this.props;
+    let defaultFooter = [
      <button key="cancel" type="button" className="ant-btn ant-btn-lg" onClick={this.handleCancel}>取 消</button>,
-      <button key="confirm" type="button" className="ant-btn ant-btn-primary ant-btn-lg" onClick={this.handleOk}>
-        确 定 {loadingIcon}
+      <button key="confirm"
+        type="button"
+        className={'ant-btn ant-btn-primary ant-btn-lg' + loadingClass}
+        onClick={this.handleOk}>
+        确 定
      </button>
    ];
-    return <Dialog transitionName="zoom" onBeforeClose={props.onCancel} visible={this.state.visible} maskAnimation="fade" width="500" footer={footer} {...props} ref="d" />;
+    let footer = props.footer || defaultFooter;
+    let visible = this.state.visible;
+    return <Dialog onClose={this.handleCancel} footer={footer} {...props}
+      visible={visible} mousePosition={mousePosition} />;
  }
 });
+
+AntModal.info = function (props) {
+  props.iconClassName = 'anticon-info-circle';
+  props.okCancel = false;
+  return confirm(props);
+};
+
+AntModal.success = function (props) {
+  props.iconClassName = 'anticon-check-circle';
+  props.okCancel = false;
+  return confirm(props);
+};
+
+AntModal.error = function (props) {
+  props.iconClassName = 'anticon-exclamation-circle';
+  props.okCancel = false;
+  return confirm(props);
+};
+
+AntModal.confirm = function (props) {
+  props.okCancel = true;
+  return confirm(props);
+};
+
+export default AntModal;
--- a/components/modal/index.md
+++ b/components/modal/index.md
@@ -1,6 +1,6 @@
 # Modal

- order: 11
+- type: 展示
 - category: Components
 - chinese: 对话框

@@ -12,7 +12,7 @@

 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `Modal` 在当前页面正中打开一个浮层，承载相应的操作。

-另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 `ant.confirm()` 。
+另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 `ant.Modal.confirm()` 等方法。


 ## API
@@ -20,21 +20,36 @@

 | 参数       | 说明           | 类型             | 默认值       |
 |------------|----------------|------------------|--------------|
+| visible    | 对话框是否可见 | Boolean          | 无           |
+| confirmLoading | 确定按钮 loading | Boolean    | 无           |
 | title      | 标题           | React.Element    | 无           |
-| onOk       | 点击确定回调       | function         | 无           |
+| onOk       | 点击确定回调       | function     | 无           |
 | onCancel   | 点击遮罩层或右上角叉或取消按钮的回调  | function  | 无           |
-| width      | 宽度           | String or Number | 500           |
+| width      | 宽度           | String or Number | 520           |
 | footer     | 底部内容       | React.Element    | 确定取消按钮 |


-### confirm()
+### Modal.xxx()

-`confirm` 为一个方法，参数为 object，具体属性如下：
+包括：
+
+- `Modal.info`
+- `Modal.success`
+- `Modal.error`
+- `Modal.confirm`
+
+以上均为一个函数，参数为 object，具体属性如下：

 | 参数       | 说明           | 类型             | 默认值       |
 |------------|----------------|------------------|--------------|
 | title      | 标题           | React.Element or String    | 无           |
 | onOk       | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭      | function         | 无           |
 | onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭       | function         | 无           |
-| width      | 宽度           | String or Number | 375           |
-| iconClassName | 图标样式名 | String | anticon-exclamation-circle |
+| width      | 宽度           | String or Number | 416           |
+| iconClassName | 图标样式名 | String | anticon-question-circle |
+
+<style>
+.code-box-demo .ant-btn {
+  margin-right: 8px;
+}
+</style>
--- a/components/motion/index.md
+++ b/components/motion/index.md
@@ -1,39 +0,0 @@
-# Motion
-
- category: CSS
- chinese: 组件动画
- order: 4
- cols: 1
-
---
-
-## 组件的动画
-
-通过设置组件的 `transitionName` 指定组件动画。
-
-| 组件         | 中文名              | 采用动画                                        |
-|--------------|---------------------|-------------------------------------------------|
-| popover      | 气泡浮出层          | `zoom-up` `zoom-down` `zoom-left` `zoom-right`  |
-| popconfirm   | 气泡确认框          | `zoom-up` `zoom-down` `zoom-left` `zoom-right`  |
-| tooltip      | 文字提示框          | `zoom-up` `zoom-down` `zoom-left` `zoom-right`  |
-| modal        | 弹出框              | `zoom`                                          |
-| confirm      | 弹出确认框          | `zoom`                                          |
-| message      | 信息提示条          | `move-up`                                       |
-| dropdown     | 下拉菜单            | `slide-up`                                      |
-| select       | 选择框              | `slide-up`                                      |
-| datepicker   | 日期选择框          | `slide-up`                                      |
-
-## 缓动函数
-在以上组件的动画不适合时，请用以下缓动。
-
-|名称               |参数                                      |说明与适用                  |
-|-------------------|------------------------------------------|---------------------------|
-|@ease-out          | `cubic-bezier(0.215, 0.61, 0.355, 1);`   |默认后缓动；适合元素展开时；    |
-|@ease-in           | `cubic-bezier(0.55, 0.055, 0.675, 0.19);`|默认前缓动；适合元素关闭时；    |
-|@ease-in-out       | `cubic-bezier(0.645, 0.045, 0.355, 1);`  |默认前后缓动；适合元素移动；    |
-|@ease-out-back     | `cubic-bezier(0.18, 0.89, 0.32, 1.28);`  |结束回动；适合弹出框出现时；    |
-|@ease-in-back      | `cubic-bezier(0.6, -0.3, 0.74, 0.05);`   |开始回动；适合弹出框关闭；     |
-|@ease-in-out-back  | `cubic-bezier(0.68, -0.55, 0.27, 1.55);` |前后回动；                   |
-|@ease-out-circ     | `cubic-bezier(0.08, 0.82, 0.17, 1);`     |圆形后缓动；适合元素展开时；    |
-|@ease-in-circ      | `cubic-bezier(0.6, 0.04, 0.98, 0.34);`   |圆形前缓动；适合元素关闭时；    |
-|@ease-in-out-circ  | `cubic-bezier(0.78, 0.14, 0.15, 0.86);`  |圆形缓动；适合元素移动；       |
--- a/components/notification/demo/basic.md
+++ b/components/notification/demo/basic.md
@@ -0,0 +1,24 @@
+# 基本
+
+- order: 0
+
+最简单的用法，五秒后自动关闭。
+
+---
+
+````jsx
+var notification = antd.Notification;
+
+var openNotification = function() {
+  notification.open({
+    message: "这是标题",
+    description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案"
+  });
+};
+
+React.render(
+  <div>
+    <button className='ant-btn ant-btn-primary' onClick={openNotification}>打开通知提醒框</button>
+  </div>,
+document.getElementById('components-notification-demo-basic'));
+````
--- a/components/notification/demo/duration.md
+++ b/components/notification/demo/duration.md
@@ -0,0 +1,24 @@
+# 自动关闭的延时
+
+- order: 1
+
+自定义通知框自动关闭的延时，默认`4.5s`，取消自动关闭只要将该值设为 `0` 即可。
+
+---
+
+````jsx
+var notification = antd.Notification;
+
+var openNotification = function() {
+  var args = {
+    message: "这是标题",
+    description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案",
+    duration: 10
+  };
+  notification.open(args);
+};
+
+React.render(
+  <button className='ant-btn ant-btn-primary' onClick={openNotification}>打开通知提醒框</button>
+, document.getElementById('components-notification-demo-duration'));
+````
--- a/components/notification/demo/onclose.md
+++ b/components/notification/demo/onclose.md
@@ -0,0 +1,30 @@
+# 回调函数
+
+- order: 3
+
+点击关闭按钮时触发回调函数。
+
+---
+
+````jsx
+var notification = antd.Notification;
+
+var close = function() {
+  console.log("我被默认的关闭按钮关闭了！");
+};
+
+var openNotification = function() {
+  var args = {
+    message: "这是标题",
+    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
+    onClose: close
+  };
+  notification.open(args);
+};
+
+React.render(
+  <div>
+    <button className='ant-btn ant-btn-primary' onClick={openNotification}>打开通知提醒框</button>
+  </div>,
+document.getElementById('components-notification-demo-onclose'));
+````
--- a/components/notification/demo/with-btn.md
+++ b/components/notification/demo/with-btn.md
@@ -0,0 +1,39 @@
+# 自定义
+
+- order: 4
+
+自定义关闭按钮的样式和文字。
+
+---
+
+````jsx
+var notification = antd.Notification;
+
+var close = function(){
+  console.log('我被默认的关闭按钮关闭了！');
+}
+
+var openNotification = function() {
+  var key='open'+Date.now();
+  var btnClick = function() {
+    // 隐藏提醒框
+    notification.close(key);
+  };
+  var btn = <button className="ant-btn ant-btn-primary ant-btn-sm" onClick={btnClick}>
+    自定义关闭按钮并触发回调函数
+  </button>;
+  notification.open({
+    message: "这是标题",
+    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
+    btn: btn,
+    key: key,
+    onClose: close
+  });
+};
+
+React.render(
+  <div>
+    <button className="ant-btn ant-btn-primary" onClick={openNotification}>打开通知提醒框</button>
+  </div>,
+document.getElementById('components-notification-demo-with-btn'));
+````
--- a/components/notification/demo/with-icon.md
+++ b/components/notification/demo/with-icon.md
@@ -0,0 +1,34 @@
+# 带有Icon的通知提醒框
+
+- order: 2
+
+通知提醒框左侧有图标。
+
+---
+
+````jsx
+var notification = antd.Notification;
+
+var openNotificationWithIcon = function(type) {
+  return function(){
+    notification[type]({
+      message: "这是标题",
+      description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案"
+    });
+  };
+};
+
+React.render(<div>
+  <button className="ant-btn" onClick={openNotificationWithIcon('success')}>成功</button>
+  <button className="ant-btn" onClick={openNotificationWithIcon('info')}>消息</button>
+  <button className="ant-btn" onClick={openNotificationWithIcon('warn')}>警告</button>
+  <button className="ant-btn" onClick={openNotificationWithIcon('error')}>错误</button>
+  </div>
+, document.getElementById('components-notification-demo-with-icon'));
+````
+
+<style>
+.code-box-demo .ant-btn {
+  margin-right: 1em;
+}
+</style>
--- a/components/notification/index.jsx
+++ b/components/notification/index.jsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import Notification from 'rc-notification';
+import assign from 'object-assign';
+
+let top = 24;
+let notificationInstance;
+
+function getNotificationInstance() {
+  if (notificationInstance) {
+    return notificationInstance;
+  }
+  notificationInstance = Notification.newInstance({
+    prefixCls: 'ant-notification',
+    style: {
+      top: top,
+      right: 0
+    }
+  });
+  return notificationInstance;
+}
+
+function notice(args) {
+  let duration;
+  if (args.duration === undefined) {
+    duration = 4.5;
+  } else {
+    duration = args.duration;
+  }
+
+  if (args.icon) {
+    let prefixCls = ' ant-notification-notice-content-icon-';
+    let iconClass = 'anticon anticon-';
+    switch (args.icon) {
+    case 'success':
+      iconClass += 'check-circle-o';
+      break;
+    case 'info':
+      iconClass += 'info-circle-o';
+      break;
+    case 'error':
+      iconClass += 'exclamation-circle-o';
+      break;
+    case 'warn':
+      iconClass += 'question-circle-o';
+      break;
+    default:
+      iconClass += 'info-circle';
+    }
+
+    getNotificationInstance().notice({
+      content: <div>
+        <i className={iconClass + prefixCls + 'icon-' + args.icon + prefixCls + 'icon'}></i>
+
+        <p className={prefixCls + 'message'}>{args.message}</p>
+
+        <p className={prefixCls + 'description'}>{args.description}</p>
+      </div>,
+      duration: duration,
+      closable: true,
+      onClose: args.onClose,
+      style: {}
+    });
+  } else {
+    let prefixCls = 'ant-notification-notice-content-';
+    if (!args.btn) {
+      getNotificationInstance().notice({
+        content: <div>
+          <p className={prefixCls + 'message'}>{args.message}</p>
+
+          <p className={prefixCls + 'description'}>{args.description}</p>
+        </div>,
+        duration: duration,
+        closable: true,
+        onClose: args.onClose,
+        style: {}
+      });
+    } else {
+      getNotificationInstance().notice({
+        content: <div>
+          <p className={prefixCls + 'message'}>{args.message}</p>
+
+          <p className={prefixCls + 'description'}>{args.description}</p>
+          <span className={prefixCls + 'btn'}>
+            {args.btn}
+          </span>
+        </div>,
+        duration: duration,
+        closable: true,
+        onClose: args.onClose,
+        key: args.key,
+        style: {}
+      });
+    }
+  }
+}
+
+let api = {
+  open(args){
+    notice(args);
+  },
+  close(key){
+    if (notificationInstance) {
+      notificationInstance.removeNotice(key);
+    }
+  },
+  config(options) {
+    top = isNaN(options.top) ? 24 : options.top;
+  }
+};
+
+['success', 'info', 'warn', 'error'].forEach((type) => {
+  api[type] = (args) => {
+    let newArgs = assign({}, args, {
+      icon: type
+    });
+    return api.open(newArgs);
+  };
+});
+
+export default api;
--- a/components/notification/index.md
+++ b/components/notification/index.md
@@ -1,6 +1,51 @@
 # Notification

 - category: Components
- chinese: 系统通知框
+- chinese: 通知提醒框
+- type: 展示

 ---
+
+全局展示通知提醒信息。
+
+## 何时使用
+
+在系统右上角显示通知提醒信息。经常用于以下情况：
+
+- 较为复杂的通知内容。
+- 带有交互的通知，给出用户下一步的行动点。
+- 系统主动推送。
+
+## API
+
+- `notification.success(config)`
+- `notification.error(config)`
+- `notification.info(config)`
+- `notification.warn(config)`
+- `notification.open(config)`
+- `notification.close(key: String)`
+
+config 参数如下：
+
+| 参数        | 说明                                            | 类型         | 默认值 |
+|----------- |---------------------------------------------    | ----------- |--------|
+| message    | 通知提醒标题，必选                                 | React.Element or String      | 无     |
+| description | 通知提醒内容，必选                                | React.Element or String      | 无     |
+| btn        | 自定义关闭按钮                                    | React.Element      | 无     |
+| key        | 当前通知唯一标志                                   | String      | 无     |
+| onClose    | 点击默认关闭按钮时触发的回调函数                     | Function    | 无     |
+| duration   | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭         | Number    | 4.5     |
+
+还提供了一个全局配置方法，需要在调用前提前配置，一次有效。
+
+- `notification.config(options)`
+
+```js
+message.config({
+  top: 100
+});
+```
+
+| 参数       | 说明               | 类型                       | 默认值       |
+|------------|--------------------|----------------------------|--------------|
+| top        | 消息距离顶部的位置 | Number                     | 24px         |
--- a/components/pagination/demo/changer.md
+++ b/components/pagination/demo/changer.md
@@ -13,7 +13,11 @@ function onChange(page) {
  console.log(page);
 }

+function onShowSizeChange(current, pageSize) {
+  console.log(current, pageSize);
+}
+
 React.render(
-  <Pagination showSizeChanger={true} onChange={onChange} total={500} />,
+  <Pagination showSizeChanger={true} onShowSizeChange={onShowSizeChange} onChange={onChange} total={500} />,
 document.getElementById('components-pagination-demo-changer'));
 ````
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				`<meta http-equiv="refresh" content="0; url=/components/layout" />`