Merge branch 'master' of https://github.com/ant-design/ant-design

.gitignore

@@ -18,12 +18,10 @@ Thumbs.db
 node_modules/
 .buildpath
 .settings
-.yml
-data
-nohup.out
-.spmjspid
-elasticsearch-*
-config/base.yaml
-_site
 npm-debug.log
+nohup.out
+_site
 dist
+lib
+elasticsearch-*
+config/base.yaml

.npmignore

@@ -1,7 +1,39 @@
+*.iml
+.idea/
+.ipr
+.iws
+*~
+~*
+*.diff
+*.patch
+*.bak
+.DS_Store
+Thumbs.db
+.project
+.*proj
+.svn/
+*.swp
+*.swo
+*.log
+node_modules/
+.buildpath
+.settings
+npm-debug.log
+nohup.out
+_site
+dist
+lib
+elasticsearch-*
+config/base.yaml
+
 **/*.md
 docs
 node_modules
 theme
 static
-_site
 site
+components
+dist
+/*.js
+*.yml
+CNAME

README.md

@@ -6,6 +6,21 @@
 
 ![](https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg)
 
+## 使用
+
+### 静态使用
+
+script 直接引用 `dist/antd.js` `dist/antd.css` 后，通过全局变量 antd 使用
+
+### npm
+
+`npm install antd` 后，使用示例
+
+```js
+require('antd/style/index.less');
+require('antd/lib/datepicker');
+```
+
 ## 特性
 
 - 丰富实用的 UI 组件。
@@ -47,5 +62,11 @@ $ npm run deploy
 #### 构建
 
 ```bash
-$ webpack
+$ npm run build
+```
+
+#### 发布到 npm
+
+```bash
+$ npm run pub
 ```

components/accordion/index.md

@@ -1,26 +0,0 @@
-# Accordion
-
-- category: Components
-- chinese: 折叠面板
-
----
-
-游学远方 习礼知书广人网
-
-原是女身暗掩装
-
-校有规训令确 不允许巾帼求学
-
-淑贤女子属深闺居暗房
-
-人在远方 处身书斋感迷茫
-
-尤幸与山伯结党
-
-夜唱诗昼画作 赏雨看星说文学
-
-热情暗生不可自抗
-
-怕坦率将心声交代 怕草率泄露祝英台
-
-若擦肩强避开 然後视线骤改 不敢笑逐颜开

components/breadcrumb/demo/basic.md

@@ -0,0 +1,20 @@
+# 基本
+
+- order: 0
+
+最简单的用法，存在 `href` 表示可点。
+
+---
+
+````jsx
+var Breadcrumb = require('antd/components/breadcrumb');
+
+React.render(
+  <Breadcrumb>
+    <Breadcrumb.Item>首页</Breadcrumb.Item>
+    <Breadcrumb.Item href="">应用中心</Breadcrumb.Item>
+    <Breadcrumb.Item href="">应用列表</Breadcrumb.Item>
+    <Breadcrumb.Item>某应用</Breadcrumb.Item>
+  </Breadcrumb>
+, document.getElementById('components-breadcrumb-demo-basic'));
+````

components/breadcrumb/demo/withIcon.md

@@ -0,0 +1,27 @@
+# 带有图标的
+
+- order: 1
+
+图标放在文字前面。
+
+---
+
+````jsx
+var Breadcrumb = antd.Breadcrumb;
+
+React.render(
+  <Breadcrumb>
+    <Breadcrumb.Item href="">
+      <i className="anticon anticon-user"></i>
+    </Breadcrumb.Item>
+    <Breadcrumb.Item href="">
+      <i className="anticon anticon-folder-open"></i>
+      应用列表
+    </Breadcrumb.Item>
+    <Breadcrumb.Item>
+      应用
+    </Breadcrumb.Item>
+  </Breadcrumb>
+, document.getElementById('components-breadcrumb-demo-withicon'));
+````
+

components/breadcrumb/index.jsx

@@ -0,0 +1,36 @@
+'use strict';
+
+import React from 'react';
+
+let prefixCls = 'ant-breadcrumb';
+
+let BreadcrumbItem = React.createClass({
+  render() {
+    var link = <a className={prefixCls + '-link'} {...this.props}>{this.props.children}</a>;
+    var slash = <span className={prefixCls + '-slash'}>/</span>;
+    if (typeof this.props.href === 'undefined') {
+      link = <span className={prefixCls + '-link'} {...this.props}>{this.props.children}</span>;
+    }
+    if (this.props.last) {
+      slash = '';
+    }
+    return <span>{link} {slash}</span>;
+  }
+});
+
+let Breadcrumb = React.createClass({
+  render() {
+    if (this.props.children.length > 0) {
+      var last = this.props.children[this.props.children.length - 1];
+      last.props.last = true;
+    }
+    return (
+      <div className={prefixCls}>
+        {this.props.children}
+      </div>
+    );
+  }
+});
+
+Breadcrumb.Item = BreadcrumbItem;
+export default Breadcrumb;

components/breadcrumb/index.md

@@ -1,26 +1,14 @@
-# BreadCrumb
+# Breadcrumb
 
-- category: CSS
+- category: Components
 - chinese: 面包屑
 
 ---
 
-游学远方 习礼知书广人网
+显示当前页面在系统层级结构中的位置，并能向上返回。
 
-原是女身暗掩装
+## 何时使用
 
-校有规训令确 不允许巾帼求学
+- 当系统拥有超过两级以上的层级结构时；
-
+- 当需要告知用户“你在哪里”时；
-淑贤女子属深闺居暗房
+- 当需要向上导航的功能时。
-
-人在远方 处身书斋感迷茫
-
-尤幸与山伯结党
-
-夜唱诗昼画作 赏雨看星说文学
-
-热情暗生不可自抗
-
-怕坦率将心声交代 怕草率泄露祝英台
-
-若擦肩强避开 然後视线骤改 不敢笑逐颜开

components/button/demo/icon.md

@@ -2,42 +2,44 @@
 
 - order: 4
 
+图标一般放在文字前面，也可以单独存在。
+
 ---
 
 ````html
 <button class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg">
-  <span class="anticon anticon-search"></span>
+  <i class="anticon anticon-search"></i>
 </button>
 <button class="ant-btn ant-btn-primary ant-btn-lg">
-  <span class="anticon anticon-search"></span>
+  <i class="anticon anticon-search"></i>
-  <span>大按钮</span>
+  大按钮
 </button>
-  
+
 <button class="ant-btn ant-btn-primary ant-btn-circle">
-  <span class="anticon anticon-search"></span>
+  <i class="anticon anticon-search"></i>
 </button>
 <button class="ant-btn ant-btn-primary">
-  <span class="anticon anticon-search"></span>
+  <i class="anticon anticon-search"></i>
-  <span>中按钮</span>
+  中按钮
 </button>
-  
+
 <button class="ant-btn ant-btn-primary ant-btn-circle ant-btn-sm">
-  <span class="anticon anticon-search"></span>
+  <i class="anticon anticon-search"></i>
 </button>
 <button class="ant-btn ant-btn-primary ant-btn-sm">
-  <span class="anticon anticon-search"></span>
+  <i class="anticon anticon-search"></i>
-  <span>小按钮</span>
+  小按钮
 </button>
 
 <p></p>
 
 <button class="ant-btn ant-btn-ghost ant-btn-circle-outline ant-btn-lg">
-  <span class="anticon anticon-search"></span>
+  <i class="anticon anticon-search"></i>
 </button>
 <button class="ant-btn ant-btn-ghost ant-btn-circle-outline">
-  <span class="anticon anticon-search"></span>
+  <i class="anticon anticon-search"></i>
 </button>
 <button class="ant-btn ant-btn-circle-outline ant-btn-sm">
-  <span class="anticon anticon-search"></span>
+  <i class="anticon anticon-search"></i>
 </button>
-````
+````

components/collapse/index.md

@@ -0,0 +1,13 @@
+# Collapse
+
+- category: Components
+- chinese: 折叠面板
+
+---
+
+可以折叠/展开的内容区域。
+
+## 何时使用
+
+- 对复杂区域进行分组和隐藏，保持页面的整洁。
+- `手风琴` 是一种特殊的折叠面板，只允许单个内容区域展开。

components/datepicker/demo/basic.md

@@ -7,6 +7,7 @@
 ---
 
 ````jsx
+// or require('antd/components/datepicker');
 var Datepicker = antd.Datepicker;
 
 React.render(

components/datepicker/index.jsx

@@ -21,50 +21,60 @@ 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: value
     };
   },
+  componentWillReceiveProps(nextProps) {
+    if ('value' in nextProps) {
+      var value = new GregorianCalendar(zhCn);
+      value.setTime(new Date(nextProps.value).valueOf());
+      this.setState({
+        value: value
+      });
+    }
+  },
   getDefaultProps() {
     return {
       format: 'yyyy-MM-dd',
-      placeholder: '请选择日期'
+      placeholder: '请选择日期',
+      transitionName: 'slide-up',
+      onSelect: function () {}
     };
   },
-  componentDidMount() {
+  handleChange(v) {
-    let state = {};
+    this.setState({
-    if (this.props.value) {
+      value: v
-      let value = new GregorianCalendar(zhCn);
+    });
-      value.setTime(new Date(this.props.value));
+    this.props.onSelect(new Date(v.getTime()));
-      state.value = value;
-    }
-    state.disabled = this.props.disabled || function() {};
-    this.setState(state);
-  },
-  handleChange() {
-    this.props.onSelect(new Date(this.state.value.getTime()));
   },
   render() {
-    let calendar = (
+    var calendar = (
       <Calendar
-      disabledDate={this.state.disabled}
+        disabledDate={this.props.disabled}
-      locale={CalendarLocale}
+        locale={CalendarLocale}
-      orient={['top', 'left']}
+        orient={['top', 'left']}
-      defaultValue={defaultCalendarValue}
+        defaultValue={defaultCalendarValue}
-      showTime={this.props.showTime}
+        showTime={this.props.showTime}
-      prefixCls="ant-calendar"
+        prefixCls="ant-calendar"
-      showOk={this.props.showTime}
+        showOk={this.props.showTime}
-      showClear={false} />
+        showClear={false}/>
     );
     return (
       <Datepicker
+        transitionName={this.props.transitionName}
         trigger={<span className="ant-calendar-picker-icon" />}
         calendar={calendar}
         formatter={new DateTimeFormat(this.props.format)}
         value={this.state.value}
         prefixCls="ant-calendar-picker"
-        onChange={this.props.onSelect}>
+        onChange={this.handleChange}>
-        <input placeholder={this.props.placeholder} className="ant-calendar-picker-input" />
+        <input placeholder={this.props.placeholder} className="ant-calendar-picker-input"/>
       </Datepicker>
     );
   }

components/datepicker/index.md

@@ -23,6 +23,7 @@
 | value    | 日期           | string   | 无           |
 | format   | 展示的日期格式 | string   | "yyyy-MM-dd" |
 | disabled | 不可选择的日期 | function | 无           |
+| transitionName | 动画名称 | String.可取 'slide-up' | 无.            |
 | onSelect | 选择日期的回调 | function | 无           |
 | showTime | 显示时间选择条 | boolean  | false        |
 

components/input-number/demo/basic.md

@@ -0,0 +1,20 @@
+# 基本
+
+- order: 0
+
+数字输入框
+
+---
+
+````jsx
+var InputNumber = antd.InputNumber;
+
+function onChange(v){
+  console.log('changed',v);
+}
+
+React.render(
+  <div><InputNumber min={1} max={10} defaultValue={3} onChange={onChange} style={{width:100}}/></div>
+, document.getElementById('components-input-number-demo-basic'));
+````
+

components/input-number/index.jsx

@@ -0,0 +1,15 @@
+var InputNumber = require('rc-input-number');
+var React = require('react');
+
+var AntInputNumber = React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'ant-input-number'
+    };
+  },
+  render() {
+    return <InputNumber {...this.props}/>;
+  }
+});
+
+module.exports = AntInputNumber;

components/input-number/index.md

@@ -0,0 +1,27 @@
+# InputNumber
+
+- category: Components
+- chinese: 数字输入框
+
+---
+
+通过鼠标或键盘，输入范围内的数值。
+
+## 何时使用
+
+- 当需要获取标准数值时。
+
+## API
+
+属性如下
+
+| 成员        | 说明           | 类型               | 默认值       |
+|-------------|----------------|--------------------|--------------|
+| min     | 最小值   | Number | -Infinity        |
+| max     | 最大值       | Number      | Infinity           |
+| value     | 当前值       | Number      |            |
+| step     | 每次改变步数       | Number      |      1      |
+| defaultValue     | 初始值       | Number      |            |
+| onChange     | 变化回调       | Function      |            |
+| disabled     | 禁用       | Boolean      |            |
+| style     | 根节点样式       | Object      |

components/inputNumber/index.md

@@ -1,26 +0,0 @@
-# InputNumber
-
-- category: Components
-- chinese: 数字输入框
-
----
-
-游学远方 习礼知书广人网
-
-原是女身暗掩装
-
-校有规训令确 不允许巾帼求学
-
-淑贤女子属深闺居暗房
-
-人在远方 处身书斋感迷茫
-
-尤幸与山伯结党
-
-夜唱诗昼画作 赏雨看星说文学
-
-热情暗生不可自抗
-
-怕坦率将心声交代 怕草率泄露祝英台
-
-若擦肩强避开 然後视线骤改 不敢笑逐颜开

components/message/index.md

@@ -5,22 +5,9 @@
 
 ---
 
-游学远方 习礼知书广人网
+全局展示操作反馈信息。
 
-原是女身暗掩装
+## 何时使用
 
-校有规训令确 不允许巾帼求学
+- 可提供成功、警告和错误等反馈信息。
-
+- 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
-淑贤女子属深闺居暗房
-
-人在远方 处身书斋感迷茫
-
-尤幸与山伯结党
-
-夜唱诗昼画作 赏雨看星说文学
-
-热情暗生不可自抗
-
-怕坦率将心声交代 怕草率泄露祝英台
-
-若擦肩强避开 然後视线骤改 不敢笑逐颜开

components/modal/confirm.jsx

@@ -19,11 +19,17 @@ module.exports = function (props) {
   function onCancel() {
     var cancelFn = props.onCancel;
     if (cancelFn) {
+      var ret;
       if (cancelFn.length) {
-        cancelFn(close);
+        ret = cancelFn(close);
       } else {
-        cancelFn();
+        ret = cancelFn();
-        close();
+        if (!ret) {
+          close();
+        }
+      }
+      if (ret && ret.then) {
+        ret.then(close);
       }
     } else {
       close();
@@ -33,11 +39,17 @@ module.exports = function (props) {
   function onOk() {
     var okFn = props.onOk;
     if (okFn) {
+      var ret;
       if (okFn.length) {
-        okFn(close);
+        ret = okFn(close);
       } else {
-        okFn();
+        ret = okFn();
-        close();
+        if (!ret) {
+          close();
+        }
+      }
+      if (ret && ret.then) {
+        ret.then(close);
       }
     } else {
       close();

components/modal/demo/basic.md

@@ -28,6 +28,9 @@ var Test = React.createClass({
   },
   handleCancel() {
     console.log('点击了取消');
+    this.setState({
+      visible: false
+    });
   },
   render() {
     return <div>

components/modal/demo/confirm-promise.md

@@ -0,0 +1,30 @@
+# 确认对话框
+
+- order: 5
+
+使用 `confirm()` 可以快捷地弹出确认框。onCancel/onOk 返回 promise 可以延迟关闭
+
+---
+
+````jsx
+var confirm = antd.confirm;
+
+function showConfirm(){
+  confirm({
+    title: '您是否确认要删除这项内容',
+    content: '一些解释',
+    onOk: function() {
+      alert('1 秒后关闭');
+      return new Promise(function(resolve){
+        setTimeout(resolve,1000);
+      });
+    },
+    onCancel: function() {}
+  });
+}
+
+React.render(
+<button className="ant-btn" onClick={showConfirm}>
+  确认对话框
+</button>, document.getElementById('components-modal-demo-confirm-promise'));
+````

components/modal/demo/custom.md

@@ -34,6 +34,9 @@ var Test = React.createClass({
   },
   handleCancel() {
     console.log('点击了取消');
+    this.setState({
+      visible: false
+    });
   },
   render() {
     return <div>

components/modal/index.jsx

@@ -13,7 +13,8 @@ var Modal = React.createClass({
   },
 
   handleCancel() {
-    this.refs.d.requestClose();
+    var d = this.refs.d;
+    d.requestClose();
   },
 
   getDefaultProps() {
@@ -43,9 +44,9 @@ var Modal = React.createClass({
   render() {
     var props = this.props;
     var footer = props.footer || [
-      <button type="button" className="ant-btn-default ant-btn" onClick={this.handleCancel}>取 消</button>,
+        <button type="button" className="ant-btn-default ant-btn" onClick={this.handleCancel}>取 消</button>,
-      <button type="button" className="ant-btn-primary ant-btn" onClick={this.handleOk}>确 定</button>
+        <button type="button" className="ant-btn-primary ant-btn" onClick={this.handleOk}>确 定</button>
-    ];
+      ];
     return <Dialog transitionName="zoom" onBeforeClose={props.onCancel} visible={this.state.visible} maskAnimation="fade" width="500" footer={footer} {...props} ref="d"/>;
   }
 });

components/modal/index.md

@@ -34,7 +34,7 @@
 | 参数       | 说明           | 类型             | 默认值       |
 |------------|----------------|------------------|--------------|
 | title      | 标题           | React.Element or String    | 无           |
-| onOk       | 点击确定回调，参数为关闭函数       | function         | 无           |
+| onOk       | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭      | function         | 无           |
-| onCancel | 取消回调，参数为关闭函数       | function         | 无           |
+| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭       | function         | 无           |
 | width      | 宽度           | String or Number | 375           |
 | iconClassName | 图标样式名 | String | anticon-exclamation-circle |

components/motion/demo/basic.md

@@ -0,0 +1,226 @@
+# 基本
+
+- order: 0
+
+动画效果示例。
+
+---
+
+````jsx
+var cssAnimation = antd.cssAnimation;
+var motions = [];
+motions = motions.concat([[{
+  name: '淡入',
+  value: 'fade',
+  direction: 'enter',
+  type: '渐隐'
+}, {
+  name: '淡出',
+  value: 'fade',
+  direction: 'leave',
+  type: '渐隐'
+}]]);
+motions = motions.concat([[{
+  name: '中心放大',
+  value: 'zoom',
+  direction: 'enter',
+  type: '缩放'
+}, {
+  name: '中心缩小',
+  value: 'zoom',
+  direction: 'leave',
+  type: '缩放'
+}, {
+  name: '上方放大',
+  value: 'zoom-up',
+  direction: 'enter',
+  type: '缩放'
+}, {
+  name: '上方缩小',
+  value: 'zoom-up',
+  direction: 'leave',
+  type: '缩放'
+}, {
+  name: '下方放大',
+  value: 'zoom-down',
+  direction: 'enter',
+  type: '缩放'
+}, {
+  name: '下方缩小',
+  value: 'zoom-down',
+  direction: 'leave',
+  type: '缩放'
+}, {
+  name: '左方放大',
+  value: 'zoom-left',
+  direction: 'enter',
+  type: '缩放'
+}, {
+  name: '左方缩小',
+  value: 'zoom-left',
+  direction: 'leave',
+  type: '缩放'
+}, {
+  name: '右方放大',
+  value: 'zoom-right',
+  direction: 'enter',
+  type: '缩放'
+}, {
+  name: '右方缩小',
+  value: 'zoom-right',
+  direction: 'leave',
+  type: '缩放'
+}]]);
+motions = motions.concat([[{
+  name: '上方滑入',
+  value: 'move-up',
+  direction: 'enter',
+  type: '移动'
+}, {
+  name: '上方滑出',
+  value: 'move-up',
+  direction: 'leave',
+  type: '移动'
+}, {
+  name: '下方滑入',
+  value: 'move-down',
+  direction: 'enter',
+  type: '移动'
+}, {
+  name: '下方滑出',
+  value: 'move-down',
+  direction: 'leave',
+  type: '移动'
+}, {
+  name: '左方滑入',
+  value: 'move-left',
+  direction: 'enter',
+  type: '移动'
+}, {
+  name: '左方滑出',
+  value: 'move-left',
+  direction: 'leave',
+  type: '移动'
+}, {
+  name: '右方滑入',
+  value: 'move-right',
+  direction: 'enter',
+  type: '移动'
+}, {
+  name: '右方滑入',
+  value: 'move-right',
+  direction: 'leave',
+  type: '移动'
+}]]);
+motions = motions.concat([[{
+  name: '上方展开',
+  value: 'slide-up',
+  direction: 'enter',
+  type: '伸缩'
+}, {
+  name: '上方缩回',
+  value: 'slide-up',
+  direction: 'leave',
+  type: '伸缩'
+}, {
+  name: '下方展开',
+  value: 'slide-down',
+  direction: 'enter',
+  type: '伸缩'
+}, {
+  name: '下方缩回',
+  value: 'slide-down',
+  direction: 'leave',
+  type: '伸缩'
+}, {
+  name: '左方展开',
+  value: 'slide-left',
+  direction: 'enter',
+  type: '伸缩'
+}, {
+  name: '左方缩回',
+  value: 'slide-left',
+  direction: 'leave',
+  type: '伸缩'
+}, {
+  name: '右方展开',
+  value: 'slide-right',
+  direction: 'enter',
+  type: '伸缩'
+}, {
+  name: '右方缩回',
+  value: 'slide-right',
+  direction: 'leave',
+  type: '伸缩'
+}]]);
+motions = motions.concat([[{
+  name: '摇摆',
+  value: 'swing',
+  direction: 'enter',
+  type: '其他'
+}]]);
+var leave='-leave';
+var Test = React.createClass({
+  handleChange(e) {
+    var value = e.target.value;
+    if(value){
+      this.demoNode.style.visibility='';
+      cssAnimation(this.demoNode, value, () => {
+        if(value.slice(-leave.length)===leave){
+          this.demoNode.style.visibility='hidden';
+        }
+      });
+    }
+  },
+
+  componentDidMount() {
+    this.demoNode = React.findDOMNode(this.refs.demo);
+  },
+
+  render() {
+    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 <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>
+    </div>;
+  }
+});
+
+React.render(<Test/>, document.getElementById('components-motion-demo-basic'));
+````
+
+<style>
+.motion-container {
+  height: 150px;
+  line-height: 150px;
+  text-align: center;
+  margin-bottom: 20px;
+}
+.motion-example {
+  background: #4AAFDE;
+  width: 140px;
+  height: 140px;
+  line-height: 140px;
+  font-size: 18px;
+  color: #fff;
+  text-align: center;
+  display: inline-block !important;
+  border-radius: 8px;
+  font-weight: bold;
+}
+.motion-select {
+  text-align: center;
+}
+.code-boxes-col-2-1 {
+  width:100%;
+}
+</style>

components/motion/index.md

@@ -6,3 +6,20 @@
 
 ---
 
+
+## 组件的动画
+
+通过设置组件的 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`                                      |
+

components/pagenation/index.md

@@ -5,22 +5,9 @@
 
 ---
 
-游学远方 习礼知书广人网
+采用分页的形式分隔长列表，每次只加载一个页面。
 
-原是女身暗掩装
+## 何时使用
 
-校有规训令确 不允许巾帼求学
+- 当加载/渲染所有数据将花费很多时间时；
-
+- 可切换页码浏览数据。
-淑贤女子属深闺居暗房
-
-人在远方 处身书斋感迷茫
-
-尤幸与山伯结党
-
-夜唱诗昼画作 赏雨看星说文学
-
-热情暗生不可自抗
-
-怕坦率将心声交代 怕草率泄露祝英台
-
-若擦肩强避开 然後视线骤改 不敢笑逐颜开

components/popconfirm/demo/basic.md

@@ -0,0 +1,22 @@
+# 基本
+
+- order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+var Popconfirm = antd.Popconfirm;
+
+function confirm() {
+  console.log('点击了确定');
+}
+
+React.render(
+  <Popconfirm title="确定要删除这个任务吗？" onConfirm={confirm}>
+    <a href="javascript:;">删除</a>
+  </Popconfirm>
+, document.getElementById('components-popconfirm-demo-basic'));
+````
+

components/popconfirm/demo/placement.md

@@ -0,0 +1,37 @@
+# 位置
+
+- order: 1
+
+位置有四个方向。
+
+---
+
+````jsx
+var Popconfirm = antd.Popconfirm;
+var text = '确认文案';
+
+function confirm() {
+  console.log('点击了确定');
+}
+
+React.render(<div>
+  <Popconfirm placement="left" title={text} onConfirm={confirm}>
+    <a href="javascript:;">左边</a>
+  </Popconfirm>
+  <Popconfirm placement="right" title={text} onConfirm={confirm}>
+    <a href="javascript:;">右边</a>
+  </Popconfirm>
+  <Popconfirm placement="top" title={text} onConfirm={confirm}>
+    <a href="javascript:;">上边</a>
+  </Popconfirm>
+  <Popconfirm placement="bottom" title={text} onConfirm={confirm}>
+    <a href="javascript:;">下边</a>
+  </Popconfirm>
+</div>, document.getElementById('components-popconfirm-demo-placement'));
+````
+
+<style>
+.code-box-demo .ant-popover-wrap > a {
+  margin-right: 1em;
+}
+</style>

components/popconfirm/index.jsx

@@ -0,0 +1,67 @@
+'use strict';
+
+import React from 'react';
+import Tooltip from 'rc-tooltip';
+const prefixCls = 'ant-popover';
+
+export default React.createClass({
+  getInitialState() {
+    return {
+      visible: false
+    };
+  },
+  getDefaultProps() {
+    return {
+      transitionName: '',
+      placement: 'top',
+      trigger: 'click',
+      onConfirm: function() {},
+      onCancel: function() {}
+    };
+  },
+  confirm: function() {
+    this.props.onConfirm.call(this);
+    this.setState({
+      visible: false
+    });
+  },
+  cancel: function() {
+    this.props.onCancel.call(this);
+    this.setState({
+      visible: false
+    });
+  },
+  render() {
+    const overlay = <div>
+      <div className={prefixCls + '-content'}>
+        <p className={prefixCls + '-message'}>
+          <i className="anticon anticon-exclamation-circle"></i>
+          {this.props.title}
+        </p>
+        <div className={prefixCls + '-buttons'}>
+          <button onClick={this.confirm} className="ant-btn ant-btn-primary ant-btn-sm">确 定</button>
+          <button onClick={this.cancel} className="ant-btn ant-btn-sm">取 消</button>
+        </div>
+      </div>
+    </div>;
+
+    const transitionName = ({
+      top: 'zoom-down',
+      bottom: 'zoom-up',
+      left: 'zoom-right',
+      right: 'zoom-left'
+    })[this.props.placement];
+
+    return (
+      <Tooltip placement={this.props.placement}
+        prefixCls={prefixCls}
+        renderPopupToBody={false}
+        transitionName={transitionName}
+        visible={this.state.visible}
+        trigger={this.props.trigger}
+        overlay={overlay}>
+        {this.props.children}
+      </Tooltip>
+    );
+  }
+});

components/popconfirm/index.md

@@ -5,22 +5,20 @@
 
 ---
 
-游学远方 习礼知书广人网
+点击元素，弹出气泡式的确认框。
 
-原是女身暗掩装
+## 何时使用
 
-校有规训令确 不允许巾帼求学
+目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。
 
-淑贤女子属深闺居暗房
+和 `confirm` 弹出的全屏居中模态对话框相比，交互形式更轻量。
 
-人在远方 处身书斋感迷茫
 
-尤幸与山伯结党
+## API
 
-夜唱诗昼画作 赏雨看星说文学
+| 参数      | 说明                                     | 类型          | 默认值 |
-
+|-----------|------------------------------------------|---------------|--------|
-热情暗生不可自抗
+| placement | 气泡框位置，可选 `top/left/right/bottom` | string        | top    |
-
+| title     | 确认框的描述                             | string        | 无     |
-怕坦率将心声交代 怕草率泄露祝英台
+| onConfirm | 点击确认的回调                           | function      | 无     |
-
+| onCancel  | 卡片内容                                 | function      | 无     |
-若擦肩强避开 然後视线骤改 不敢笑逐颜开

components/popover/demo/placement.md

@@ -35,4 +35,3 @@ React.render(<div>
   margin-right: 1em;
 }
 </style>
-

components/popover/index.jsx

@@ -13,7 +13,7 @@ export default React.createClass({
     };
   },
   render() {
-    var overlay = <div>
+    const overlay = <div>
       <div className={prefixCls + '-title'}>
         {this.props.title}
       </div>

components/slider/index.md

@@ -0,0 +1,12 @@
+# Slider
+
+- category: Components
+- chinese: 滑动输入条
+
+---
+
+滑动型输入器，展示当前值和可选范围。
+
+## 何时使用
+
+当用户需要在数值区间/自定义区间内进行选择时，输入值可为连续或离散值。

components/step/index.md

@@ -1,6 +0,0 @@
-# Step
-
-- category: Components
-- chinese: 步骤
-
----

components/steps/demo/custom-icon.md

@@ -0,0 +1,36 @@
+# 自定义图标步进条
+
+- order: 2
+
+通过设置`Steps.Step`的`icon`属性，可以启用自定义图标。
+
+---
+
+<style>
+.my-step-icon {
+  width: 35px;
+  height: 35px;
+  font-size: 35px;
+  line-height: 1;
+  position: relative;
+  top: -9px;
+}
+.my-step-icon > img {
+  width: 45px;
+  height: 45px;
+}
+</style>
+
+````jsx
+var Steps = antd.Steps;
+var Step = Steps.Step;
+var container = document.getElementById('components-steps-demo-custom-icon');
+var imgIcon = <div className='my-step-icon'><img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg'/></div>
+
+
+React.render(<Steps>
+  <Step status='finish' title='步骤1' icon={<div className='my-step-icon'><span className='anticon anticon-cloud'></span></div>}></Step>
+  <Step status='process' title='步骤2' icon={imgIcon}></Step>
+  <Step status='wait' title='步骤3' icon={<div className='my-step-icon'><span className='anticon anticon-github'></span></div>}></Step>
+</Steps>, container);
+````

components/steps/demo/simple.md

@@ -0,0 +1,40 @@
+# 基本用法
+
+- order: 0
+
+简单的步骤条。
+
+---
+
+````jsx
+var Steps = antd.Steps;
+var Step = Steps.Step;
+var container = document.getElementById('components-steps-demo-simple');
+
+var steps = [{
+  status: 'finish',
+  title: '已完成',
+  description: '这里是多信息的描述啊'
+}, {
+  status: 'process',
+  title: '进行中',
+  description: '这里是多信息的耶哦耶哦哦耶哦耶哦耶哦耶哦耶'
+}, {
+  status: 'wait',
+  title: '待运行',
+  description: '这里是多信息的描述啊描述啊描述啊'
+}, {
+  status: 'wait',
+  title: '待运行',
+  description: '这里是多信息的描述啊'
+}].map(function(s, i) {
+  return (<Step
+    key={i}
+    status={s.status}
+    title={s.title}
+    description={s.description}></Step>
+  );
+});
+
+React.render(<Steps>{steps}</Steps>, container);
+````

components/steps/demo/small-size.md

@@ -0,0 +1,35 @@
+# 迷你版
+
+- order: 1
+
+迷你版的步进条，通过设置`<Steps size='small'>`启用.
+
+---
+
+````jsx
+var Steps = antd.Steps;
+var Step = Steps.Step;
+var container = document.getElementById('components-steps-demo-small-size');
+
+var steps = [{
+  status: 'finish',
+  title: '已完成'
+}, {
+  status: 'process',
+  title: '进行中'
+}, {
+  status: 'wait',
+  title: '待运行'
+}, {
+  status: 'wait',
+  title: '待运行'
+}].map(function(s, i) {
+  return (<Step
+    key={i}
+    status={s.status}
+    title={s.title}>
+  </Step>);
+});
+
+React.render(<Steps size="small">{steps}</Steps>, container);
+````

components/steps/demo/step-next.md

@@ -0,0 +1,71 @@
+# 切换到下一步
+
+- order: 3
+
+随机生成3~6个步骤，初始随机进行到其中一个步骤。
+
+---
+
+<style>
+.my-step-form {
+  width: 100%;
+}
+.my-step-form > div {
+  margin-bottom: 20px;
+}
+.my-step-container {
+  width: 100%;
+}
+</style>
+
+````jsx
+var container = document.getElementById('components-steps-demo-step-next');
+var steps = (function generateRandomSteps() {
+  var n = Math.floor(Math.random() * 3) + 3;
+  var arr = [];
+  for (var i = 0; i < n; i++ ) {
+    arr.push({
+      title: '步骤' + (i+1)
+    });
+  }
+  return arr;
+})();
+
+var MyForm = React.createClass({
+  getInitialState() {
+    return {
+      currentStep: Math.floor(Math.random() * steps.length)
+    }
+  },
+  nextStep() {
+    var s = this.state.currentStep + 1;
+    if (s === steps.length) {
+      s = 0;
+    }
+    this.setState({
+      currentStep: s
+    });
+  },
+  render() {
+    var cs = this.state.currentStep;
+    return (<form className='my-step-form'>
+      <div>当前正在执行第{cs + 1}步</div>
+      <div className='my-step-container'><Steps>
+        {steps.map(function(s, i) {
+          return <Steps.Step
+            key={i}
+            status={cs === i ? 'process' : (cs > i ? 'finish' : 'wait')}
+            title={s.title}
+            ></Steps.Step>
+        })}
+      </Steps></div>
+      <div>表单输入A：<input /></div>
+      <div>表单输入B：<input /></div>
+      <div>表单输入C：<input /></div>
+      <div><span className='ant-btn' onClick={this.nextStep}>下一步</span></div>
+    </form>)
+  }
+});
+
+React.render(<MyForm></MyForm>, container);
+````

components/steps/index.jsx

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+var Steps = require('rc-steps');
+
+var AntSteps = React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'ant-steps',
+      size: 'default'
+    };
+  },
+  render() {
+    return (<Steps size={this.props.size} prefixCls={this.props.prefixCls}>
+      {this.props.children}
+    </Steps>);
+  }
+});
+AntSteps.Step = Steps.Step;
+
+module.exports = AntSteps;

components/steps/index.md

@@ -0,0 +1,39 @@
+# Steps
+
+- category: Components
+- chinese: 步骤条
+- order: 8
+- cols: 1
+
+---
+
+引导用户按照流程完成任务的导航条。
+
+## 何时使用
+
+当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。
+
+## API
+
+### Steps
+
+步进条的整体
+
+| 参数      | 说明                                     | 类型       |  可选值 |默认值 |
+|-----------|------------------------------------------|------------|-------|--------|
+|  size | 可选参数，指定大小（目前只支持普通和迷你两种大小） | string    |  small, default | default    |
+
+### Steps.Step
+
+步进条的每一个步
+
+| 参数      | 说明                                     | 类型       |  可选值 |默认值 |
+|-----------|------------------------------------------|------------|-------|--------|
+|  status | 必要参数，指定状态 | string    |  wait, process, finish | 无    |
+|  title   | 必要参数，标题 | string/jsx | 无 | 无     |
+|  description | 可选参数，步骤的详情描述 | string/jsx | 无 | 空  |
+|  icon    | 可选参数，步骤的Icon。如果不指定，则使用默认的样式。 | string/jsx | 无  | 空 |
+
+## Todo
+
+* 竖状步进条

components/switch/index.md

@@ -0,0 +1,13 @@
+# Switch
+
+- category: Components
+- chinese: 开关
+
+---
+
+开关选择器。
+
+## 何时使用
+
+- 需要表示开关状态/两种状态之间的切换时；
+- 和 `checkbox `的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。

components/table/index.md

@@ -1,26 +1,13 @@
 # Table
 
 - category: Components
-- chinese: 数据表格
+- chinese: 表格
 
 ---
 
-游学远方 习礼知书广人网
+展示行列数据。
 
-原是女身暗掩装
+## 何时使用
 
-校有规训令确 不允许巾帼求学
+- 当有大量结构化的数据需要展现时；
-
+- 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。
-淑贤女子属深闺居暗房
-
-人在远方 处身书斋感迷茫
-
-尤幸与山伯结党
-
-夜唱诗昼画作 赏雨看星说文学
-
-热情暗生不可自抗
-
-怕坦率将心声交代 怕草率泄露祝英台
-
-若擦肩强避开 然後视线骤改 不敢笑逐颜开

index.js

@@ -10,7 +10,16 @@ var antd = {
   Progress: require('./components/progress'),
   Popover: require('./components/popover'),
   Select: require('./components/select'),
-  confirm: require('./components/modal/confirm')
+  Breadcrumb: require('./components/breadcrumb'),
+  Popconfirm: require('./components/popconfirm'),
+  confirm: require('./components/modal/confirm'),
+  Steps: require('./components/steps'),
+  InputNumber: require('./components/input-number'),
+  cssAnimation: require('css-animation')
 };
 
-module.exports = window.antd = antd;
+module.exports = antd;
+
+if (typeof window !== undefined) {
+  window.antd = antd;
+}

package.json

@@ -12,18 +12,22 @@
     "url": "https://github.com/ant-design/ant-design/issues"
   },
   "dependencies": {
+    "css-animation": "~1.0.3",
     "gregorian-calendar": "~3.0.0",
     "gregorian-calendar-format": "~3.0.1",
-    "rc-calendar": "~3.9.0",
+    "rc-calendar": "~3.10.0",
-    "rc-dialog": "~4.3.2",
+    "rc-dialog": "~4.3.5",
-    "rc-dropdown": "~1.0.2",
+    "rc-dropdown": "~1.1.1",
+    "rc-input-number": "~2.0.0",
     "rc-menu": "~3.4.0",
     "rc-progress": "~1.0.0",
-    "rc-select": "~3.5.0",
+    "rc-select": "~4.0.0",
+    "rc-steps": "~1.1.0",
     "rc-tabs": "~5.1.0",
-    "rc-tooltip": "~2.1.1"
+    "rc-tooltip": "~2.2.3"
   },
   "devDependencies": {
+    "babel": "~5.6.14",
     "babel-core": "~5.4.7",
     "babel-loader": "~5.1.3",
     "buildbranch": "0.0.3",
@@ -44,7 +48,9 @@
     "webpack-dev-middleware": "~1.0.11"
   },
   "scripts": {
+    "babel": "rm -rf lib && babel components --out-dir lib",
     "build": "npm run clean && webpack && nico build",
+    "pub": "npm run babel && npm publish && tnpm sync antd",
     "start": "npm run clean && nico server --watch",
     "clean": "rm -rf _site",
     "deploy": "npm run build && node deploy.js",

site/templates/code.html

@@ -3,7 +3,7 @@
     <div id="{{post.meta.id}}"></div>
     {{ post.html }}
   </div>
-  <div class="code-box-meta">
+  <div class="code-box-meta markdown">
     <div class="code-box-title">{{ post.title }}</div>
     {{ post.meta.description }}
     <span class="collapse anticon anticon-circle-o-right"></span>

site/templates/component.html

@@ -6,6 +6,32 @@
 
 {% block scripts %}
 <script src="/dist/antd.js"></script>
+<script>
+window.require = function(path) {
+  var result = window;
+  if (path.indexOf('antd') < 0 ||
+      path.indexOf('antd/components/') < 0) {
+    throw 'There should not have modules here 1.';
+  }
+  var namespaces = path.split('/');
+  namespaces.forEach(function(key, i) {
+    if (i === namespaces.length - 1) {
+      key = capitalizeFirstLetter(key);
+    }
+    if (key !== 'components') {
+      if (result[key]) {
+        result = result[key];
+      } else {
+        throw 'There should not have modules here 2.';
+      }
+    }
+  });
+  function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+  }
+  return result;
+};
+</script>
 {% endblock %}
 
 {% block aside %}

site/templates/demos.html

@@ -10,16 +10,25 @@
 </h2>
 <div class="code-boxes clearfix">
   {%- set items = resource.pages|find_demo_in_component(post.meta.directory) %}
-  <div class="code-boxes-col">
+  {%- if post.meta.cols == 1 %}
+    <div class="code-boxes-col-1-1">
+      {%- for item in items %}
+      {%- set post = item.meta.filepath|parsePost %}
+      {%- include "code.html" %}
+      {%- endfor %}
+    </div>
+  {%- else %}
+  <div class="code-boxes-col-2-1">
     {%- for item in items|odd %}
     {%- set post = item.meta.filepath|parsePost %}
     {%- include "code.html" %}
     {%- endfor %}
   </div>
-  <div class="code-boxes-col">
+  <div class="code-boxes-col-2-1">
     {%- for item in items|even %}
     {%- set post = item.meta.filepath|parsePost %}
     {%- include "code.html" %}
     {%- endfor %}
   </div>
+  {%- endif %}
 </div>

site/templates/layout.html

@@ -1,64 +1,63 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <meta charset="utf-8">
+    <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <meta name="format-detection" content="telephone=no">
+    <meta name="format-detection" content="telephone=no">
-  <title>{% block title %}{{ config.site.name }} - {{ config.site.description }}{% endblock %}</title>
+    <title>{% block title %}{{ config.site.name }} - {{ config.site.description }}{% endblock %}</title>
-  <link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
+    <link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
-  <link rel="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
+    <link rel="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
-  <link rel="stylesheet" href="/static/normalize.css">
+    <link rel="stylesheet" href="/static/normalize.css">
-  {% block styles %}{% endblock %}
+    {% block styles %}{% endblock %}
-  <link rel="stylesheet" href="/static/style.css">
+    <link rel="stylesheet" href="/static/style.css">
-  <link rel="stylesheet" href="/static/tomorrow.css">
+    <link rel="stylesheet" href="/static/tomorrow.css">
-  <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
+    <script src="https://a.alipayobjects.com/??jquery/jquery/1.11.1/jquery.js,es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.js,bluebird/2.9.30/bluebird.js"></script>
-  <!-- react -->
+    <script src="/static/script.js"></script>
-  <script src="https://a.alipayobjects.com/react/0.13.2/react.js"></script>
+    {% block scripts %}{% endblock %}
-  <script src="/static/script.js"></script>
-  {% block scripts %}{% endblock %}
 </head>
 <body {% block bodyAttribute %}{% endblock %}>
-  <header id="header">
+<header id="header">
     <a class="logo" href="/">
-      <img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
+        <img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
-      {{ config.site.name }}
+        {{ config.site.name }}
     </a>
+
     <div class="search">
-      <form>
+        <form>
-        <input type="text" placeholder="search">
+            <input type="text" placeholder="search">
-        <button type="submit"></button>
+            <button type="submit"></button>
-      </form>
+        </form>
     </div>
     <nav class="nav">
         <span class="bar"></span>
-      <ul>
+        <ul>
-        <li class="{%- if post.meta.filepath === 'README.md' %}current{%- endif %}">
+            <li class="{%- if post.meta.filepath === 'README.md' %}current{%- endif %}">
-          <a href="/">首页</a>
+                <a href="/">首页</a>
-        </li>
+            </li>
-        <li class="{%- if post.meta.category === 'start' %}current{%- endif %}">
+            <li class="{%- if post.meta.category === 'start' %}current{%- endif %}">
-          <a href="/docs/introduce">上手</a>
+                <a href="/docs/introduce">上手</a>
-        </li>
+            </li>
-        <li class="{%- if post.meta.template === 'component' %}current{%- endif %}">
+            <li class="{%- if post.meta.template === 'component' %}current{%- endif %}">
-          <a href="/components">组件</a>
+                <a href="/components">组件</a>
-        </li>
+            </li>
-        <li class="{%- if post.filename === 'design' %}current{%- endif %}">
+            <li class="{%- if post.filename === 'design' %}current{%- endif %}">
-          <a class="disabled" href="/docs/design">设计</a>
+                <a class="disabled" href="/docs/design">设计</a>
-        </li>
+            </li>
-        <li class="{%- if post.filename === 'modes' %}current{%- endif %}">
+            <li class="{%- if post.filename === 'modes' %}current{%- endif %}">
-          <a class="disabled" href="/docs/modes">模式</a>
+                <a class="disabled" href="/docs/modes">模式</a>
-        </li>
+            </li>
-        <li class="{%- if post.filename === 'cases' %}current{%- endif %}">
+            <li class="{%- if post.filename === 'cases' %}current{%- endif %}">
-          <a class="disabled" href="/docs/cases">案例</a>
+                <a class="disabled" href="/docs/cases">案例</a>
-        </li>
+            </li>
-      </ul>
+        </ul>
     </nav>
-  </header>
+</header>
-  <div class="main-wrapper">
+<div class="main-wrapper">
     {% block aside %}{% endblock %}
     {% block content %}{% endblock %}
-  </div>
+</div>
-  {%- include "footer.html" %}
+{%- include "footer.html" %}
 </body>
 </html>

site/theme.js

@@ -2,6 +2,7 @@ var _ = require('lodash');
 
 module.exports = function(nico) {
   var exports = {};
+  var categories;
 
   exports.reader = function(post) {
     var filepath = post.meta.filepath.toLowerCase();
@@ -37,15 +38,14 @@ module.exports = function(nico) {
       return ret;
     },
     get_components_categories: function(posts) {
-      return _.uniq(Object.keys(posts).map(function(key) {
+      categories = categories || _.uniq(Object.keys(posts).map(function(key) {
         var item = posts[key];
         if (item.meta.template !== 'component') {
           return;
         }
         return item.meta.category;
-      })).sort(function(a, b) {
+      }));
-        return a - b;
+      return categories;
-      });
     },
     find_demo_in_component: function(pages, directory) {
       var ret = [];

static/style.css

@@ -57,7 +57,7 @@ body {
 }
 
 body {
-  font-family: "Microsoft Yahei", "Hiragino Sans GB", "Microsoft Sans Serif", "WenQuanYi Micro Hei", Arial, sans-serif;
+  font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", "WenQuanYi Micro Hei", sans-serif;
   line-height: 1.5;
   color: #888;
   font-size: 14px;
@@ -399,6 +399,8 @@ footer {
   border-top: 1px solid #eee;
   font-size: 16px;
   background: #fff;
+  position: relative;
+  z-index: 1;
 }
 
 footer ul {
@@ -445,6 +447,7 @@ footer ul li > a {
   background: #F9F9F9;
   padding-top: 10px;
   margin-bottom: 50px;
+  float: left;
 }
 
 .aside-container>ul>li {
@@ -508,13 +511,11 @@ footer ul li > a {
 }
 
 .main-wrapper {
-  display: -webkit-flex;
-  display: flex;
   background: #f9f9f9;
 }
 
 .main-container {
-  width: calc(100% - 260px);
+  margin-left: 260px;
   padding: 30px 40px 120px;
   -webkit-animation: xRightMatrix .5s ease-out;
   animation: xRightMatrix .5s ease-out;
@@ -1638,13 +1639,17 @@ footer ul li > a {
   color: #3B4357;
 }
 
-.code-boxes-col {
+.code-boxes-col-1-1 {
+  width: 75%;
+}
+
+.code-boxes-col-2-1 {
   width: 50%;
   float: left;
   padding-right: 15px;
 }
 
-.code-boxes-col:last-child {
+.code-boxes-col-2-1:last-child {
   padding-right: 0;
 }
 
@@ -1681,6 +1686,7 @@ footer ul li > a {
   padding: 12px 15px;
   border-radius: 0 0 6px 6px;
   transition: background-color 0.4s ease;
+  width: 100%;
 }
 
 .code-box-meta h4,
@@ -1731,6 +1737,7 @@ footer ul li > a {
   transform: rotate(90deg);
   transition: all 0.3s ease;
   color: #999;
+  background: #fff;
 }
 
 .code-box.expand .collapse {

style/components/breadcrumb.less

@@ -0,0 +1,30 @@
+@breadcrumbPrefixCls: ant-breadcrumb;
+
+.@{breadcrumbPrefixCls} {
+  color: #999;
+  font-size: 12px;
+
+  a&-link {
+    color: #666;
+  }
+
+  > span:last-child {
+    font-weight: bold;
+    color: #666;
+  }
+
+  &-slash {
+    margin: 0 8px;
+    color: #d9d9d9;
+  }
+
+  .anticon {
+    font-size: 14px;
+    position: relative;
+    top: -1px;
+  }
+
+  .anticon + span {
+    margin-left: 6px;
+  }
+}

style/components/dialog/Dialog.less

@@ -44,7 +44,35 @@
     opacity: .2;
     text-decoration: none;
 
+    &-x {
+      position: absolute;
+      display: inline-block;
+      font-style: normal;
+      vertical-align: baseline;
+      text-align: center;
+      text-transform: none;
+      text-rendering: auto;
+      // 更好地渲染字体
+      -webkit-font-smoothing: antialiased;
+      -webkit-text-stroke-width: 0px;
+      -moz-osx-font-smoothing: grayscale;
+      width: 12px;
+      height: 12px;
+      font-size: 12px;
+      line-height: 12px;
+      color:#000;
+      top:18px;
+      right: 18px;
+
+      &:before {
+        content:"\e61e";
+        display: block;
+        font-family: "anticon" !important;
+      }
+    }
+
     &:hover {
+      color:#000;
       opacity: 1;
       filter: alpha(opacity=100);
       text-decoration: none;

style/components/index.less

@@ -11,3 +11,6 @@
 @import "form";
 @import "loading";
 @import "progress";
+@import "steps";
+@import "breadcrumb";
+@import "inputNumber";

style/components/inputNumber.less

@@ -0,0 +1,115 @@
+@inputNumberPrefixCls: ant-input-number;
+
+@import "../mixins/iconfont";
+
+.@{inputNumberPrefixCls} {
+  margin: 0;
+  padding: 0;
+  line-height: 26px;
+  font-size: 12px;
+  height: 26px;
+  display: inline-block;
+  vertical-align: middle;
+  border: 1px solid #D9D9D9;
+  border-radius: 5px;
+
+  &-handler {
+    text-align: center;
+    line-height: 12px;
+    height: 12px;
+    overflow: hidden;
+  }
+
+  &-handler-up-inner, &-handler-down-inner {
+    color: #666666;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  &:hover {
+    border-color: #23c0fa;
+
+    .@{inputNumberPrefixCls}-handler-up, .@{inputNumberPrefixCls}-handler-wrap {
+      border-color: #23c0fa;
+    }
+  }
+
+  &-disabled:hover {
+    border-color: #d9d9d9;
+
+    .@{inputNumberPrefixCls}-handler-up, .@{inputNumberPrefixCls}-handler-wrap {
+      border-color: #d9d9d9;
+    }
+  }
+
+  &-input-wrap {
+    overflow: hidden;
+    height: 26px;
+  }
+
+  &-input {
+    width: 100%;
+    text-align: center;
+    outline: 0;
+    -moz-appearance: textfield;
+    line-height: 26px;
+    height: 24px;
+    transition: all 0.3s ease;
+    color: #666666;
+    border: 0;
+    border-radius: 5px;
+    padding: 0;
+  }
+
+  &-handler-wrap {
+    float: right;
+    border-left: 1px solid #D9D9D9;
+    width: 20px;
+    height: 26px;
+  }
+
+  &-handler-up {
+    border-bottom: 1px solid #D9D9D9;
+    &-inner {
+      .iconfont-mixin();
+      top:-2px;
+      &:before {
+        content: "\e611";
+        transform: rotate(270deg) scale(0.8);
+      }
+    }
+  }
+
+  &-handler-down {
+    &-inner {
+      .iconfont-mixin();
+      &:before {
+        content: "\e611";
+        transform: rotate(90deg) scale(0.8);
+      }
+    }
+  }
+
+  .handler-disabled() {
+    opacity: 0.72;
+    &:hover {
+      color: #999;
+      border-color: #d9d9d9;
+    }
+  }
+
+  &-handler-down-disabled, &-handler-up-disabled {
+    .handler-disabled();
+  }
+
+  &-disabled {
+    .@{inputNumberPrefixCls}-input {
+      opacity: 0.72;
+      cursor: not-allowed;
+      background-color: #f3f3f3;
+    }
+    .@{inputNumberPrefixCls}-handler {
+      .handler-disabled();
+    }
+  }
+}

style/components/popover.less

@@ -123,23 +123,22 @@
     padding: 8px;
   }
 
-  &-descrition {
+  &-message {
-    [icon] {
+    padding: 8px 8px 12px 8px;
+    font-size: 14px;
+    .anticon {
       font-size: 16px;
-      margin-right: 2px;
+      margin-right: 6px;
       line-height: 18px;
-    }
+      color: #FC8C6E;
-    [icon='warn-circle'] {
-      color: #F9C35A;
     }
   }
 
   &-buttons {
     text-align: right;
-    margin-top: 12px;
+    margin-bottom: 8px;
-
     button {
-      margin-left: 2px;
+      margin-left: 5px;
     }
   }
 

style/components/steps.less

@@ -0,0 +1,170 @@
+@import "../mixins/index";
+@stepsPrefixClass: ~"@{css-prefix}steps";
+
+@active-color: #3fc7fa;
+@wait-color: #e9e9e9;
+
+.transition(@transition) {
+  -webkit-transition: @transition;
+  -o-transition: @transition;
+  transition: @transition;
+}
+
+.@{stepsPrefixClass} {
+  font-size: 0;
+  width: 100%;
+  line-height: 1.5;
+
+  .@{stepsPrefixClass}-item {
+    position: relative;
+    display: inline-block;
+
+    &.@{stepsPrefixClass}-status-wait {
+      .@{stepsPrefixClass}-head {
+        border-color: @wait-color;
+        background-color: #fff;
+
+        > .@{stepsPrefixClass}-icon {
+          color: @wait-color;
+        }
+      }
+    }
+    &.@{stepsPrefixClass}-status-process {
+      .@{stepsPrefixClass}-head {
+        border-color: @active-color;
+        background-color: @active-color;
+
+        > .@{stepsPrefixClass}-icon {
+          color: #fff;
+        }
+      }
+    }
+    &.@{stepsPrefixClass}-status-finish {
+      .@{stepsPrefixClass}-head {
+        border-color: @active-color;
+        background-color: #fff;
+        > .@{stepsPrefixClass}-icon {
+          color: @active-color;
+        }
+      }
+    }
+
+    &.@{stepsPrefixClass}-custom {
+      .@{stepsPrefixClass}-head {
+        background: none;
+        border: 0;
+      }
+      &.@{stepsPrefixClass}-status-process {
+        .@{stepsPrefixClass}-title {
+          color: @active-color;
+        }
+      }
+    }
+
+  }
+
+  .@{stepsPrefixClass}-head, .@{stepsPrefixClass}-main, .@{stepsPrefixClass}-tail {
+    display: inline-block;
+    vertical-align: top;
+
+  }
+  .@{stepsPrefixClass}-head {
+    border:2px solid @wait-color;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    border-radius: 24px;
+    font-size: 13px;
+    margin-right: 12px;
+    .transition(background-color 0.1s ease);
+    .transition(border-color 0.1s ease);
+
+    > .@{stepsPrefixClass}-icon {
+      line-height: 1;
+      display: inline-block;
+      vertical-align: text-top;
+      color: #3fc7fa;
+      position: relative;
+    }
+  }
+  .@{stepsPrefixClass}-main {
+    max-width: 75px;
+    margin-top: 3px;
+  }
+  .@{stepsPrefixClass}-title {
+    font-size: 14px;
+    margin-bottom: 4px;
+    color: #666;
+    font-weight: bold;
+  }
+  .@{stepsPrefixClass}-description {
+    font-size: 12px;
+    color: #999;
+  }
+  .@{stepsPrefixClass}-tail {
+    width: 0;
+    position: relative;
+    top: 12px;
+    padding:0 10px;
+    > i {
+      display: inline-block;
+      background: @wait-color;
+      height: 2px;
+      border-radius: 1px;
+      width: 100%;
+    }
+  }
+
+  &.@{stepsPrefixClass}-small {
+    .@{stepsPrefixClass}-head {
+      border:1px solid @wait-color;
+      width: 18px;
+      height: 18px;
+      line-height: 18px;
+      text-align: center;
+      border-radius: 18px;
+      font-size: 10px;
+      margin-right: 10px;
+
+    }
+    .@{stepsPrefixClass}-main {
+      max-width: 75px;
+      margin-top: 0;
+    }
+    .@{stepsPrefixClass}-title {
+      font-size: 12px;
+      margin-bottom: 4px;
+      color: #666;
+      font-weight: bold;
+    }
+    .@{stepsPrefixClass}-description {
+      font-size: 10px;
+      color: #999;
+    }
+    .@{stepsPrefixClass}-tail {
+      top: 8px;
+      padding:0 8px;
+      > i {
+        height: 1px;
+        border-radius: 1px;
+        width: 100%;
+      }
+    }
+  }
+
+  &.@{stepsPrefixClass}-init, &.@{stepsPrefixClass}-init.@{stepsPrefixClass}-small {
+    .@{stepsPrefixClass}-tail {
+      padding: 0;
+    }
+  }
+
+  &.@{stepsPrefixClass}-small .@{stepsPrefixClass}-item.@{stepsPrefixClass}-custom .@{stepsPrefixClass}-head, .@{stepsPrefixClass}-item.@{stepsPrefixClass}-custom .@{stepsPrefixClass}-head {
+    width: inherit;
+    height: inherit;
+    line-height: inherit;
+    border-radius: 0;
+    border: 0;
+    background: none;
+  }
+}

style/core/iconfont.less

@@ -1,3 +1,5 @@
+@import "../mixins/iconfont";
+
 // font-face
 // @icon-url： 字体源文件的地址
 @font-face {
@@ -10,22 +12,7 @@
 }
 
 .@{iconfont-css-prefix} {
-  position: relative;
+ .iconfont-mixin();
-  display: inline-block;
-  font-style: normal;
-  vertical-align: baseline;
-  text-align: center;
-  text-transform: none;
-  text-rendering: auto;
-  // 更好地渲染字体
-  -webkit-font-smoothing: antialiased;
-  -webkit-text-stroke-width: 0px;
-  -moz-osx-font-smoothing: grayscale;
-
-  &:before {
-    display: block;
-    font-family: "anticon" !important;
-  }
 }
 // 方向性图标
 .@{iconfont-css-prefix}-step-backward:before          {content:"\e662";}

style/core/motion.less

@@ -1,156 +1,31 @@
-.effect() {
+.motion-common() {
-  animation-duration: 0.25s;
+  animation-duration: .24s;
   animation-fill-mode: both;
   display: block !important;
 }
 
-.zoom-enter {
+.make-motion(@className, @keyframeName) {
-  opacity: 0;
+  .@{className}-enter {
-  .effect();
+    .motion-common();
-  animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+    animation-play-state: paused;
-  animation-play-state: paused;
-}
-
-.zoom-leave {
-  .effect();
-  animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
-  animation-play-state: paused;
-}
-
-.zoom-enter.zoom-enter-active {
-  animation-name: zoomIn;
-  animation-play-state: running;
-}
-
-.zoom-leave.zoom-leave-active {
-  animation-name: zoomOut;
-  animation-play-state: running;
-}
-
-@keyframes zoomIn {
-  0% {
-    opacity: 0;
-    transform-origin: 50% 50%;
-    transform: scale(0, 0);
   }
-  100% {
+  .@{className}-leave {
-    opacity: 1;
+    .motion-common();
-    transform-origin: 50% 50%;
+    animation-play-state: paused;
-    transform: scale(1, 1);
   }
-}
+  .@{className}-enter.@{className}-enter-active {
-@keyframes zoomOut {
+    animation-name: ~"@{keyframeName}In";
-  0% {
+    animation-play-state: running;
-    opacity: 1;
-    transform-origin: 50% 50%;
-    transform: scale(1, 1);
   }
-  100% {
+  .@{className}-leave.@{className}-leave-active {
-    opacity: 0;
+    animation-name: ~"@{keyframeName}Out";
-    transform-origin: 50% 50%;
+    animation-play-state: running;
-    transform: scale(0, 0);
   }
 }
 
-.slide-up-enter {
+@import "motion/fade";
-  .effect();
+@import "motion/move";
-  transform-origin: 0 0;
+@import "motion/other";
-  opacity: 0;
+@import "motion/slide";
-  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+@import "motion/swing";
-  animation-play-state: paused;
+@import "motion/zoom";
-}
-
-.slide-up-leave {
-  .effect();
-  transform-origin: 0 0;
-  opacity: 1;
-  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
-  animation-play-state: paused;
-}
-
-.slide-up-enter.slide-up-enter-active {
-  animation-name: slideUpIn;
-  animation-play-state: running;
-}
-
-.slide-up-leave.slide-up-leave-active {
-  animation-name: slideUpOut;
-  animation-play-state: running;
-}
-
-@keyframes slideUpIn {
-  0% {
-    opacity: 0;
-    transform-origin: 0% 0%;
-    transform: scaleY(0);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 0% 0%;
-    transform: scaleY(1);
-  }
-}
-@keyframes slideUpOut {
-  0% {
-    opacity: 1;
-    transform-origin: 0% 0%;
-    transform: scaleY(1);
-  }
-  100% {
-    opacity: 0;
-    transform-origin: 0% 0%;
-    transform: scaleY(0);
-  }
-}
-
-.fade-enter {
-  opacity: 0;
-  .effect();
-  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
-  animation-play-state: paused;
-}
-
-.fade-leave {
-  .effect();
-  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
-  animation-play-state: paused;
-}
-
-.fade-enter.fade-enter-active {
-  animation-name: fadeIn;
-  animation-play-state: running;
-}
-
-.fade-leave.fade-leave-active {
-  animation-name: fadeOut;
-  animation-play-state: running;
-}
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeOut {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes loadingCircle {
-  0% {
-    transform-origin: 50% 50%;
-    transform: rotate(0deg);
-  }
-  100% {
-    transform-origin: 50% 50%;
-    transform: rotate(360deg);
-  }
-} 

style/core/motion/fade.less

@@ -0,0 +1,40 @@
+.fade-enter {
+  opacity: 0;
+  .motion-common();
+  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
+  animation-play-state: paused;
+}
+
+.fade-leave {
+  .motion-common();
+  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
+  animation-play-state: paused;
+}
+
+.fade-enter.fade-enter-active {
+  animation-name: fadeIn;
+  animation-play-state: running;
+}
+
+.fade-leave.fade-leave-active {
+  animation-name: fadeOut;
+  animation-play-state: running;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

style/core/motion/move.less

@@ -0,0 +1,119 @@
+.move-motion(@className, @keyframeName) {
+  .make-motion(@className, @keyframeName);
+  .@{className}-enter {
+    opacity: 0;
+    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+  }
+  .@{className}-leave {
+    animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+  }
+}
+
+.move-motion(move-up, moveUp);
+.move-motion(move-down, moveDown);
+.move-motion(move-left, moveLeft);
+.move-motion(move-right, moveRight);
+
+@keyframes moveDownIn {
+  0% {
+    transform-origin: 0 0;
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes moveDownOut {
+  0% {
+    transform-origin: 0 0;
+    transform: translateY(0%);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+
+@keyframes moveLeftIn {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateX(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes moveLeftOut {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+@keyframes moveRightIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0 0;
+    transform: translateX(100%);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0 0;
+    transform: translateX(0%);
+  }
+}
+
+@keyframes moveRightOut {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+@keyframes moveUpIn {
+  0% {
+    transform-origin: 0 0;
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes moveUpOut {
+  0% {
+    transform-origin: 0 0;
+    transform: translateY(0%);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}

style/core/motion/other.less

@@ -0,0 +1,10 @@
+@keyframes loadingCircle {
+  0% {
+    transform-origin: 50% 50%;
+    transform: rotate(0deg);
+  }
+  100% {
+    transform-origin: 50% 50%;
+    transform: rotate(360deg);
+  }
+}

style/core/motion/slide.less

@@ -0,0 +1,119 @@
+.slide-motion(@className, @keyframeName) {
+  .make-motion(@className, @keyframeName);
+  .@{className}-enter {
+    opacity: 0;
+    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+  }
+  .@{className}-leave {
+    animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+  }
+}
+
+.slide-motion(slide-up, slideUp);
+.slide-motion(slide-down, slideDown);
+.slide-motion(slide-left, slideLeft);
+.slide-motion(slide-right, slideRight);
+
+@keyframes slideUpIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes slideUpOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+  }
+}
+
+@keyframes slideDownIn {
+  0% {
+    opacity: 0;
+    transform-origin: 100% 100%;
+    transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 100% 100%;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes slideDownOut {
+  0% {
+    opacity: 1;
+    transform-origin: 100% 100%;
+    transform: scaleY(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 100% 100%;
+    transform: scaleY(0);
+  }
+}
+
+@keyframes slideLeftIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleX(0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleX(1);
+  }
+}
+
+@keyframes slideLeftOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleX(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleX(0);
+  }
+}
+
+@keyframes slideRightIn {
+  0% {
+    opacity: 0;
+    transform-origin: 100% 0%;
+    transform: scaleX(0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 100% 0%;
+    transform: scaleX(1);
+  }
+}
+
+@keyframes slideRightOut {
+  0% {
+    opacity: 1;
+    transform-origin: 100% 0%;
+    transform: scaleX(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 100% 0%;
+    transform: scaleX(0);
+  }
+}

style/core/motion/swing.less

@@ -0,0 +1,30 @@
+.swing-motion(@className, @keyframeName) {
+  .@{className}-enter {
+    .motion-common();
+    animation-play-state: paused;
+  }
+  .@{className}-enter.@{className}-enter-active {
+    animation-name: ~"@{keyframeName}In";
+    animation-play-state: running;
+  }
+}
+
+.swing-motion(swing, swing);
+
+@keyframes swingIn {
+  0%, 100% {
+    transform: translateX(0px);
+  }
+  20% {
+    transform: translateX(-10px);
+  }
+  40% {
+    transform: translateX(10px);
+  }
+  60% {
+    transform: translateX(-5px);
+  }
+  80% {
+    transform: translateX(5px);
+  }
+}

style/core/motion/zoom.less

@@ -0,0 +1,146 @@
+.zoom-motion(@className, @keyframeName) {
+  .make-motion(@className, @keyframeName);
+  .@{className}-enter {
+    opacity: 0;
+    animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  }
+  .@{className}-leave {
+    animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
+  }
+}
+
+.zoom-motion(zoom, zoom);
+.zoom-motion(zoom-up, zoomUp);
+.zoom-motion(zoom-down, zoomDown);
+.zoom-motion(zoom-left, zoomLeft);
+.zoom-motion(zoom-right, zoomRight);
+
+@keyframes zoomIn {
+  0% {
+    opacity: 0;
+    transform-origin: 50% 50%;
+    transform: scale(0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 50% 50%;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes zoomOut {
+  0% {
+    opacity: 1;
+    transform-origin: 50% 50%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 50%;
+    transform: scale(0, 0);
+  }
+}
+
+@keyframes zoomUpIn {
+  0% {
+    opacity: 0;
+    transform-origin: 50% 0%;
+    transform: scale(0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 50% 0%;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes zoomUpOut {
+  0% {
+    opacity: 1;
+    transform-origin: 50% 0%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 0%;
+    transform: scale(0, 0);
+  }
+}
+
+@keyframes zoomLeftIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 50%;
+    transform: scale(0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0% 50%;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes zoomLeftOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 50%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 0% 50%;
+    transform: scale(0, 0);
+  }
+}
+
+@keyframes zoomRightIn {
+  0% {
+    opacity: 0;
+    transform-origin: 100% 50%;
+    transform: scale(0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 100% 50%;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes zoomRightOut {
+  0% {
+    opacity: 1;
+    transform-origin: 100% 50%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 100% 50%;
+    transform: scale(0, 0);
+  }
+}
+
+@keyframes zoomDownIn {
+  0% {
+    opacity: 0;
+    transform-origin: 50% 100%;
+    transform: scale(0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 50% 100%;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes zoomDownOut {
+  0% {
+    opacity: 1;
+    transform-origin: 50% 100%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 100%;
+    transform: scale(0, 0);
+  }
+}

style/mixins/button.less

@@ -10,11 +10,11 @@
   .button-color(@color; @background; @border);
 
   &:hover {
-    .opacity(.7);
+    .button-color(lighten(@color, 30%, 'relative'); lighten(@background, 30%, 'relative'); lighten(@border, 30%, 'relative'));
   }
   &:active,
   &.active {
-    .opacity(.8);
+    .button-color(lighten(@color, 20%, 'relative'); lighten(@background, 20%, 'relative'); lighten(@border, 20%, 'relative'));
   }
   &:active,
   &.active {
@@ -28,7 +28,6 @@
     &:hover,
     &:active,
     &.active {
-      .opacity(1);
       .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
     }
   }
@@ -120,7 +119,7 @@
   &-lg {
     .button-size(@btn-padding-lg; @btn-font-size-lg; @btn-border-radius-lg);
     > .@{iconfont-css-prefix} {
-    font-size: @btn-font-size-lg + 2;
+      font-size: @btn-font-size-lg + 2;
     }
   }
 
@@ -139,7 +138,7 @@
   &:hover,
   &:active,
   &.active {
-    .button-color(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
+    color: @btn-primary-color;
   }
 }
 
@@ -147,10 +146,12 @@
 .btn-default() {
   .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
 
-  &:hover,
+  &:hover {
+    .button-color(lighten(@primary-color, 30%, 'relative'); @white; lighten(@primary-color, 30%, 'relative'));
+  }
   &:active,
   &.active {
-    .button-color(@primary-color; @white; @primary-color);
+    .button-color(lighten(@primary-color, 20%, 'relative'); @white; lighten(@primary-color, 20%, 'relative'));
   }
 }
 
@@ -158,10 +159,12 @@
 .btn-ghost() {
   .button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
 
-  &:hover,
+  &:hover {
+    .button-color(lighten(@primary-color, 30%, 'relative'); @white; lighten(@primary-color, 30%, 'relative'));
+  }
   &:active,
   &.active {
-    .button-color(@primary-color; @white; @primary-color);
+    .button-color(lighten(@primary-color, 20%, 'relative'); @white; lighten(@primary-color, 20%, 'relative'));
   }
 }
 
@@ -205,16 +208,24 @@
     background-color: @primary-color;
   }
 
-  &:not([disabled]):hover {
+  &:not([disabled]):hover, 
+  &:not([disabled]):active,
+  &:not([disabled]).active {
     > .@{iconfont-css-prefix} {
       color: @btn-primary-color;
     }
   }
 
-  &:not([disabled]):hover:before {
+  &:not([disabled]):hover:before, 
+  &:not([disabled]):active:before,
+  &:not([disabled]).active:before {
     .opacity(1);
     .scale(1, 1);
+  }
 
+  &:not([disabled]):active:before,
+  &:not([disabled]).active:before {
+    background-color: lighten(@primary-color, 20%, 'relative');
   }
 }
 

style/mixins/iconfont.less

@@ -0,0 +1,14 @@
+.iconfont-mixin() {
+  position: relative;
+  display: inline-block;
+  font-style: normal;
+  vertical-align: baseline;
+  text-align: center;
+  text-transform: none;
+  text-rendering: auto;
+
+  &:before {
+    display: block;
+    font-family: "anticon" !important;
+  }
+}

style/themes/default/custom.less

@@ -7,7 +7,7 @@
 // ------ Base & Require ------
 @body-background        : #fff;
 
-@font-family            : "Microsoft Yahei", "Hiragino Sans GB", "Microsoft Sans Serif", "WenQuanYi Micro Hei", Arial, sans-serif;
+@font-family            : Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", "WenQuanYi Micro Hei", sans-serif;
 @code-family            : "PT Mono", Menlo, "Courier New", monospace;
 @text-color             : #666;
 @font-size-base         : 12px;
@@ -72,7 +72,7 @@
 @btn-padding-lg         : 4px 15px 5px 15px;
 @btn-border-radius-lg   : 16px;
 
-@btn-padding-sm         : 1px 15px;
+@btn-padding-sm         : 1px 7px;
 @btn-border-radius-sm   : 11px;
 
 @btn-circle-size        : 28px;