modify text and style

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'));
+````

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'));
+````

components/affix/index.jsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import joinClasses from 'react/lib/joinClasses';
+import rcUtil from 'rc-util';
+
+function getScroll(w, top) {
+  var ret = w['page' + (top ? 'Y' : 'X') + 'Offset'];
+  var method = 'scroll' + (top ? 'Top' : 'Left');
+  if (typeof ret !== 'number') {
+    var 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) {
+  var rect = element.getBoundingClientRect();
+  var body = document.body;
+  var clientTop = element.clientTop || body.clientTop || 0;
+  var clientLeft = element.clientLeft || body.clientLeft || 0;
+  var scrollTop = getScroll(window, true);
+  var scrollLeft = getScroll(window);
+
+  return {
+    top: rect.top + scrollTop - clientTop,
+    left: rect.left + scrollLeft - clientLeft
+  };
+}
+
+var Affix = React.createClass({
+
+  getDefaultProps() {
+    return {
+      offset: 0
+    };
+  },
+
+  getInitialState() {
+    return {
+      affix: false,
+      affixStyle: null
+    };
+  },
+
+  handleScroll() {
+    var affix = this.state.affix;
+    var scrollTop = getScroll(window, true);
+    var 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() {
+    var affix = this.state.affix ? 'affix' : '';
+    var className = this.props.className;
+
+    return (
+      <div {...this.props}>
+        <div className={joinClasses(className, affix)} style={this.state.affixStyle}>
+          {this.props.children}
+        </div>
+      </div>
+    );
+  }
+
+});
+
+module.exports = Affix;

components/affix/index.md

@@ -5,3 +5,10 @@
 
 ---
 
+## API
+
+属性如下
+
+| 成员        | 说明           | 类型               | 默认值       |
+|-------------|----------------|--------------------|--------------|
+| offset     | 达到指定偏移量后触发   | Number | 0        |

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'));
+````
+

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'));
+````

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'));
+````
+

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'));
+````

components/carousel/index.jsx

@@ -0,0 +1,34 @@
+import Carousel from 'react-slick';
+import React from 'react';
+import assign from 'object-assign';
+
+var AntCarousel = React.createClass({
+
+  getDefaultProps() {
+    return {
+      dots: true,
+      arrows: false
+    };
+  },
+
+  render() {
+    var props = assign({}, this.props);
+
+    if (props.effect === 'fade') {
+      props.fade = true;
+    }
+
+    var className = 'ant-carousel';
+    if (props.vertical) {
+      className = className + ' ant-carousel-vertical';
+    }
+
+    return (
+      <div className={className}>
+        <Carousel {...props} />
+      </div>
+    );
+  }
+});
+
+export default AntCarousel;

components/carousel/index.md

@@ -5,3 +5,33 @@
 
 ---
 
+旋转木马，轮播组件。
+
+## 何时使用
+
+
+## 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>

components/datepicker/demo/size.md

@@ -0,0 +1,20 @@
+# 三种大小
+
+- order: 1
+
+三种大小的输入框，大的用在表单中，中的为默认。
+
+---
+
+````jsx
+// or require('antd/lib/datepicker');
+var Datepicker = antd.Datepicker;
+
+React.render(
+  <div>
+    <Datepicker size="lg" />
+    <Datepicker />
+    <Datepicker size="sm" />
+  </div>
+, document.getElementById('components-datepicker-demo-size'));
+````

components/datepicker/index.jsx

@@ -69,12 +69,14 @@ export default React.createClass({
         disabled={this.props.disabled}
         trigger={<span className="ant-calendar-picker-icon" />}
         calendar={calendar}
-        adjustOrientOnCalendarOverflow={false}
+        adjustOrientOnCalendarOverflow={true}
         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" />
+        <input
+          placeholder={this.props.placeholder}
+          className={'ant-calendar-picker-input ant-input ant-input-' + this.props.size}/>
       </Datepicker>
     );
   }

components/datepicker/index.md

@@ -26,9 +26,13 @@
 | onSelect     | 选择日期的回调 | function | 无           |
 | showTime     | 显示时间选择条 | boolean  | false        |
 | disabled     | 禁用           | bool     | false        |
+| size         | 输入框大小，`lg`代表高为32px，`sm`代表高为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>

components/notification/demo/top.md

@@ -0,0 +1,26 @@
+# 距离顶部距离
+
+- order: 1
+
+自定义通知框距离顶部的距离，在`config`方法里设置`top`的值， **只在初始化时设置有效** ，默认距离顶部`24px`。
+
+---
+
+````jsx
+var notification = require('antd/lib/notification');
+notification.config({
+  top: 100
+});
+
+var openNotification = function() {
+  var args = {
+    message: "这是标题",
+    description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案",
+  };
+  notification.open(args);
+};
+
+React.render(
+  <button className='ant-btn ant-btn-primary' onClick={openNotification}>打开通知提醒框</button>
+, document.getElementById('components-notification-demo-top'));
+````

components/notification/demo/with-icon.md

@@ -9,47 +9,21 @@
 ````jsx
 var notification = require('antd/lib/notification');
 
-var openNotificationSuccess = function() {
-  var args = {
-    message: "这是成功通知提醒框的标题",
-    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
-    icon: "success"
-  }; 
-  notification.open(args);
-};
-
-var openNotificationInfo = function() {
-  var args = {
-    message: "这是消息通知提醒框的标题",
-    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
-    icon: "info"
-  }; 
-  notification.open(args);
-};
-
-var openNotificationWarn = function() {
-  var args = {
-    message: "这是警告通知提醒框的标题",
-    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
-    icon: "warn"
-  }; 
-  notification.open(args);
-};
-
-var openNotificationError = function() {
-  var args = {
-    message: "这是错误通知提醒框的标题",
-    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
-    icon: "error"
-  }; 
-  notification.open(args);
+var openNotificationWithIcon = function(type) {
+  return function(){
+    var args = {
+      message: "这是标题",
+      description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案"
+    };
+    notification[type](args);
+  };
 };
 
 React.render(<div>
-  <button className="ant-btn" onClick={openNotificationSuccess}>成功</button>
-  <button className="ant-btn" onClick={openNotificationInfo}>消息</button>
-  <button className="ant-btn" onClick={openNotificationWarn}>警告</button>
-  <button className="ant-btn" onClick={openNotificationError}>错误</button>
+  <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'));
 ````

components/notification/index.jsx

@@ -1,4 +1,6 @@
 import Notification from 'rc-notification';
+import assign from 'object-assign';
+import React from 'react';
 
 let top = 24;
 
@@ -6,12 +8,12 @@ var notificationInstance;
 
 function getNotificationInstance() {
   notificationInstance = notificationInstance || Notification.newInstance({
-    prefixCls: 'ant-notification',
-    style: {
-      top: top,
-      right: 0
-    }
-  });
+      prefixCls: 'ant-notification',
+      style: {
+        top: top,
+        right: 0
+      }
+    });
   return notificationInstance;
 }
 
@@ -20,26 +22,28 @@ function notice(args) {
     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';
+    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: null,
@@ -53,6 +57,7 @@ function notice(args) {
       getNotificationInstance().notice({
         content: <div>
           <p className={prefixCls + 'message'}>{args.message}</p>
+
           <p className={prefixCls + 'description'}>{args.description}</p>
         </div>,
         duration: null,
@@ -64,6 +69,7 @@ function notice(args) {
       getNotificationInstance().notice({
         content: <div>
           <p className={prefixCls + 'message'}>{args.message}</p>
+
           <p className={prefixCls + 'description'}>{args.description}</p>
           <span className={prefixCls + 'btn'}>
             {args.btn}
@@ -79,14 +85,27 @@ function notice(args) {
   }
 }
 
-export default {
+var api = {
   open(args){
     notice(args);
   },
   close(key){
-    notificationInstance.removeNotice(key);
+    if (notificationInstance) {
+      notificationInstance.removeNotice(key);
+    }
   },
   config(options) {
     top = isNaN(options.top) ? 24 : options.top;
   }
 };
+
+['success', 'info', 'warn', 'error'].forEach((type)=> {
+  api[type] = (args) => {
+    var newArgs = assign({}, args, {
+      icon: type
+    });
+    return api.open(newArgs);
+  };
+});
+
+export default api;

components/notification/index.md

@@ -13,21 +13,33 @@
 
 ## API
 
+- `notification.success(config)`
+- `notification.error(config)`
+- `notification.info(config)`
+- `notification.warn(config)`
+- `notification.open(config)`
+- `notification.close(key: String)`
+
+config 参数如下：
+
 | 参数        | 说明                                            | 类型         | 默认值 |
 |----------- |---------------------------------------------    | ----------- |--------|
-| message    | 通知提醒标题，必选                                 | String      | 无     |
-| description | 通知提醒内容，必选                                | String      | 无     |
-| icon       | 通知提醒框的左侧Icon，默认没有，有四种选择`success`、`info`、`warn`、`error` | String | 无     |
-| btn        | 自定义关闭按钮                                    | String      | 无     |
-| top        | 通知提醒框距离顶部的距离， **只在初始化时设置有效** ，默认`24`           | Number      | 24     |
+| message    | 通知提醒标题，必选                                 | React.Element or String      | 无     |
+| description | 通知提醒内容，必选                                | React.Element or String      | 无     |
+| btn        | 自定义关闭按钮                                    | React.Element      | 无     |
+| key        | 当前通知唯一标志                               | String      | 无     |
 | onClose    | 点击默认关闭按钮时触发的回调函数                     | Function    | 无     |
 
-## 注意
+还提供了一个全局配置方法：
 
-- 当需要自定义通知提醒框距离浏览器窗口顶部的距离时，必须在 **第一次** `notification.open()` 前设置才有效
-    ```jsx
-    notification.config({
-      top: 24
-    });
-    notification.open(args);
-    ```
+- `notification.config(options)`
+
+```js
+message.config({
+  top: 100
+});
+```
+
+| 参数       | 说明               | 类型                       | 默认值       |
+|------------|--------------------|----------------------------|--------------|
+| top        | 消息距离顶部的位置 | Number                     | 24px         |

components/tabs/index.jsx

@@ -20,3 +20,4 @@ AntTabs.defaultProps = {
 AntTabs.TabPane = Tabs.TabPane;
 
 export default AntTabs;
+

components/tree/demo/basic.md

@@ -0,0 +1,32 @@
+# 基本
+
+- order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+var Tree = antd.Tree;
+var TreeNode = Tree.TreeNode;
+React.render(
+  <Tree className="myCls" checkable={true}>
+        <TreeNode title="parent 1" expanded={false}>
+          <TreeNode>leaf </TreeNode>
+          <TreeNode title="parent 1-1">
+            <TreeNode title="parent 2-1">
+              <TreeNode>leaf </TreeNode>
+              <TreeNode>leaf </TreeNode>
+            </TreeNode>
+            <TreeNode>leaf </TreeNode>
+            <TreeNode>leaf </TreeNode>
+          </TreeNode>
+        </TreeNode>
+        <TreeNode>leaf </TreeNode>
+        <TreeNode>
+          <TreeNode>leaf </TreeNode>
+        </TreeNode>
+      </Tree>
+, document.getElementById('components-tree-demo-basic'));
+````
+

components/tree/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Tree from 'rc-tree';
+var TreeNode = Tree.TreeNode;
+
+var antDTree = React.createClass({
+
+  render() {
+    return <Tree {...this.props} >
+      {this.props.children}
+    </Tree>;
+  }
+});
+antDTree.TreeNode = TreeNode;
+module.exports = antDTree;

docs/getting-started.md

@@ -155,7 +155,7 @@ Ant Design 支持所有的现代浏览器和 IE8+。
     <!-- 引入样式 -->
     <link rel="stylesheet" href="http://ant.design/dist/antd.css">
     <!-- Polyfills -->
-    <script src="https://a.alipayobjects.com/??es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js"></script>
+    <script src="https://a.alipayobjects.com/??es5-shim/4.1.10/es5-shim.min.js,es5-shim/4.1.10/es5-sham.min.js,html5shiv/3.7.2/src/html5shiv.js"></script>
     <!-- 引入 jquery 和 react -->
     <script src="https://a.alipayobjects.com/??jquery/jquery/1.11.1/jquery.js,react/0.13.3/react.min.js"></script>
   </head>

index.js

@@ -1,8 +1,10 @@
 require('./style/index.less');
 
 var antd = {
+  Affix: require('./components/affix'),
   Datepicker: require('./components/datepicker'),
   Tooltip: require('./components/tooltip'),
+  Carousel: require('./components/carousel'),
   Tabs: require('./components/tabs'),
   Modal: require('./components/modal'),
   Menu: require('rc-menu'),
@@ -28,7 +30,8 @@ var antd = {
   RadioGroup: require('./components/radio/group'),
   Notification: require('./components/notification'),
   Alert: require('./components/alert'),
-  Validation: require('./components/validation')
+  Validation: require('./components/validation'),
+  Tree: require('./components/Tree')
 };
 
 module.exports = antd;

package.json

@@ -55,7 +55,10 @@
     "rc-switch": "~1.2.0",
     "rc-table": "~3.1.0",
     "rc-tabs": "~5.2.0",
-    "rc-tooltip": "~2.4.0"
+    "rc-tooltip": "~2.4.0",
+    "rc-tree": "~0.10.0",
+    "rc-util": "~2.0.3",
+    "react-slick": "~0.6.4"
   },
   "devDependencies": {
     "autoprefixer-loader": "~2.0.0",

site/templates/home.html

@@ -21,6 +21,7 @@
         <i class="iconfont-home icon-lego"></i>
         开始使用
       </a>
+      <div class="entry-version">v{{config.package.stableVersion}}</div>
     </div>
   </div>
 </div>

site/templates/layout.html

@@ -33,7 +33,7 @@
         }
       })(this.console = this.console || {});
     </script>
-    <script src="https://a.alipayobjects.com/??bluebird/2.9.30/bluebird.js,jquery/jquery/1.11.1/jquery.js,es5-shim/4.0.5/es5-shim-debug.js,es5-shim/4.0.5/es5-sham-debug.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.js,react-router/0.13.3/ReactRouter.js"></script>
+    <script src="https://a.alipayobjects.com/??bluebird/2.9.30/bluebird.js,jquery/jquery/1.11.1/jquery.js,es5-shim/4.1.10/es5-shim.js,es5-shim/4.1.10/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.js,react-router/0.13.3/ReactRouter.js"></script>
     <script>
       var ANT_COMPONENTS = [];
       {%- for item in resource.pages|find_category(["CSS","Components"]) %}

spec/motion.md

@@ -28,6 +28,11 @@ Ant Design 提供了一些预设的组件动画样式。
 
 `````jsx
 var cssAnimation = require('css-animation');
+var Select = antd.Select;
+var Option = Select.Option;
+var OptGroup = Select.OptGroup;
+
+
 var motions = [];
 motions = motions.concat([[{
   name: '淡入',
@@ -182,7 +187,7 @@ motions = motions.concat([[{
 var leave='-leave';
 var Test = React.createClass({
   handleChange(e) {
-    var value = e.target.value;
+    var value = e;
     if(value){
       this.demoNode.style.visibility='';
       cssAnimation(this.demoNode, value, () => {
@@ -198,19 +203,20 @@ var Test = React.createClass({
   },
 
   render() {
-    var options = [<option value="">请选择预设动画</option>].concat(motions.map(function (m) {
+    var options = [<Option value="">请选择预设动画</Option>].concat(motions.map(function (m) {
       var opts = m.map(function (m2) {
-        return <option value={m2.value + "-" + m2.direction}>{m2.name + " " + m2.value}</option>
+        return <Option value={m2.value + "-" + m2.direction}>{m2.name + " " + m2.value}</Option>
       });
-      return <optgroup label={m[0].type}>{opts}</optgroup>;
+      return <OptGroup label={m[0].type}>{opts}</OptGroup>;
     }));
     return <div>
       <div className="motion-container">
         <div ref="demo" className="motion-example"></div>
       </div>
-      <div className="motion-select">
-        <select onChange={this.handleChange}>{options}</select>
+      <div className="motion-select-wrapper">
+        <Select value="" className='motion-select' onChange={this.handleChange}>{options}</Select>
       </div>
+
     </div>;
   }
 });
@@ -237,8 +243,12 @@ React.render(<Test/>, document.getElementById('components-motion-demo-basic'));
   font-weight: bold;
   background: url(https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg) center/230px;
 }
-.motion-select {
+.motion-select-wrapper{
   text-align: center;
 }
+.motion-select {
+  text-align:left;
+  width:180px;
+}
 </style>
 

spec/page-transition.md

@@ -1,10 +1,25 @@
-# 转换动画
+# 互动转换
 
 - category: 动画
 - order: 1
 
 ---
 
+## 响应互动
+
+响应交互一般是指我们在浏览页面时，点击元素时动画给我们视觉上的反馈，每个交互动效都能给我们带来不同视觉效果。
+
+比如：按钮上的 hover 或 click 效果，随着你的鼠标事件而改变自身或增加元素在按钮上，或者折叠面板和弹出框，点击后给你呈现新加入的信息元素。
+
+### 按钮反馈
+
+<div class="video-player">
+  <video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T1yHhhXfxkXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/rmsweb/T15IXhXlXbXXXXXXXX.mp4" type="video/mp4"></video>
+</div>
+
+
+## 转换动画
+
 ### 视觉连贯性三元素
 
 - Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
@@ -13,30 +28,6 @@
 
 - Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
 
-
-## 转场动画
-
-从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。
-
- - 大页面转场可采用左出右入的形式。
-
- - 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，来指引用户的视觉轨迹。
-
-<script src="/static/TweenMax.min.js"></script>
-<script src="/static/motion.js"></script>
-
-<div class="video-player">
-  <video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T14q0hXbBdXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/T1qWNhXkpeXXXXXXXX.mp4" type="video/mp4"></video>
-</div>
-
-> 参考我们的进场组件案例。查看[进场动画组件](/components/enter-animation/)
-
-## 响应互动
-
-响应交互一般是指我们在浏览页面时，点击元素时动画给我们视觉上的反馈，每个交互动效都能给我们带来不同视觉效果。
-
-比如：按钮上的 hover 或 click 效果，随着你的鼠标事件而改变自身或增加元素在按钮上，或者折叠面板和弹出框，点击后给你呈现新加入的信息元素。
-
 ### 可折叠面板
 
 对于信息元素内容区域的延伸，显示信息元素和进一步内容对象之间的直接连接。
@@ -57,3 +48,21 @@
 <div class="video-player">
   <video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T1br0gXghtXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/rmsweb/T1lcRgXb4gXXXXXXXX.mp4" type="video/mp4"></video>
 </div>
+
+
+### 页面转场
+
+从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。
+
+ - 大页面转场可采用左出右入的形式。
+
+ - 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，来指引用户的视觉轨迹。
+
+<script src="/static/TweenMax.min.js"></script>
+<script src="/static/motion.js"></script>
+
+<div class="video-player">
+  <video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T14q0hXbBdXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/T1qWNhXkpeXXXXXXXX.mp4" type="video/mp4"></video>
+</div>
+
+> 参考我们的进场组件案例。查看[进场动画组件](/components/enter-animation/)

static/style.css

@@ -585,6 +585,7 @@ footer ul li > a {
   empty-cells: show;
   border: 1px solid #e9e9e9;
   width: 100%;
+  margin-bottom: 24px;
 }
 
 .markdown > table th {
@@ -1852,8 +1853,16 @@ a.entry-link:hover .icon-lego {
   animation: rotateCircle 0.5s 1 ease-in-out;
 }
 
+.entry-version {
+  font-size: 12px;
+  margin-top: 15px;
+  position: absolute;
+  top: 36px;
+  right: -32px;
+}
+
 @media only screen and (min-width: 320px) and (max-width: 1024px) {
-  .code-boxes-col {
+  .code-boxes-col-2-1 {
     float: none;
     width: 100%;
   }

style/components/carousel/slick-theme.less

@@ -0,0 +1,126 @@
+
+.ant-carousel {
+
+  /* Arrows */
+
+  .slick-prev,
+  .slick-next {
+    position: absolute;
+    display: block;
+    height: 20px;
+    width: 20px;
+    line-height: 0px;
+    font-size: 0px;
+    cursor: pointer;
+    background: transparent;
+    color: transparent;
+    top: 50%;
+    margin-top: -10px;
+    padding: 0;
+    border: none;
+    outline: none;
+    &:hover, &:focus {
+      outline: none;
+      background: transparent;
+      color: transparent;
+      &:before {
+        opacity: 1;
+      }
+    }
+    &.slick-disabled:before {
+      opacity: 0.25;
+    }
+  }
+
+  .slick-prev {
+    left: -25px;
+    &:before {
+      content: "←";
+    }
+  }
+
+  .slick-next {
+    right: -25px;
+    &:before {
+      content: "→";
+    }
+  }
+
+  /* Dots */
+
+  .slick-slider {
+    padding-bottom: 45px;
+  }
+
+  .slick-dots {
+    position: absolute;
+    bottom: 0px;
+    list-style: none;
+    display: block;
+    text-align: center;
+    padding: 0;
+    width: 100%;
+    li {
+      position: relative;
+      display: inline-block;
+      height: 20px;
+      width: 20px;
+      margin: 0 5px;
+      padding: 0;
+      cursor: pointer;
+      button {
+        border: 0;
+        background: transparent;
+        display: block;
+        height: 20px;
+        width: 20px;
+        outline: none;
+        line-height: 0px;
+        font-size: 0px;
+        color: transparent;
+        padding: 5px;
+        cursor: pointer;
+        &:hover, &:focus {
+          outline: none;
+          &:before {
+            opacity: 1;
+          }
+        }
+        &:before {
+          position: absolute;
+          top: 0;
+          left: 0;
+          content: "•";
+          width: 20px;
+          height: 20px;
+          font-size: 18px;
+          font-family: arial, sans-serif;
+          line-height: 20px;
+          text-align: center;
+          color: gray;
+          opacity: 0.25;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+        }
+      }
+      &.slick-active button:before {
+        color: black;
+        opacity: 0.75;
+      }
+    }
+  }
+}
+
+.ant-carousel-vertical {
+
+  .slick-slider {
+    padding-bottom: 0;
+  }
+
+  .slick-dots {
+    width: 20px;
+    bottom: auto;
+    right: -35px;
+    top: 0;
+  }
+}

style/components/carousel/slick.less

@@ -0,0 +1,94 @@
+
+.ant-carousel {
+
+  .slick-slider {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-touch-callout: none;
+    user-select: none;
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .slick-list {
+    position: relative;
+    overflow: hidden;
+    display: block;
+    margin: 0;
+    padding: 0;
+
+    &:focus {
+      outline: none;
+    }
+
+    &.dragging {
+      cursor: pointer;
+      cursor: hand;
+    }
+  }
+  .slick-slider .slick-track,
+  .slick-slider .slick-list {
+    transform: translate3d(0, 0, 0);
+  }
+
+  .slick-track {
+    position: relative;
+    left: 0;
+    top: 0;
+    display: block;
+
+    &:before,
+    &:after {
+      content: "";
+      display: table;
+    }
+
+    &:after {
+      clear: both;
+    }
+
+    .slick-loading & {
+      visibility: hidden;
+    }
+  }
+  .slick-slide {
+    float: left;
+    height: 100%;
+    min-height: 1px;
+    [dir="rtl"] & {
+      float: right;
+    }
+    img {
+      display: block;
+    }
+    &.slick-loading img {
+      display: none;
+    }
+
+    display: none;
+
+    &.dragging img {
+      pointer-events: none;
+    }
+  }
+
+  .slick-initialized .slick-slide {
+    display: block;
+  }
+
+  .slick-loading .slick-slide {
+    visibility: hidden;
+  }
+
+  .slick-vertical .slick-slide {
+    display: block;
+    height: auto;
+    border: 1px solid transparent;
+  }
+  .slick-arrow.slick-hidden {
+    display: none;
+  }
+
+}

style/components/form.less

@@ -127,9 +127,7 @@ form {
   .@{css-prefix}input,
   .@{css-prefix}input-group .@{css-prefix}input,
   .@{css-prefix}input-group .@{css-prefix}input-group-addon {
-    height: @input-height-lg;
-    font-size: @font-size-base;
-    padding: 6px 7px;
+    .input-lg();
   }
 
   // Input combined with select
@@ -266,9 +264,8 @@ form {
     bottom: 0;
     right: 0;
     font-family: "anticon" !important;
-    width: 32px;
-    height: 32px;
-    line-height: 32px;
+    .square(@input-height-lg);
+    line-height: @input-height-lg;
     text-align: center;
     font-size: 14px;
   }

style/components/index.less

@@ -26,3 +26,6 @@
 @import "notification";
 @import "tag";
 @import "alert";
+@import "tree";
+@import "carousel/slick";
+@import "carousel/slick-theme";

style/components/notification.less

@@ -83,7 +83,7 @@
       color: #999;
       outline: none;
     }
-    
+
     &-content-btn {
       float: right;
       margin-top: 16px;
@@ -117,4 +117,4 @@
     padding-top: 0;
     padding-bottom: 0;
   }
-}
+}

style/components/select.less

@@ -243,16 +243,15 @@
         margin: 0;
         padding: 0;
 
-        > li.@{selectPrefixCls}-menu-item {
-          padding-left: 20px;
+        > li.@{selectPrefixCls}-dropdown-menu-item {
+          padding-left: 24px;
         }
       }
 
       &-item-group-title {
         color: #999;
         line-height: 1.5;
-        padding: 8px 10px;
-        border-bottom: 1px solid #dedede;
+        padding: 8px 16px;
       }
 
       li&-item {

style/components/tree.less

@@ -0,0 +1,88 @@
+@treePrefixCls: rc-tree;
+
+.@{treePrefixCls} {
+  margin:0; padding:5px;
+
+  li {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    line-height: 14px;
+    white-space: nowrap;
+    outline: 0;
+
+    ul{ margin:0; padding:0 0 0 18px}
+    ul.line{
+      //background:url(./img/line_conn.gif) 0 0 repeat-y;
+      background:url(https://t.alipayobjects.com/images/T13BtfXl0mXXXXXXXX.gif) 0 0 repeat-y;
+    }
+    a {
+      padding:1px 3px 0 0; margin:0;
+      cursor:pointer; height:17px;
+      background-color: transparent;
+      text-decoration:none;
+      vertical-align:top; display: inline-block
+    }
+    span {line-height:16px; margin-right:2px}
+    span.button {
+      line-height:0; margin:0; width:16px; height:16px;
+      display: inline-block; vertical-align:middle;
+      border:0 none; cursor: pointer;outline:none;
+      background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
+      //background-image:url("./img/zTreeStandard.png");
+      background-image:url("https://t.alipayobjects.com/images/T1.ANfXhXtXXXXXXXX.png");
+    }
+    span.button.roots_open {  background-position: -92px 0;  }
+    span.button.roots_close{background-position:-74px 0}
+    span.button.center_open{background-position:-92px -18px}
+    span.button.center_close{background-position:-74px -18px}
+    span.button.bottom_open{background-position:-92px -36px}
+    span.button.bottom_close{background-position:-74px -36px}
+
+    span.button.center_docu{background-position:-56px -18px}
+    span.button.bottom_docu{background-position:-56px -36px}
+
+    span.button.chk {
+      width: 13px;  height: 13px;
+      margin: 0 3px 0 0;
+      cursor: auto;
+    }
+    span.button.chk.checkbox_false_full {background-position:0 0}
+    span.button.chk.checkbox_false_full_focus {background-position:0 -14px}
+    span.button.chk.checkbox_false_part {background-position:0 -28px}
+    span.button.chk.checkbox_false_part_focus {background-position:0 -42px}
+    span.button.chk.checkbox_false_disable {background-position:0 -56px}
+    span.button.chk.checkbox_true_full {background-position:-14px 0}
+    span.button.chk.checkbox_true_full_focus {background-position:-14px -14px}
+    span.button.chk.checkbox_true_part {background-position:-14px -28px}
+    span.button.chk.checkbox_true_part_focus {background-position:-14px -42px}
+    span.button.chk.checkbox_true_disable {background-position:-14px -56px}
+  }
+
+  &-selected{
+    background-color:#FFE6B0;
+    border:1px #FFB951 solid; opacity:0.8;
+  }
+
+  &-treenode-switcher {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+  }
+  &-icon__open {
+    margin-right: 2px;
+    background-position: -110px -16px;
+    vertical-align: top;
+  }
+  &-icon__close {
+    margin-right: 2px;
+    background-position: -110px 0;
+    vertical-align: top;
+  }
+  &-switcher__open {
+    //background-position: -92px 0;
+  }
+  &-switcher__close {
+    //background-position: -74px 0;
+  }
+}

style/mixins/input.less

@@ -1,14 +1,12 @@
 // size mixins for input
 .input-lg() {
-  padding: @input-padding-lg;
+  padding: @input-padding-vertical-lg @input-padding-horizontal;
   height: @input-height-lg;
-  font-size: @input-font-size-lg;
 }
 
 .input-sm() {
   padding: @input-padding-vertical-sm @input-padding-horizontal;
   height: @input-height-sm;
-  font-size: @input-font-size-sm;
 }
 
 // input status
@@ -42,7 +40,7 @@
   width: 100%;
   height: @input-height-base;
   cursor: text;
-  font-size: @input-font-size;
+  font-size: @font-size-base;
   line-height: @line-height-base;
   color: @input-color;
   background-color: @input-bg;

style/themes/default/custom.less

@@ -121,17 +121,13 @@
 @input-padding-horizontal    : 7px;
 @input-padding-vertical-base : 4px;
 @input-padding-vertical-sm   : 1px;
-@input-padding-lg            : 4px 7px 5px;
+@input-padding-vertical-lg   : 6px;
 
 @input-placeholder-color     : #ccc;
 @input-color                 : #666;
 @input-border-color          : #d9d9d9;
 @input-bg                    : #fff;
 
-@input-font-size-lg          : 14px;
-@input-font-size             : @font-size-base;
-@input-font-size-sm          : @font-size-base;
-
 @input-hover-border-color    : @primary-color;
 @input-focus-border-color    : @primary-color;
 @input-disabled-bg           : #f3f5f7;