Merge branch 'develop-0.11.0' into component-transfer

* develop-0.11.0: (52 commits) remove unused code improve home js badge can be use like <Badge />, ref #413 fix: `rowKey` should work with Radio #697 update deps remove scripts/clip.js fix ie8 babel bug via es3ify-loader, ref ant-tool/atool-build#28 small change Fix ie8 error caused by clipboard.js Add basic English doc for install update demos update tabs style Add tip, #692 update demo text update background-color of common layout demo update tabs demo update tabs doc Add card tabs on container top update tabs style update card tabs style ...
2024-11-27 20:49:53 +08:00 · 2015-12-21 15:30:25 +08:00 · 2015-12-21 15:30:25 +08:00 · 07387e4ded
commit 07387e4ded
parent 765ce7bb67 b758855186
75 changed files with 962 additions and 718 deletions
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@ -23,31 +23,19 @@ npm install antd

 ## 示例

- 使用全部组件
-
-  ```jsx
-  import { DatePicker } from 'antd';
-  ReactDOM.render(<DatePicker />, mountNode);
-  ```
-
- 按需使用
-
-  ```jsx
-  import DatePicker from 'antd/lib/date-picker';
-  ReactDOM.render(<DatePicker />, mountNode);
-  ```
+```jsx
+import { DatePicker } from 'antd';
+ReactDOM.render(<DatePicker />, mountNode);
+```

 引入样式：

 ```jsx
-// only need to import once in entry module
-import 'antd/lib/index.css';
+import 'antd/lib/index.css';  // or 'antd/style/index.less'
 ```

-```jsx
-// or less for modifyVars
-import 'antd/style/index.less';
-```
+按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd)。
+

 ## 浏览器支持

--- a/README.md
+++ b/README.md
@ -22,31 +22,19 @@ npm install antd

 ## Usage example

- Use all components
-
-  ```jsx
-  import { DatePicker } from 'antd';
-  ReactDOM.render(<DatePicker />, mountNode);
-  ```
-
- Use on demand
-
-  ```jsx
-  import DatePicker from 'antd/lib/date-picker';
-  ReactDOM.render(<DatePicker />, mountNode);
-  ```
+```jsx
+import { DatePicker } from 'antd';
+ReactDOM.render(<DatePicker />, mountNode);
+```

 Import style:

 ```jsx
-// only need to import once in entry module
-import 'antd/lib/index.css';
+import 'antd/lib/index.css';  // or 'antd/style/index.less'
 ```

-```jsx
-// or less for modifyVars
-import 'antd/style/index.less';
-```
+Use components on demand by writing as `import DatePicker from 'antd/lib/date-picker'` or use [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd).
+

 ## Browser Support

--- a/components/badge/ScrollNumber.jsx
+++ b/components/badge/ScrollNumber.jsx
@ -121,7 +121,7 @@ AntScrollNumber.defaultProps = {
  count: null,
  component: 'sup',
  onAnimated: function() {},
-  height: 20
+  height: 18,
 };

 AntScrollNumber.propTypes = {
--- a/components/badge/demo/no-wrapper.md
+++ b/components/badge/demo/no-wrapper.md
@ -0,0 +1,19 @@
+# 独立使用
+
+- order: 0
+
+不包裹任何元素即是独立使用，可自定样式展现。
+
+> 在右上角的 badge 则限定为红色。
+
+---
+
+````jsx
+import { Badge } from 'antd';
+
+ReactDOM.render(<div>
+  <Badge count={25} />
+  <Badge count={4} style={{backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9'}} />
+  <Badge count={109} style={{backgroundColor: '#87d068'}} />
+</div>, document.getElementById('components-badge-demo-no-wrapper'));
+````
--- a/components/badge/index.jsx
+++ b/components/badge/index.jsx
@ -1,6 +1,7 @@
 import React from 'react';
 import Animate from 'rc-animate';
 import ScrollNumber from './ScrollNumber';
+import classNames from 'classnames';

 class AntBadge extends React.Component {
  constructor(props) {
@ -8,10 +9,10 @@ class AntBadge extends React.Component {
  }

  render() {
-    let { count, prefixCls, overflowCount } = this.props;
+    let { count, prefixCls, overflowCount, className, style, children } = this.props;
    const dot = this.props.dot;

-    count = count > overflowCount ? '${overflowCount}+' : count;
+    count = count > overflowCount ? `${overflowCount}+` : count;

    // dot mode don't need count
    if (dot) {
@ -20,18 +21,24 @@ class AntBadge extends React.Component {

    // null undefined "" "0" 0
    const hidden = (!count || count === '0') && !dot;
-    const className = prefixCls + (dot ? '-dot' : '-count');
+    const scrollNumberCls = prefixCls + (dot ? '-dot' : '-count');
+    const badgeCls = classNames({
+      [className]: !!className,
+      [prefixCls]: true,
+      [`${prefixCls}-not-a-wrapper`]: !children,
+    });

    return (
-      <span className={prefixCls} title={count} {...this.props}>
-        {this.props.children}
+      <span className={badgeCls} title={count} {...this.props} style={null}>
+        {children}
        <Animate component=""
          showProp="data-show"
          transitionName={prefixCls + '-zoom'}
          transitionAppear>
          {
            hidden ? null :
-            <ScrollNumber data-show={!hidden} className={className} count={count} />
+              <ScrollNumber data-show={!hidden} className={scrollNumberCls}
+                count={count} style={style} />
          }
        </Animate>
      </span>
--- a/components/badge/index.md
+++ b/components/badge/index.md
@ -20,6 +20,11 @@
 </Badge>
 ```

+
+```jsx
+<Badge count={5} />
+```
+
 | 参数           | 说明                             | 类型       |  可选值 | 默认值 |
 |----------------|----------------------------------|------------|---------|--------|
 | count          | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | Number     |         |        |
--- a/components/checkbox/demo/basic.md
+++ b/components/checkbox/demo/basic.md
@ -8,7 +8,6 @@

 ````jsx
 import { Checkbox } from 'antd';
-const container = document.getElementById('components-checkbox-demo-basic');

 function onChange(e) {
  console.log('checked = ' + e.target.checked);
@ -17,5 +16,5 @@ function onChange(e) {
 ReactDOM.render(<label>
  <Checkbox defaultChecked={false} onChange={onChange} />
  Checkbox
-</label>, container);
+</label>, document.getElementById('components-checkbox-demo-basic'));
 ````
--- a/components/checkbox/demo/controller.md
+++ b/components/checkbox/demo/controller.md
@ -8,7 +8,6 @@

 ````jsx
 import { Checkbox, Button } from 'antd';
-const container = document.getElementById('components-checkbox-demo-controller');

 const App = React.createClass({
  getInitialState() {
@ -56,5 +55,5 @@ const App = React.createClass({
  }
 });

-ReactDOM.render(<App />, container);
+ReactDOM.render(<App />, document.getElementById('components-checkbox-demo-controller'));
 ````
--- a/components/checkbox/demo/disable.md
+++ b/components/checkbox/demo/disable.md
@ -8,11 +8,10 @@ checkbox 不可用。

 ````jsx
 import { Checkbox } from 'antd';
-const container = document.getElementById('components-checkbox-demo-disable');

 ReactDOM.render(<div>
  <Checkbox defaultChecked={false} disabled />
  <br />
  <Checkbox defaultChecked disabled />
-</div>, container);
+</div>, document.getElementById('components-checkbox-demo-disable'));
 ````
--- a/components/form/demo/form-controls.md
+++ b/components/form/demo/form-controls.md
@ -33,7 +33,7 @@ ReactDOM.render(
      label="文本域："
      labelCol={{span: 6}}
      wrapperCol={{span: 14}}>
-      <Input type="textarea" id="control-textarea"/>
+      <Input type="textarea" id="control-textarea" rows="3" />
    </FormItem>

    <FormItem
--- a/components/form/index.md
+++ b/components/form/index.md
@ -71,7 +71,7 @@ Mixin：当表单控件的输入值改变时，更新 formData。
 |  type | 【必须】声明 input 类型，同原生 input 标签的 type 属性 | string  |   | 'text'    |
 |  value | value 值 | any |  | |
 |  id | id | number 或 string |  |   |
-|  size | 控件大小，默认值为 default | string | {'large','default','small'} |  'default' |
+|  size | 控件大小，默认值为 default 。注：标准表单内的输入框大小限制为 large。 | string | {'large','default','small'} |  'default' |
 |  defaultValue | 设置初始默认值 | any |  |  |
 |  disabled | 是否禁用状态，默认为 false | bool |  |  false |
 |  addonBefore | 带标签的 input，设置前置标签 | node |  |   |
--- a/components/icon/index.md
+++ b/components/icon/index.md
@ -120,16 +120,15 @@ const CopyableIcon = React.createClass({
      }, 1000);
    });
  },
-  getCopyCode(type) {
-    return '<Icon type="' + type + '" />';
-  },
  render() {
+    const text = '&lt;Icon type="' + this.props.type + '" /&gt;';
    return (
-      <Clip component="li" data-clipboard-text={this.getCopyCode(this.props.type)}
-        onSuccess={this.onCopied} className={this.state.justCopied ? 'copied' : ''}>
-        <Icon type={this.props.type} />
-        <span className="anticon-class">{this.props.type}</span>
-      </Clip>
+      <CopyToClipboard text={text} onCopy={this.onCopied}>
+        <li className={this.state.justCopied ? 'copied' : ''}>
+          <Icon type={this.props.type} />
+          <span className="anticon-class">{this.props.type}</span>
+        </li>
+      </CopyToClipboard>
    );
  }
 });
--- a/components/modal/confirm.jsx
+++ b/components/modal/confirm.jsx
@ -29,6 +29,7 @@ export default function (props) {
      visible: false
    });
    ReactDOM.unmountComponentAtNode(div);
+    div.parentNode.removeChild(div);
  }

  function onCancel() {
--- a/components/select/index.md
+++ b/components/select/index.md
@ -36,7 +36,7 @@
 | onSearch | 文本框值变化时回调 | function(value: String) |  |
 | placeholder | 选择框默认文字 | string | 无 |
 | searchPlaceholder | 搜索框默认文字 | string | 无 |
-| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | false |
+| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true |
 | optionFilterProp | 输入项过滤对应的 option 属性 | string | value |
 | combobox | 输入框自动提示模式 | boolean | false |
 | size    | 选择框大小，可选 `large` `small`  | String      |      default      |
--- a/components/slider/index.md
+++ b/components/slider/index.md
@ -24,5 +24,6 @@
 | defaultValue      | Number or [Number, Number]| 0 or [0, 0] | 设置初始取值。当 `range` 为 `false` 时，使用 `Number`，否则用 `[Number, Number]`
 | included   | Boolean			| true			| `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列
 | disabled   | Boolean 			| false         | 值为 `true` 时，滑块为禁用状态
+| allowCross | Boolean          | true          | 当 `range` 为 `true` 时，该属性可以设置是否允许两个滑块交换位置。
 | onChange   | Function         | NOOP          | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。
 | tipFormatter | Function       |               | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值。
--- a/components/steps/demo/icon.md
+++ b/components/steps/demo/icon.md
@ -9,11 +9,10 @@
 ````jsx
 import { Steps } from 'antd';
 const Step = Steps.Step;
-const container = document.getElementById('components-steps-demo-icon');

 ReactDOM.render(<Steps>
  <Step status="finish" title="步骤1" icon="cloud" />
  <Step status="process" title="步骤2" icon="apple" />
  <Step status="wait" title="步骤3" icon="github" />
-</Steps>, container);
+</Steps>, document.getElementById('components-steps-demo-icon'));
 ````
--- a/components/steps/demo/simple.md
+++ b/components/steps/demo/simple.md
@ -9,7 +9,6 @@
 ````jsx
 import { Steps } from 'antd';
 const Step = Steps.Step;
-const container = document.getElementById('components-steps-demo-simple');

 const steps = [{
  title: '已完成',
@ -29,5 +28,5 @@ const steps = [{
  );
 });

-ReactDOM.render(<Steps current={1}>{steps}</Steps>, container);
+ReactDOM.render(<Steps current={1}>{steps}</Steps>, document.getElementById('components-steps-demo-simple'));
 ````
--- a/components/steps/demo/small-size.md
+++ b/components/steps/demo/small-size.md
@ -9,7 +9,6 @@
 ````jsx
 import { Steps } from 'antd';
 const Step = Steps.Step;
-const container = document.getElementById('components-steps-demo-small-size');

 const steps = [{
  status: 'finish',
@ -29,5 +28,5 @@ const steps = [{
  );
 });

-ReactDOM.render(<Steps size="small" current={1}>{steps}</Steps>, container);
+ReactDOM.render(<Steps size="small" current={1}>{steps}</Steps>, document.getElementById('components-steps-demo-small-size'));
 ````
--- a/components/steps/demo/status.md
+++ b/components/steps/demo/status.md
@ -9,7 +9,6 @@
 ````jsx
 import { Steps } from 'antd';
 const Step = Steps.Step;
-const container = document.getElementById('components-steps-demo-status');

 const steps = [{
  status: 'finish',
@ -33,5 +32,5 @@ const steps = [{
  );
 });

-ReactDOM.render(<Steps>{steps}</Steps>, container);
+ReactDOM.render(<Steps>{steps}</Steps>, document.getElementById('components-steps-demo-status'));
 ````
--- a/components/steps/demo/step-next.md
+++ b/components/steps/demo/step-next.md
@ -15,7 +15,6 @@
 ````jsx
 import { Steps, Button } from 'antd';
 const Step = Steps.Step;
-const container = document.getElementById('components-steps-demo-step-next');
 const array = Array.apply(null, Array(Math.floor(Math.random() * 3) + 3));
 const steps = array.map(function(item, i) {
  return {
@ -54,5 +53,5 @@ const App = React.createClass({
  }
 });

-ReactDOM.render(<App />, container);
+ReactDOM.render(<App />, document.getElementById('components-steps-demo-step-next'));
 ````
--- a/components/steps/demo/vertical-small.md
+++ b/components/steps/demo/vertical-small.md
@ -9,7 +9,6 @@
 ````jsx
 import { Steps } from 'antd';
 const Step = Steps.Step;
-const container = document.getElementById('components-steps-demo-vertical-small');

 const steps = [{
  title: '已完成',
@ -26,5 +25,6 @@ const steps = [{
  );
 });

-ReactDOM.render(<Steps size="small" direction="vertical" current={1}>{steps}</Steps>, container);
+ReactDOM.render(<Steps size="small" direction="vertical" current={1}>{steps}</Steps>,
+  document.getElementById('components-steps-demo-vertical-small'));
 ````
--- a/components/steps/demo/vertical.md
+++ b/components/steps/demo/vertical.md
@ -9,7 +9,6 @@
 ````jsx
 import { Steps } from 'antd';
 const Step = Steps.Step;
-const container = document.getElementById('components-steps-demo-vertical');

 const steps = [{
  title: '已完成',
@ -29,5 +28,6 @@ const steps = [{
  );
 });

-ReactDOM.render(<Steps direction="vertical" current={1}>{steps}</Steps>, container);
+ReactDOM.render(<Steps direction="vertical" current={1}>{steps}</Steps>,
+  document.getElementById('components-steps-demo-vertical'));
 ````
--- a/components/switch/demo/basic.md
+++ b/components/switch/demo/basic.md
@ -8,11 +8,11 @@

 ````jsx
 import { Switch } from 'antd';
-const container = document.getElementById('components-switch-demo-basic');

 function onChange(checked){
  console.log('switch to ' + checked);
 }

-ReactDOM.render(<Switch defaultChecked={false} onChange={onChange} />, container);
+ReactDOM.render(<Switch defaultChecked={false} onChange={onChange} />,
+  document.getElementById('components-switch-demo-basic'));
 ````
--- a/components/switch/demo/disabled.md
+++ b/components/switch/demo/disabled.md
@ -8,7 +8,6 @@ Switch 失效状态。

 ````jsx
 import { Switch, Button } from 'antd';
-const container = document.getElementById('components-switch-demo-disabled');

 const Test = React.createClass({
  getInitialState() {
@ -31,5 +30,5 @@ const Test = React.createClass({
  }
 });

-ReactDOM.render(<Test />, container);
+ReactDOM.render(<Test />, document.getElementById('components-switch-demo-disabled'));
 ````
--- a/components/switch/demo/text.md
+++ b/components/switch/demo/text.md
@ -8,11 +8,10 @@

 ````jsx
 import { Switch, Icon } from 'antd';
-const container = document.getElementById('components-switch-demo-text');

 ReactDOM.render(<div>
  <Switch checkedChildren="开" unCheckedChildren="关" />
  <span> </span>
  <Switch checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="cross" />} />
-</div>, container);
+</div>, document.getElementById('components-switch-demo-text'));
 ````
--- a/components/table/demo/basic.md
+++ b/components/table/demo/basic.md
@ -12,18 +12,21 @@ import { Table, Icon } from 'antd';
 const columns = [{
  title: '姓名',
  dataIndex: 'name',
+  key: 'name',
  render: function(text) {
    return <a href="#">{text}</a>;
  }
 }, {
  title: '年龄',
-  dataIndex: 'age'
+  dataIndex: 'age',
+  key: 'age',
 }, {
  title: '住址',
-  dataIndex: 'address'
+  dataIndex: 'address',
+  key: 'address',
 }, {
  title: '操作',
-  dataIndex: '',
+  key: 'operation',
  render: function(text, record) {
    return <span>
      <a href="#">操作一</a>
--- a/components/table/demo/locale.md
+++ b/components/table/demo/locale.md
@ -53,7 +53,8 @@ const data = [{
 const locale = {
  filterTitle: 'Filter',
  filterConfirm: 'Confirm',
-  filterReset: 'Reset'
+  filterReset: 'Reset',
+  emptyText: 'No Data',
 };

 ReactDOM.render(
--- a/components/table/demo/row-selection-radio-props.md
+++ b/components/table/demo/row-selection-radio-props.md
@ -23,17 +23,17 @@ const columns = [{
  dataIndex: 'address'
 }];
 const data = [{
-  key: '1',
+  id: '1',
  name: '胡彦斌',
  age: 32,
  address: '西湖区湖底公园1号'
 }, {
-  key: '2',
+  id: '2',
  name: '胡彦祖',
  age: 42,
  address: '西湖区湖底公园1号'
 }, {
-  key: '3',
+  id: '3',
  name: '李大嘴',
  age: 32,
  address: '西湖区湖底公园1号'
@ -56,6 +56,10 @@ const rowSelection = {
  }
 };

-ReactDOM.render(<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
+function rowKey(record) {
+  return record.id;
+}
+
+ReactDOM.render(<Table rowSelection={rowSelection} rowKey={rowKey} columns={columns} dataSource={data} />
 , document.getElementById('components-table-demo-row-selection-radio-props'));
 ````
--- a/components/table/index.jsx
+++ b/components/table/index.jsx
@ -15,7 +15,8 @@ function noop() {
 const defaultLocale = {
  filterTitle: '筛选',
  filterConfirm: '确定',
-  filterReset: '重置'
+  filterReset: '重置',
+  emptyText: '暂无数据',
 };

 let AntTable = React.createClass({
@ -204,7 +205,7 @@ let AntTable = React.createClass({
    selectedRowKeys = [key];
    this.setState({
      selectedRowKeys: selectedRowKeys,
-      radioIndex: record.key,
+      radioIndex: key,
      selectionDirty: true
    });
    if (this.props.rowSelection.onSelect) {
@ -270,13 +271,13 @@ let AntTable = React.createClass({
    }
    let checked;
    if (this.state.selectionDirty) {
-      checked = this.state.radioIndex === record.key;
+      checked = this.state.radioIndex === rowIndex;
    } else {
-      checked = (this.state.radioIndex === record.key ||
+      checked = (this.state.radioIndex === rowIndex ||
                 this.getDefaultSelection().indexOf(rowIndex) >= 0);
    }
    return <Radio disabled={props.disabled} onChange={this.handleRadioSelect.bind(this, record, rowIndex)}
-                  value={record.key} checked={checked}/>;
+                  value={rowIndex} checked={checked}/>;
  },

  renderSelectionCheckBox(value, record, index) {
@ -306,17 +307,16 @@ let AntTable = React.createClass({
  renderRowSelection() {
    let columns = this.props.columns.concat();
    if (this.props.rowSelection) {
-      let data = this.getCurrentPageData();
+      let data = this.getCurrentPageData().filter((item) => {
+        if (this.props.rowSelection.getCheckboxProps) {
+          return !this.props.rowSelection.getCheckboxProps(item).disabled;
+        }
+        return true;
+      });
      let checked;
      if (!data.length) {
        checked = false;
      } else {
-        data = data.filter((item) => {
-          if (this.props.rowSelection.getCheckboxProps) {
-            return !this.props.rowSelection.getCheckboxProps(item).disabled;
-          }
-          return true;
-        });
        checked = this.state.selectionDirty
          ? data.every((item, i) =>
              this.state.selectedRowKeys.indexOf(this.getRecordKey(item, i)) >= 0)
@ -512,6 +512,7 @@ let AntTable = React.createClass({
    let data = this.getCurrentPageData();
    let columns = this.renderRowSelection();
    let expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false;
+    let locale = objectAssign({}, defaultLocale, this.props.locale);

    let classString = classNames({
      [`ant-table-${this.props.size}`]: true,
@ -528,7 +529,7 @@ let AntTable = React.createClass({
    let emptyClass = '';
    if (!data || data.length === 0) {
      emptyText = <div className="ant-table-placeholder">
-        <Icon type="frown"/>暂无数据
+        <Icon type="frown"/>{locale.emptyText}
      </div>;
      emptyClass = ' ant-table-empty';
    }
--- a/components/table/index.md
+++ b/components/table/index.md
@ -33,13 +33,16 @@ const dataSource = [{

 const columns = [{
  title: '姓名',
-  dataIndex: 'name'
+  dataIndex: 'name',
+  key: 'name',
 }, {
  title: '年龄',
-  dataIndex: 'age'
+  dataIndex: 'age',
+  key: 'age',
 }, {
  title: '住址',
-  dataIndex: 'address'
+  dataIndex: 'address',
+  key: 'age',
 }];

 <Table dataSource={dataSource} columns={columns} />
@ -59,7 +62,8 @@ const columns = [{
 | dataSource    | 数据数组                 | Array           |                     |         |
 | columns       | 表格列的配置描述，具体项见下表 | Array |                     |    无    |
 | rowKey        | 表格列 key 的取值 | Function(recode, index):string |                     |    record.key    |
-| expandIconAsCell  | 设置展开 Icon 是否单独一列 | Boolean |                     |    true    |
+| expandedRowRender  | 额外的列展开元素 | Function |                     | - |
+| defaultExpandedRowKeys | 默认展开的列 | Array |                     | - |
 | onChange      | 分页、排序、筛选变化时触发 | Function(pagination, filters, sorter) |                     |       |
 | loading       | 页面是否加载中 | Boolean |                     | false      |
 | locale        | 设置排序、过滤按钮的文字或 `title` | Object         | | [默认值](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
@ -71,20 +75,20 @@ const columns = [{
 | 参数       | 说明                       | 类型            |  可选值             | 默认值  |
 |------------|----------------------------|-----------------|---------------------|---------|
 | title      | 列头显示文字               | String or React.Element |             |         |
-| dataIndex  | 列数据在 data 中对应的 key | String          |                     |         |
-| colSpan    | 表头列合并,设置为 0 时，不渲染 | Number      |                     |         |
-| key        | React 需要的 key           | String          |                     |         |
+| key        | React 需要的 key，建议设置 | String          |                     |         |
+| dataIndex  | 列数据在数据项中对应的 key | String          |                     |         |
 | render     | 生成复杂数据的渲染函数，参数分别为当前列的值，当前列数据，列索引，@return里面可以设置表格[行/列合并](#demo-colspan-rowspan) | Function(text, record, index) {} |            |         |
 | filters    | 表头的筛选菜单项           | Array           |                     |         |
 | onFilter   | 本地模式下，确定筛选的运行函数 | Function    |                     |         |
 | filterMultiple | 是否多选 | Boolean    |                                        | true    |
 | sorter     | 排序函数，本地排序使用一个函数，需要服务端排序可设为 true | Function or Boolean |  | 无 |
+| colSpan    | 表头列合并,设置为 0 时，不渲染 | Number      |                     |         |
 | width      | 列宽度 | String or Number |                                        | 无      |
 | className  | 列的 className             | String          |                     | 无      |

 ## 注意

-按照 React 的[规范](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children)，所有的组件数组必须绑定 key。在 Table 中，默认将每列数据的 `key` 属性作为唯一的标识。
+按照 React 的[规范](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children)，所有的组件数组必须绑定 key。在 Table 中，`dataSource` 和 `columns` 里的数据值都需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。

 如果你的数据没有这个属性，务必使用 `rowKey` 来指定数据列的主键。若没有指定，控制台会出现以下的提示，表格组件也会出现各类奇怪的错误。

--- a/components/tabs/demo/add.md
+++ b/components/tabs/demo/add.md
@ -1,107 +0,0 @@
-# 动态的页签
-
- order: 4
-
-演示添加删除和附加操作。
-
---
-
-````jsx
-import { Tabs, Button, Icon, message } from 'antd';
-const TabPane = Tabs.TabPane;
-
-let index = 0;
-const closeStyle = {
-  position: 'absolute',
-  top: 8,
-  right: -9,
-};
-
-const addStyle = {
-  pointerEvents: 'auto',
-  color: '#2db7f5',
-  position: 'absolute',
-  top: 8,
-  left: 0,
-  marginLeft: -8,
-};
-
-const Test = React.createClass({
-  getInitialState() {
-    return {
-      tabs: [{
-        title: 'title ' + index,
-        content: 'content ' + index,
-        index: index
-      }],
-      activeKey: index.toString()
-    };
-  },
-  remove(targetIndex, e) {
-    e.stopPropagation();
-    let tabs = this.state.tabs;
-    let activeKey = this.state.activeKey;
-    let foundIndex = 0;
-
-    if(tabs.length === 1) {
-      message.error('仅剩一个，不能删除');
-      return;
-    }
-
-    const newTabs = tabs.filter(tab => {
-      if (tab.index !== targetIndex) {
-        return true;
-      } else {
-        foundIndex = targetIndex;
-        return false;
-      }
-    });
-
-    if (activeKey === targetIndex) {
-      activeKey = tabs[foundIndex - 1].index;
-    }
-
-    this.setState({
-      tabs: newTabs, activeKey
-    });
-  },
-  add() {
-    index += 1;
-    this.setState({
-      tabs: this.state.tabs.concat({
-        title: 'title ' + index,
-        content: 'content ' + index,
-        index: index,
-      }),
-      activeKey: index.toString(),
-    });
-  },
-  onChange(activeKey) {
-    console.log(activeKey);
-    this.setState({ activeKey });
-  },
-  render() {
-    const addBtn = <Icon style={addStyle} type="plus-circle" onClick={this.add} />;
-    const operations = <Button style={{ marginTop: 2 }}>操作</Button>;
-    return (
-      <Tabs onChange={this.onChange}
-        activeKey={this.state.activeKey}
-        tabBarExtraContent={operations}>
-        {
-          this.state.tabs.map(tab => (
-            <TabPane key={tab.index} tab={
-              <div>
-                {tab.title}
-                <Icon type="cross" style={closeStyle} onClick={this.remove.bind(this, tab.index)} />
-              </div>
-            }>{tab.content}</TabPane>
-          ))
-        }
-        <TabPane key="__add" disabled tab={addBtn} />
-      </Tabs>
-    );
-  }
-});
-
-ReactDOM.render(<Test />, document.getElementById('components-tabs-demo-add'));
-````
--- a/components/tabs/demo/card-top.md
+++ b/components/tabs/demo/card-top.md
@ -0,0 +1,40 @@
+# 卡片式页签容器
+
+- order: 10
+
+用于容器顶部，需要一点额外的样式覆盖。
+
+---
+
+````jsx
+import { Tabs } from 'antd';
+const TabPane = Tabs.TabPane;
+
+ReactDOM.render(
+<div className="card-container">
+  <Tabs type="card">
+    <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
+    <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
+    <TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
+  </Tabs>
+</div>, document.getElementById('components-tabs-demo-card-top'));
+````
+
+````css
+#components-tabs-demo-card-top {
+  background: #ECECEC;
+  overflow: hidden;
+  padding: 24px;
+}
+
+.card-container > .ant-tabs-card .ant-tabs-content {
+  background: #fff;
+  padding: 16px;
+  height: 120px;
+  margin-top: -16px;
+}
+.card-container > .ant-tabs-card .ant-tabs-tabs-bar,
+.card-container > .ant-tabs-card .ant-tabs-tab-active {
+  border-color: #fff;
+}
+````
--- a/components/tabs/demo/card.md
+++ b/components/tabs/demo/card.md
@ -0,0 +1,24 @@
+# 卡片式页签
+
+- order: 8
+
+另一种样式的页签，不提供对应的垂直样式。
+
+---
+
+````jsx
+import { Tabs } from 'antd';
+const TabPane = Tabs.TabPane;
+
+function callback(key) {
+  console.log(key);
+}
+
+ReactDOM.render(
+  <Tabs onChange={callback} type="card">
+    <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
+    <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
+    <TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
+  </Tabs>
+, document.getElementById('components-tabs-demo-card'));
+````
--- a/components/tabs/demo/editable-card.md
+++ b/components/tabs/demo/editable-card.md
@ -0,0 +1,58 @@
+# 新增和关闭页签
+
+- order: 9
+
+只有卡片样式的页签支持新增和关闭选项。
+
+---
+
+````jsx
+import { Tabs } from 'antd';
+const TabPane = Tabs.TabPane;
+
+const Demo = React.createClass({
+  getInitialState() {
+    this.newTabIndex = 0;
+    const panes = [
+      <TabPane tab="选项卡" key="1">选项卡一内容</TabPane>,
+      <TabPane tab="选项卡" key="2">选项卡二内容</TabPane>,
+    ];
+    return {
+      activeKey: panes[0].key,
+      panes: panes,
+    };
+  },
+  onChange(activeKey) {
+    this.setState({ activeKey });
+  },
+  onEdit(targetKey, action) {
+    this[action](targetKey);
+  },
+  add(targetKey) {
+    const panes = this.state.panes;
+    const activeKey = 'newTab' + this.newTabIndex++;
+    panes.push(<TabPane tab="新建页签" key={activeKey}>新页面</TabPane>);
+    this.setState({ panes, activeKey });
+  },
+  remove(targetKey) {
+    let activeKey = this.state.activeKey;
+    let lastIndex = this.state.panes.findIndex(pane => pane.key === targetKey) - 1;
+    const panes = this.state.panes.filter(pane => pane.key !== targetKey);
+    if (activeKey === targetKey) {
+      activeKey = panes[lastIndex >= 0 ? lastIndex : 0].key;
+    }
+    this.setState({ panes, activeKey });
+  },
+  render() {
+    return (
+      <Tabs onChange={this.onChange} activeKey={this.state.activeKey}
+        type="editable-card" onEdit={this.onEdit}>
+        {this.state.panes}
+      </Tabs>
+    );
+  }
+});
+
+ReactDOM.render(<Demo />, document.getElementById('components-tabs-demo-editable-card'));
+````
+
--- a/components/tabs/demo/extra.md
+++ b/components/tabs/demo/extra.md
@ -0,0 +1,21 @@
+# 附加内容
+
+- order: 4
+
+可以在页签右边添加附加操作。
+
+---
+
+````jsx
+import { Tabs, Button } from 'antd';
+const TabPane = Tabs.TabPane;
+
+const operations = <Button>额外操作</Button>;
+
+ReactDOM.render(
+<Tabs tabBarExtraContent={operations}>
+  <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
+  <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
+  <TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
+</Tabs>, document.getElementById('components-tabs-demo-extra'));
+````
--- a/components/tabs/demo/position.md
+++ b/components/tabs/demo/position.md
@ -0,0 +1,45 @@
+# 位置
+
+- order: 6
+
+有四个位置，`tabPosition="left|right|top|bottom"`。
+
+---
+
+````jsx
+import { Tabs, Select } from 'antd';
+const TabPane = Tabs.TabPane;
+const Option = Select.Option;
+
+const Demo = React.createClass({
+  getInitialState() {
+    return {
+      tabPosition: 'top',
+    };
+  },
+  changeTabPosition(tabPosition) {
+    this.setState({ tabPosition });
+  },
+  render() {
+    return <div>
+      <div style={{marginBottom: 16}}>
+        页签位置：
+        <Select value={this.state.tabPosition} onChange={this.changeTabPosition}
+          dropdownMatchSelectWidth={false}>
+          <Option value="top">top</Option>
+          <Option value="bottom">bottom</Option>
+          <Option value="left">left</Option>
+          <Option value="right">right</Option>
+        </Select>
+      </div>
+      <Tabs tabPosition={this.state.tabPosition}>
+        <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
+        <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
+        <TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
+      </Tabs>
+    </div>;
+  }
+});
+
+ReactDOM.render(<Demo />, document.getElementById('components-tabs-demo-position'));
+````
--- a/components/tabs/demo/vertical-left.md
+++ b/components/tabs/demo/vertical-left.md
@ -1,21 +0,0 @@
-# 垂直
-
- order: 6
-
-选项卡在左边。
-
---
-
-````jsx
-import { Tabs } from 'antd';
-const TabPane = Tabs.TabPane;
-
-ReactDOM.render(
-  <Tabs defaultActiveKey="1" tabPosition="left">
-    <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
-    <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
-    <TabPane tab="选项卡三长" key="3">选项卡三内容</TabPane>
-  </Tabs>
-, document.getElementById('components-tabs-demo-vertical-left'));
-````
-
--- a/components/tabs/demo/vertical-right.md
+++ b/components/tabs/demo/vertical-right.md
@ -1,20 +0,0 @@
-# 垂直
-
- order: 7
-
-选项卡在右边。
-
---
-
-````jsx
-import { Tabs } from 'antd';
-const TabPane = Tabs.TabPane;
-
-ReactDOM.render(
-  <Tabs defaultActiveKey="1" tabPosition="right">
-    <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
-    <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
-    <TabPane tab="选项卡三长" key="3">选项卡三内容</TabPane>
-  </Tabs>
-, document.getElementById('components-tabs-demo-vertical-right'));
-````
--- a/components/tabs/index.jsx
+++ b/components/tabs/index.jsx
@ -1,26 +1,80 @@
 import Tabs from 'rc-tabs';
-import React from 'react';
-const prefixCls = 'ant-tabs';
+import React, { cloneElement } from 'react';
+import classNames from 'classnames';
+import Icon from '../icon';

 class AntTabs extends React.Component {
-  render() {
-    let className = (this.props.className || '');
-    let animation = this.props.animation;
-    if (this.props.size === 'small' || this.props.size === 'mini') {
-      className += ' ' + prefixCls + '-mini';
+  constructor(props) {
+    super(props);
+    [
+      'createNewTab',
+      'removeTab',
+      'handleChange',
+    ].forEach((method) => this[method] = this[method].bind(this));
+  }
+  createNewTab(targetKey) {
+    this.props.onEdit(targetKey, 'add');
+  }
+  removeTab(targetKey, e) {
+    e.stopPropagation();
+    if (!targetKey) {
+      return;
    }
-    if (this.props.tabPosition === 'left' || this.props.tabPosition === 'right') {
-      className += ' ' + prefixCls + '-vertical';
+    this.props.onEdit(targetKey, 'remove');
+  }
+  handleChange(activeKey) {
+    this.props.onChange(activeKey);
+  }
+  render() {
+    let { prefixCls, size, tabPosition, animation, type,
+          children, tabBarExtraContent } = this.props;
+    let className = classNames({
+      [this.props.className]: !!this. props.className,
+      [prefixCls + '-mini']: size === 'small' || size === 'mini',
+      [prefixCls + '-vertical']: tabPosition === 'left' || tabPosition === 'right',
+      [prefixCls + '-card']: type.indexOf('card') >= 0,
+    });
+    if (tabPosition === 'left' || tabPosition === 'right' || type.indexOf('card') >= 0) {
      animation = null;
    }
-    return <Tabs {...this.props} className={className} animation={animation}/>;
+    // only card type tabs can be added and closed
+    if (type === 'editable-card') {
+      if (children.length > 1) {
+        children = children.map((child, index) => {
+          return cloneElement(child, {
+            tab: <div>
+              {child.props.tab}
+              <Icon type="cross" onClick={this.removeTab.bind(this, child.key)} />
+            </div>,
+            key: child.key || index,
+          });
+        });
+      }
+      // Add new tab handler
+      tabBarExtraContent = <span>
+        <Icon type="plus" className={prefixCls + '-new-tab'} onClick={this.createNewTab} />
+        {tabBarExtraContent}
+      </span>;
+    }
+    // Wrap the extra content
+    tabBarExtraContent = <div className={prefixCls + '-extra-content'}>
+      {tabBarExtraContent}
+    </div>;
+    return <Tabs {...this.props}
+      className={className}
+      tabBarExtraContent={tabBarExtraContent}
+      onChange={this.handleChange}
+      animation={animation}>{children}</Tabs>;
  }
 }

 AntTabs.defaultProps = {
-  prefixCls: prefixCls,
+  prefixCls: 'ant-tabs',
  size: 'default',
  animation: 'slide-horizontal',
+  type: 'line', // or 'card' 'editable-card'
+  onChange() {},
+  onEdit() {},
 };

 AntTabs.TabPane = Tabs.TabPane;
--- a/components/tabs/index.md
+++ b/components/tabs/index.md
@ -12,7 +12,11 @@

 提供平级的区域将大块内容进行收纳和展现，保持界面整洁。

-> [RadioButton](/components/radio#demo-radiobutton) 可以作为更次级的页签来使用。
+Ant Design 依次提供了三级选项卡，分别用于不同的场景。
+
+- 卡片式的页签，提供可关闭的样式，常用于容器顶部。
+- 标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。
+- [RadioButton](/components/radio/#demo-radiobutton) 可作为更次级的页签来使用。

 ## API

@ -25,6 +29,9 @@
 | onChange         | 切换面板的回调                               | Function | 无            |
 | onTabClick       | tab 被点击的回调                             | Function | 无            |
 | tabBarExtraContent | tab bar 上额外的元素                       | React Node | 无          |
+| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型   | String   | 'line'      |
+| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left`  | String   | 'top'      |
+| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | Function(targetKey, action) | 无 |

 ### Tabs.TabPane

--- a/components/time-picker/demo/disable-options.md
+++ b/components/time-picker/demo/disable-options.md
@ -0,0 +1,39 @@
+# 禁止选项
+
+- order: 5
+
+限制选择 `20:30` 到 `23:30` 这个时间段。
+
+---
+
+````jsx
+import { TimePicker } from 'antd';
+
+function newArray(start, end) {
+  let result = [];
+  for (let i = start; i < end; i++) {
+    result.push(i);
+  }
+  return result;
+}
+
+function disabledHours() {
+  let hours = newArray(0, 60);
+  hours.splice(20, 4);
+  return hours;
+}
+
+function disabledMinutes(h) {
+  if (h === 20) {
+    return newArray(0, 31);
+  } else if (h === 23) {
+    return newArray(30, 60);
+  } else {
+    return [];
+  }
+}
+
+ReactDOM.render(
+  <TimePicker disabledHours={disabledHours} disabledMinutes={disabledMinutes} />
+, document.getElementById('components-time-picker-demo-disable-options'));
+````
--- a/components/time-picker/demo/hide-options.md
+++ b/components/time-picker/demo/hide-options.md
@ -0,0 +1,31 @@
+# 只显示部分选项
+
+- order: 6
+
+通过 `hideDisabledOptions` 将不可选的选项隐藏。
+
+---
+
+````jsx
+import { TimePicker } from 'antd';
+
+function newArray(start, end) {
+  let result = [];
+  for (let i = start; i < end; i++) {
+    result.push(i);
+  }
+  return result;
+}
+
+function disabledMinutes(h) {
+  return newArray(0, 60).filter(value => value % 10 !== 0);
+}
+
+function disabledSeconds(h, m) {
+  return newArray(0, 60).filter(value => value % 30 !== 0);
+}
+
+ReactDOM.render(
+  <TimePicker disabledMinutes={disabledMinutes} disabledSeconds={disabledSeconds} hideDisabledOptions />
+, document.getElementById('components-time-picker-demo-hide-options'));
+````
--- a/components/time-picker/demo/size.md
+++ b/components/time-picker/demo/size.md
@ -1,6 +1,6 @@
 # 三种大小

-	order: 6
+-	order: 2

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

--- a/components/time-picker/demo/special-minutes.md
+++ b/components/time-picker/demo/special-minutes.md
@ -1,15 +0,0 @@
-# 特定选项
-
-	order: 3
-
-分钟只提供特定的选择，同时可以通过 `hourOptions` 和 `secondOptions` 对小时和秒进行特殊的限定。
-
---
-
-````jsx
-import { TimePicker } from 'antd';
-
-ReactDOM.render(
-  <TimePicker defaultValue="12:30:23" format="HH:mm" minuteOptions={[0, 30]} />
-, document.getElementById('components-time-picker-demo-special-minutes'));
-````
--- a/components/time-picker/demo/value.md
+++ b/components/time-picker/demo/value.md
@ -1,6 +1,6 @@
 # 受控组件

- order: 6
+- order: 1

 value 和 onChange 需要配合使用。

--- a/components/time-picker/demo/without-seconds.md
+++ b/components/time-picker/demo/without-seconds.md
@ -1,6 +1,6 @@
 # 不展示秒

-	order: 2
+-	order: 3

 不展示秒，也不允许选择。

--- a/components/time-picker/index.jsx
+++ b/components/time-picker/index.jsx
@ -17,9 +17,10 @@ const AntTimePicker = React.createClass({
      },
      open: false,
      disabled: false,
-      hourOptions: undefined,
-      minuteOptions: undefined,
-      secondOptions: undefined,
+      disabledHours: undefined,
+      disabledMinutes: undefined,
+      disabledSeconds: undefined,
+      hideDisabledOptions: false,
      size: 'default',
      placement: 'bottomLeft',
      transitionName: 'slide-up',
@ -91,6 +92,7 @@ const AntTimePicker = React.createClass({
    if (props.format.indexOf('HH') < 0) {
      props.showHour = false;
    }
+
    return (
      <TimePicker
        {...props}
--- a/components/time-picker/index.md
+++ b/components/time-picker/index.md
@ -20,17 +20,18 @@ API
 <TimePicker defaultValue="13:30:56" />
 ```

-| 参数            | 说明 | 类型 | 默认值 |
-|-----------------|-----|-----|-------|
-| defaultValue    | 初始默认时间 | string | 无 |
-| value           | 默认时间 | string | 无 |
-| placeholder     | 没有值的时候显示的内容 | string | "请选择时间" |
-| onChange        | 时间发生变化的回调     | function(Date value) | 无           |
-| format          | 展示的时间格式 | string | "HH:mm:ss"、"HH:mm"、"mm:ss" |
-| disabled        | 禁用 | bool | false |
-| hourOptions     | 特定可选择的小时 | array | 0 到 24 组成的数组 |
-| minuteOptions   | 特定可选择的分钟 | array | 0 到 60 组成的数组 |
-| secondOptions   | 特定可选择的秒 | array | 0 到 60 组成的数组 |
-| locale | 国际化配置 | Object | [默认配置](https://github.com/ant-design/ant-design/issues/424) |
+| 参数                 | 说明 | 类型 | 默认值 |
+|---------------------|-----|-----|-------|
+| defaultValue        | 初始默认时间 | string | 无 |
+| value               | 默认时间 | string | 无 |
+| placeholder         | 没有值的时候显示的内容 | string | "请选择时间" |
+| onChange            | 时间发生变化的回调     | function(Date value) | 无 |
+| format              | 展示的时间格式 | string | "HH:mm:ss"、"HH:mm"、"mm:ss" |
+| disabled            | 禁用全部操作 | bool | false |
+| disabledHours       | 禁止选择部分小时选项 | function() | 无 |
+| disabledMinutes     | 禁止选择部分分钟选项 | function(selectedHour) | 无 |
+| disabledSeconds     | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | 无 |
+| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |
+| locale              | 国际化配置 | Object | [默认配置](https://github.com/ant-design/ant-design/issues/424) |

 <style>.code-box-demo .ant-time-picker { margin: 0 8px 12px 0; }</style>
--- a/components/timeline/demo/basic.md
+++ b/components/timeline/demo/basic.md
@ -8,7 +8,6 @@

 ````jsx
 import { Timeline } from 'antd';
-const container = document.getElementById('components-timeline-demo-basic');

 ReactDOM.render(
 <Timeline>
@ -17,5 +16,5 @@ ReactDOM.render(
  <Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>
  <Timeline.Item>网络异常正在修复 2015-09-01</Timeline.Item>
 </Timeline>
-, container);
+, document.getElementById('components-timeline-demo-basic'));
 ````
--- a/components/timeline/demo/color.md
+++ b/components/timeline/demo/color.md
@ -8,7 +8,6 @@

 ````jsx
 import { Timeline } from 'antd';
-const container = document.getElementById('components-timeline-demo-color');

 ReactDOM.render(
 <Timeline>
@ -25,5 +24,5 @@ ReactDOM.render(
    <p>技术测试异常3 2015-09-01</p>
  </Timeline.Item>
 </Timeline>
-, container);
+, document.getElementById('components-timeline-demo-color'));
 ````
--- a/components/timeline/demo/pending.md
+++ b/components/timeline/demo/pending.md
@ -8,7 +8,6 @@

 ````jsx
 import { Timeline } from 'antd';
-const container = document.getElementById('components-timeline-demo-pending');

 ReactDOM.render(
 <Timeline pending>
@ -16,5 +15,5 @@ ReactDOM.render(
  <Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
  <Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>
 </Timeline>
-, container);
+, document.getElementById('components-timeline-demo-pending'));
 ````
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@ -118,7 +118,7 @@ Ant Design React 支持所有的现代浏览器和 IE8+。
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/index.css">
    <!-- Polyfills -->
-    <script src="https://as.alipayobjects.com/??component/console-polyfill/0.2.2/index.js,component/es5-shim/4.1.14/es5-shim.min.js,component/es5-shim/4.1.14/es5-sham.min.js,component/html5shiv/3.7.2/html5shiv.min.js,g/component/media-match/2.0.2/media.match.min.js"></script>
+    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.1.14/es5-shim.min.js,es5-shim/4.1.14/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
  </head>
  <body>
  </body>
--- a/docs/install.md
+++ b/docs/install.md
@ -9,7 +9,7 @@

 **我们推荐使用 npm 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

-可以通过 npm 直接安装到本地，使用 `require` 或 `import` 进行引用。
+可以通过 npm 直接安装到项目中，使用 `import` 或 `require` 进行引用。

 稳定版 <span class="versions" id="stable-version"></span>：

@ -32,26 +32,15 @@ $ npm install antd@beta --save

 ## 开发工具

-我们提供了开发构建的命令行工具，可以安装到全局直接使用。
+我们提供了 React 前端应用开发的 [脚手架工具](https://github.com/ant-design/antd-init)，可以安装到全局直接使用。

 ```bash
-$ npm install antd-bin -g
+$ npm install antd-init -g
 ```

-或者安装到仓库下，使用 `package.json` 的 `scripts` 字段来配置命令：
+在空目录运行 `antd-init` 可以初始化一个 antd 的前端应用。

-```bash
-$ npm install antd-bin --save-dev
-```
-
-```json
-"scripts": {
-  "dev": "antd server",
-  "build": "antd build"
-}
-```
-
-> 更多[使用方式](https://github.com/ant-tool/xtool/)。
+> 更多 [使用方式](https://github.com/ant-tool/xtool/)。

 <style>
 .versions {
@ -67,15 +56,10 @@ $ npm install antd-bin --save-dev

 <script>
 $('#latest-version').html(antdVersion.latest);
-$('#latest-links a').each(function(i, item) {
-  $(item).attr('href', $(item).attr('href').replace('dist/antd', 'dist/antd-' + antdVersion.latest));
-});

 if (antdVersion.stable) {
  $('#stable-version').html(antdVersion.stable);
-  $('#stable-link').attr('href', 'https://github.com/ant-design/ant-design/releases/tag/' + antdVersion.stable);
 } else {
  $('#stable-version').html('暂无');
-  $('#stable-link').hide();
 }
 </script>
--- a/docs/install_en.md
+++ b/docs/install_en.md
@ -0,0 +1,59 @@
+## Using npm to install
+
+**We recommend use npm to install**，Not only it makes development easier，also you can take advantage of the whole ecosystem.
+
+
+If using npm to install, you could use `import` or `require`.
+
+Stable version <span class="versions" id="stable-version"></span>：
+
+[![npm package](http://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
+
+```bash
+$ npm install antd --save
+```
+
+Beta version <span class="versions" id="latest-version"></span>：
+
+[![](https://cnpmjs.org/badge/v/antd.svg?&tag=beta&subject=npm)](https://www.npmjs.org/package/antd)
+
+```bash
+$ npm install antd@beta --save
+```
+
+> **Past releases**：https://github.com/ant-design/ant-design/releases
+
+
+## Development tool 
+
+We provide React components [Scaffold tool](https://github.com/ant-design/antd-init).
+
+```bash
+$ npm install antd-init -g
+```
+
+Inside an empty folder run `antd-init` to init.
+
+> [More tools](https://github.com/ant-tool/xtool/)。
+
+<style>
+.versions {
+  font-weight: bold;
+  color: #C05B4D;
+  font-family: Consolas;
+  margin-left: 0.3em;
+  background: #FFF1E7;
+  padding: 2px 5px;
+  border-radius: 3px;
+}
+</style>
+
+<script>
+$('#latest-version').html(antdVersion.latest);
+
+if (antdVersion.stable) {
+  $('#stable-version').html(antdVersion.stable);
+} else {
+  $('#stable-version').html('not available');
+}
+</script>
--- a/docs/introduce.md
+++ b/docs/introduce.md
@ -39,25 +39,14 @@ import { DatePicker } from 'antd';
 ReactDOM.render(<DatePicker />, mountNode);
 ```

-或者按需加载：
-
-```jsx
-import DatePicker from 'antd/lib/date-picker';
-ReactDOM.render(<DatePicker />, mountNode);
-```
-
 引入样式：

 ```jsx
-import 'antd/lib/index.css'; // 样式需要在入口处引用一次
+import 'antd/lib/index.css';  // or 'antd/style/index.less'
 ```

-或者引入 less 文件，可用于主题配置：
+按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd)。

-```jsx
-// or less for modifyVars
-import 'antd/style/index.less';
-```

 ## 版本

--- a/index.js
+++ b/index.js
@ -47,12 +47,13 @@ const antd = {

 antd.version = require('./package.json').version;

+const ReactVersion = React.version;
 if (process.env.NODE_ENV !== 'production') {
  const warning = require('warning');
  const semver = require('semver');
  const reactVersionInDeps = require('./package.json').devDependencies.react;
-  warning(semver.satisfies(React.version, reactVersionInDeps) || semver.gtr(React.version, reactVersionInDeps),
-    `antd@${antd.version} need react@${reactVersionInDeps} or higher, which is react@${React.version} now.`);
+  warning(semver.satisfies(ReactVersion, reactVersionInDeps) || semver.gtr(ReactVersion, reactVersionInDeps),
+    `antd@${antd.version} need react@${reactVersionInDeps} or higher, which is react@${ReactVersion} now.`);
 }

 module.exports = antd;
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "0.10.4",
+  "version": "0.11.0-beta1",
  "stableVersion": "0.10.4",
  "title": "Ant Design",
  "description": "一个 UI 设计语言",
@ -53,12 +53,12 @@
    "rc-queue-anim": "~0.11.2",
    "rc-radio": "~2.0.0",
    "rc-select": "~5.4.0",
-    "rc-slider": "~3.1.2",
+    "rc-slider": "~3.2.0",
    "rc-steps": "~1.4.1",
    "rc-switch": "~1.3.1",
    "rc-table": "~3.6.2",
    "rc-tabs": "~5.5.0",
-    "rc-time-picker": "1.0.0-alpha6",
+    "rc-time-picker": "1.0.0-alpha9",
    "rc-tooltip": "~3.2.0",
    "rc-tree": "~0.19.0",
    "rc-trigger": "~1.0.6",
@ -82,8 +82,8 @@
    "babel-preset-stage-0": "^6.1.18",
    "busboy": "^0.2.9",
    "chalk": "^1.1.0",
-    "clipboard": "^1.5.5",
    "css-loader": "^0.23.0",
+    "es3ify-loader": "^0.1.0",
    "eslint": "^1.1.0",
    "eslint-config-airbnb": "^1.0.0",
    "eslint-plugin-babel": "^3.0.0",
@ -96,12 +96,13 @@
    "json-loader": "^0.5.1",
    "less": "~2.5.3",
    "less-loader": "^2.2.0",
-    "lesshint-antd": "~1.1.0",
+    "lesshint-antd": "^1.2.1",
    "lodash": "^3.10.0",
    "nico-jsx": "~0.7.0",
    "pre-commit": "1.x",
    "react": "~0.14.2",
    "react-addons-test-utils": "~0.14.2",
+    "react-copy-to-clipboard": "^3.0.4",
    "react-dom": "~0.14.2",
    "react-router": "~1.0.0",
    "react-stateless-wrapper": "~1.0.2",
--- a/scripts/clip.js
+++ b/scripts/clip.js
@ -1,70 +0,0 @@
-import React from 'react';
-import Clipboard from 'clipboard';
-
-let counter = 0;
-
-class Clip extends React.Component {
-  static propTypes: {
-     options: React.PropTypes.object,
-  }
-
-  /* Returns a object with all props that fulfill a certain naming pattern
-   *
-   * @param {RegExp} regexp - Regular expression representing which pattern
-   *                          you'll be searching for.
-   * @param {Boolean} remove - Determines if the regular expression should be
-   *                           removed when transmitting the key from the props
-   *                           to the new object.
-   *
-   * e.g:
-   *
-   * // Considering:
-   * // this.props = {option-foo: 1, onBar: 2, data-foobar: 3 data-baz: 4};
-   *
-   * // *RegExps not using // so that this comment doesn't break up
-   * this.propsWith(option-*, true); // returns {foo: 1}
-   * this.propsWith(on*, true); // returns {Bar: 2}
-   * this.propsWith(data-*); // returns {data-foobar: 1, data-baz: 4}
-   */
-  propsWith(regexp, remove=false) {
-    let object = {};
-
-    Object.keys(this.props).forEach(function(key) {
-      if (key.search(regexp) !== -1) {
-        let objectKey = remove ? key.replace(regexp, '') : key;
-        object[objectKey] = this.props[key];
-      }
-    }, this);
-
-    return object;
-  }
-
-  constructor(props) {
-    super(props);
-    this.id = `__react_clipboard_${counter++}__`;
-  }
-
-  componentDidMount() {
-    // Support old API by trying to assign this.props.options first;
-    let options = this.props.options || this.propsWith(/^option-/, true);
-    this.clipboard = new Clipboard(`#${this.id}`, options);
-
-    let callbacks = this.propsWith(/^on/, true);
-    Object.keys(callbacks).forEach(function(callback) {
-      this.clipboard.on(callback.toLowerCase(), this.props['on' + callback]);
-    }, this);
-  }
-
-  render() {
-    let dataAttributes = this.propsWith(/^data-/);
-    let component = this.props.component || 'span';
-    return React.createElement(component, {
-      id: this.id,
-      className: this.props.className || '',
-      style: this.props.style || {},
-      ...dataAttributes
-    }, this.props.children);
-  }
-}
-
-export default Clip;
--- a/scripts/demo.js
+++ b/scripts/demo.js
@ -24,7 +24,7 @@ window.require = function (path) {

 window['css-animation'] = require('css-animation');
 window['react-router'] = require('react-router');
-window.Clip = require('./clip');
+window.CopyToClipboard = require('react-copy-to-clipboard');
 var antd = require('../index');
 var React = require('react');
 var ReactDOM = require('react-dom');
--- a/site/static/home.js
+++ b/site/static/home.js
@ -1,31 +1,32 @@
-$(function () {
-  var getTransform = function () {
+$(function() {
+  var getTransform = function() {
    var style = "transform",
      anim = "animation",
-        pers = "perspective";
-        var i, prefix = ['webkit', 'moz', 'ms', 'o'],
-          htmlStyle = $("html")[0].style;
-          if (!"transform" in htmlStyle) {
-            for (i in prefix) {
-              style = "-" + prefix[i] + "-transform";
-              if (style in htmlStyle) break;
-            }
-          }
-          if (!"animation" in htmlStyle) {
-            for (i in prefix) {
-              anim = "-" + prefix[i] + "-animation";
-              if (anim in htmlStyle) break;
-            }
-          }
-          if (!"perspective" in htmlStyle) {
-            for (i in prefix) {
-              pers = "-" + prefix[i] + "-perspective";
-              if (pers in htmlStyle) break;
-            }
-          }
-          return [style, anim, pers]
+      pers = "perspective";
+    var i, prefix = ['webkit', 'moz', 'ms', 'o'],
+      htmlStyle = $("html")[0].style;
+    if (!"transform" in htmlStyle) {
+      for (i in prefix) {
+        style = "-" + prefix[i] + "-transform";
+        if (style in htmlStyle) break;
+      }
+    }
+    if (!"animation" in htmlStyle) {
+      for (i in prefix) {
+        anim = "-" + prefix[i] + "-animation";
+        if (anim in htmlStyle) break;
+      }
+    }
+    if (!"perspective" in htmlStyle) {
+      for (i in prefix) {
+        pers = "-" + prefix[i] + "-perspective";
+        if (pers in htmlStyle) break;
+      }
+    }
+    return [style, anim, pers]
  };
-  var C=createjs||{},T=TweenMax||{};
+  var C = createjs || {},
+    T = TweenMax || {};
  var bannerAnim = {
    w: 2400,
    h: 1300,
@ -47,12 +48,12 @@ $(function () {
      {x:1920,y:260,w:75,h:75,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:{x:10,y:10,r:55}},
      {x:2070,y:250,w:230,h:455,line:4,color:["rgba(110,180,224,1)","rgba(110,180,224,0)"],circ:[{x:25,y:30,r:75},{x:35,y:40,r:55},{x:25,y:185,r:75},{x:35,y:195,r:55},{x:25,y:340,r:75},{x:35,y:350,r:55}, {x:140,y:30,r:75},{x:150,y:40,r:55},{x:140,y:185,r:75},{x:150,y:195,r:55},{x:140,y:340,r:75},{x:150,y:350,r:55}]},
    ],
-    init: function () {
+    init: function() {
      var self = this;
      self.box = $(".banner-box");
      self.animBox = $("#bannerAnim");
      self.imgBox = $(".banner-img");
-      self.txtBox=$(".banner-entry");
+      self.txtBox = $(".banner-entry");
      //创建canvas;
      self.Canvas = $("<canvas id='myC' style='display:block'></canvas>").appendTo(self.animBox); //document.createElement('canvas');
      self.Canvas[0].width = self.w;
@ -68,187 +69,235 @@ $(function () {
      $(window).bind("resize", self.bannerResize);
      self.start()
    },
-    bannerResize: function () {
+    bannerResize: function() {
      var self = bannerAnim;
      self.p_w = self.box.parent().width();
      self.p_h = self.box.parent().height();
      //获取比例；
-      var w_s = self.p_w / self.w+0.08,
-        h_s = self.p_h / self.h+0.08;
-        var scale=self.scale = w_s > h_s ? w_s : h_s;
-        var tra = getTransform()[0];
-        self.animBox.attr("style", "");
-        self.imgBox.attr("style", "");
-        var boxSty = {
-          "width": self.w,
-          "height": self.h
-        };
+      var w_s = self.p_w / self.w + 0.08,
+        h_s = self.p_h / self.h + 0.08;
+      var scale = self.scale = w_s > h_s ? w_s : h_s;
+      var tra = getTransform()[0];
+      self.animBox.attr("style", "");
+      self.imgBox.attr("style", "");
+      var boxSty = {
+        "width": self.w,
+        "height": self.h
+      };

-        boxSty[tra] = "scale(" + scale + "," + scale + ")";
-        self.animBox.css(boxSty);
-        var imgSty = {};
-        imgSty[tra] = "scale(" + scale + "," + scale + ")";
-        self.imgBox.css(imgSty);
-        if (w_s > h_s) {
-          self.animBox.css({"margin-top": (self.p_h - self.h * w_s) / 2,"margin-left":(self.p_w - self.w * w_s) / 2});
-          self.imgBox.css({"margin-top": (self.p_h - self.h * w_s) / 2-(1-scale)*self.h/2,"margin-left":(self.p_w - self.w * w_s) / 2-(1-scale)*self.w/2});
-        } else {
-          self.animBox.css({"margin-left": (self.p_w - self.w * h_s) / 2,"margin-top": (self.p_h - self.h * h_s) / 2});
-          self.imgBox.css({"margin-left": (self.p_w - self.w * h_s) / 2-(1-scale)*self.w/2,"margin-top": (self.p_h - self.h * h_s) / 2-(1-scale)*self.h/2});
-        }
+      boxSty[tra] = "scale(" + scale + "," + scale + ")";
+      self.animBox.css(boxSty);
+      var imgSty = {};
+      imgSty[tra] = "scale(" + scale + "," + scale + ")";
+      self.imgBox.css(imgSty);
+      if (w_s > h_s) {
+        self.animBox.css({
+          "margin-top": (self.p_h - self.h * w_s) / 2,
+          "margin-left": (self.p_w - self.w * w_s) / 2
+        });
+        self.imgBox.css({
+          "margin-top": (self.p_h - self.h * w_s) / 2 - (1 - scale) * self.h / 2,
+          "margin-left": (self.p_w - self.w * w_s) / 2 - (1 - scale) * self.w / 2
+        });
+      } else {
+        self.animBox.css({
+          "margin-left": (self.p_w - self.w * h_s) / 2,
+          "margin-top": (self.p_h - self.h * h_s) / 2
+        });
+        self.imgBox.css({
+          "margin-left": (self.p_w - self.w * h_s) / 2 - (1 - scale) * self.w / 2,
+          "margin-top": (self.p_h - self.h * h_s) / 2 - (1 - scale) * self.h / 2
+        });
+      }
    },
-    start: function () {
-      var self = this;
-      //self.addBg();
-      //setTimeout(self.addLine,500);
-      self.addLine()
-
+    start: function() {
+      this.addLine();
    },
-    glowLine:function (line,w,h,color){
-      w=w||0,h=h||0;
-      var r=w/2||h/2;
-      var glBox=new C.Container();
-      var Line=new C.Shape();
-      var glow=new C.Shape();
+    glowLine: function(line, w, h, color) {
+      w = w || 0, h = h || 0;
+      var r = w / 2 || h / 2;
+      var glBox = new C.Container();
+      var Line = new C.Shape();
+      var glow = new C.Shape();
      glBox.addChild(glow);
      glBox.addChild(Line);
-      glow.alpha=.3;
+      glow.alpha = .3;
      var blurFilter = new C.BlurFilter(3, 3, 10);
      glow.filters = [blurFilter];
      var bounds = blurFilter.getBounds();
-      if(w){
-        Line.graphics.ss(line,"round").rs(color,[0,1],r,h,0,r,h,r).mt(0,0).lt(w,h);
-        glow.graphics.ss(line+4,"round").rs(color,[0,1],r,h,0,r,h,r).mt(0,0).lt(w,h);
-        glow.cache(bounds.x, bounds.y-2, w+bounds.width, line+bounds.height);
-      }else{
-        Line.graphics.ss(line,"round").rs(color,[0,1],w,r,0,w,r,r).mt(0,0).lt(w,h);
-        glow.graphics.ss(line+4,"round").rs(color,[0,1],w,r,0,w,r,r).mt(0,0).lt(w,h);
-        glow.cache(bounds.x-2, bounds.y, line+bounds.width, h+bounds.height);
+      if (w) {
+        Line.graphics.ss(line, "round").rs(color, [0, 1], r, h, 0, r, h, r).mt(0, 0).lt(w, h);
+        glow.graphics.ss(line + 4, "round").rs(color, [0, 1], r, h, 0, r, h, r).mt(0, 0).lt(w, h);
+        glow.cache(bounds.x, bounds.y - 2, w + bounds.width, line + bounds.height);
+      } else {
+        Line.graphics.ss(line, "round").rs(color, [0, 1], w, r, 0, w, r, r).mt(0, 0).lt(w, h);
+        glow.graphics.ss(line + 4, "round").rs(color, [0, 1], w, r, 0, w, r, r).mt(0, 0).lt(w, h);
+        glow.cache(bounds.x - 2, bounds.y, line + bounds.width, h + bounds.height);
      }
      return glBox;
    },
-    addMouseAnim:function (){
-      var self=this,img_x=self.imgBox;
-      $("body").bind("mousemove",function (e){
-        var _x=-(e.pageX-$(this).width()/2)/40;//,_y= -(e.pageY-$(this).height()/2)/35;
-        if(_x>self.w*.04){
-          _x=self.w*.04
+    addMouseAnim: function() {
+      var self = this,
+        img_x = self.imgBox;
+      $("body").bind("mousemove", function(e) {
+        var _x = -(e.pageX - $(this).width() / 2) / 40; //,_y= -(e.pageY-$(this).height()/2)/35;
+        if (_x > self.w * .04) {
+          _x = self.w * .04
        }
-        T.set(self.imgBox,{scale:self.scale,transformPerspective:400});
-        T.killTweensOf(self.imgBox,true);
-        var tobj={};
-        if(navigator.userAgent.indexOf('Firefox') >= 0){
-          tobj.x=_x
-        }else{
-          tobj.x=_x;
-          tobj.rotationY=_x/60;
+        T.set(self.imgBox, {
+          scale: self.scale,
+          transformPerspective: 400
+        });
+        T.killTweensOf(self.imgBox, true);
+        var tobj = {};
+        if (navigator.userAgent.indexOf('Firefox') >= 0) {
+          tobj.x = _x
+        } else {
+          tobj.x = _x;
+          tobj.rotationY = _x / 60;
        }
-        T.to(self.imgBox,.5,tobj);
+        T.to(self.imgBox, .5, tobj);
      })
    },
-    endTween:function (){
-      var self=bannerAnim;
-      T.to(self.animBox,.5,{alpha:0,onComplete:function (){
-        self.animBox.remove();
-        self.addMouseAnim()
-      }});
+    endTween: function() {
+      var self = bannerAnim;
+      T.to(self.animBox, .5, {
+        alpha: 0,
+        onComplete: function() {
+          self.animBox.remove();
+          self.addMouseAnim()
+        }
+      });
      self.imgBox.removeClass("fn-alpha-out")
-      self.imgBox.css("opacity",1);
+      self.imgBox.css("opacity", 1);

    },
-    textTween:function (){
-      var self=this;
+    textTween: function() {
+      var self = this;
      self.txtBox.removeClass("fn-hide");
-      for(var i=0;i<self.txtBox.children().length;i++){
-        var mc=self.txtBox.children().eq(i);
-        T.from(mc,.5,{delay:.15*i,alpha:0,y:"80",onComplete:function (mc){
-          mc.removeAttr("style");
-        },onCompleteParams:[mc]})
+      for (var i = 0; i < self.txtBox.children().length; i++) {
+        var mc = self.txtBox.children().eq(i);
+        T.from(mc, .5, {
+          delay: .15 * i,
+          alpha: 0,
+          y: "80",
+          onComplete: function(mc) {
+            mc.removeAttr("style");
+          },
+          onCompleteParams: [mc]
+        })
      }
    },
-    addLine:function (){
-      var self=bannerAnim;
-      var a_lineBox=[],end_num=0;
-      setTimeout(function (){
+    addLine: function() {
+      var self = bannerAnim;
+      var a_lineBox = [],
+        end_num = 0;
+      setTimeout(function() {
        self.textTween();
-      },500);
+      }, 500);

-      function addLine(i,j,lineBox){
-        var t=new C.Shape();
-        if(j%2){
-          t.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).mt(0,0).lt(0,self.lineData[i].h);
-          var at=Math.floor(j/2);
-          t.x=self.lineData[i].w*at
-        }else{
-          t.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).mt(0,0).lt(self.lineData[i].w,0);
-          var at=j/2;
-          t.y=self.lineData[i].h*at;
+      function addLine(i, j, lineBox) {
+        var t = new C.Shape();
+        if (j % 2) {
+          t.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).mt(0, 0).lt(0, self.lineData[i].h);
+          var at = Math.floor(j / 2);
+          t.x = self.lineData[i].w * at
+        } else {
+          t.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).mt(0, 0).lt(self.lineData[i].w, 0);
+          var at = j / 2;
+          t.y = self.lineData[i].h * at;
        }
        lineBox.addChild(t);
-        T.from(t,.5,{alpha:0})
+        T.from(t, .5, {
+          alpha: 0
+        })
      }
-      function addCirc(i,lineBox){
-        end_num++;
-        if(self.lineData[i].circ.length>0){
-          for(var j=0;j<self.lineData[i].circ.length;j++){
-            var circ=new C.Shape();
-            circ.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).dc(self.lineData[i].circ[j].x+self.lineData[i].circ[j].r/2,self.lineData[i].circ[j].y+self.lineData[i].circ[j].r/2,self.lineData[i].circ[j].r/2);
-            lineBox.addChild(circ);
-            T.from(circ,.5,{alpha:0})
-          }
-        }
-        else{
-          var circ=new C.Shape();
-          circ.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).dc(self.lineData[i].circ.x+self.lineData[i].circ.r/2,self.lineData[i].circ.y+self.lineData[i].circ.r/2,self.lineData[i].circ.r/2);
-          lineBox.addChild(circ);
-          T.from(circ,.5,{alpha:0})
-        }
-        if(end_num>=self.lineData.length){
-          setTimeout(self.endTween,500)
-        }
-      }
-      function tween(line,obj,i,j,lineBox,arr){
-        var t=obj;
-        t.alpha=0;
-        t.scale=2;
-        t.ease=Power1.easeOut;
-        T.to(line,.5,t);
-        addLine(i,j,lineBox);
-        arr.push(j);
-        a_lineBox[i]=arr;
-        if(a_lineBox[i].length>=4){
-          addCirc(i,lineBox)
-        }
-      }
-      for(var i=0;i<self.lineData.length;i++){
-        var lineBox=new C.Container();
-        self.stage.addChild(lineBox);
-        lineBox.x=self.lineData[i].x;
-        lineBox.y=self.lineData[i].y+125;
-        lineBox.rotation=self.lineData[i].rotate;
-        var arr=[];
-        //画外壳方形
-        for(var j=0;j<4;j++){
-          var line,ma=Math.ceil(Math.random()*2-1),
-            tweenobj;
-            if(j%2){
-              tweenobj=ma?self.lineData[i].h*2:-self.lineData[i].h*2;
-              line=self.glowLine(self.lineData[i].line,0,self.lineData[i].h,self.lineData[i].color);
-              var t=Math.floor(j/2);
-              line.x=self.lineData[i].w*t;
-              T.from(line,.5,{alpha:0,y:tweenobj,scale:0,delay:j *.1+Math.random()*i *.1,ease:Power1.easeIn,onComplete:tween,onCompleteParams:[line,{y:-tweenobj},i,j,lineBox,arr]});
-            }else{
-              tweenobj=ma?self.lineData[i].w*2:-self.lineData[i].w*2;
-              line=self.glowLine(self.lineData[i].line,self.lineData[i].w,0,self.lineData[i].color);
-              var t=j/2;
-              line.y=self.lineData[i].h*t;
-              T.from(line,.5,{alpha:0,x:tweenobj,scale:0,delay:j *.1+Math.random() *i *.1,ease:Power1.easeIn,onComplete:tween,onCompleteParams:[line,{x:-tweenobj},i,j,lineBox,arr]});
-            }
-            lineBox.addChild(line)
-        }

+      function addCirc(i, lineBox) {
+        end_num++;
+        if (self.lineData[i].circ.length > 0) {
+          for (var j = 0; j < self.lineData[i].circ.length; j++) {
+            var circ = new C.Shape();
+            circ.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).dc(self.lineData[i].circ[j].x + self.lineData[i].circ[j].r / 2, self.lineData[i].circ[j].y + self.lineData[i].circ[j].r / 2, self.lineData[i].circ[j].r / 2);
+            lineBox.addChild(circ);
+            T.from(circ, .5, {
+              alpha: 0
+            })
+          }
+        } else {
+          var circ = new C.Shape();
+          circ.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).dc(self.lineData[i].circ.x + self.lineData[i].circ.r / 2, self.lineData[i].circ.y + self.lineData[i].circ.r / 2, self.lineData[i].circ.r / 2);
+          lineBox.addChild(circ);
+          T.from(circ, .5, {
+            alpha: 0
+          })
+        }
+        if (end_num >= self.lineData.length) {
+          setTimeout(self.endTween, 500)
+        }
+      }
+
+      function tween(line, obj, i, j, lineBox, arr) {
+        var t = obj;
+        t.alpha = 0;
+        t.scale = 2;
+        t.ease = Power1.easeOut;
+        T.to(line, .5, t);
+        addLine(i, j, lineBox);
+        arr.push(j);
+        a_lineBox[i] = arr;
+        if (a_lineBox[i].length >= 4) {
+          addCirc(i, lineBox)
+        }
+      }
+      for (var i = 0; i < self.lineData.length; i++) {
+        var lineBox = new C.Container();
+        self.stage.addChild(lineBox);
+        lineBox.x = self.lineData[i].x;
+        lineBox.y = self.lineData[i].y + 125;
+        lineBox.rotation = self.lineData[i].rotate;
+        var arr = [];
+        //画外壳方形
+        for (var j = 0; j < 4; j++) {
+          var line, ma = Math.ceil(Math.random() * 2 - 1),
+            tweenobj;
+          if (j % 2) {
+            tweenobj = ma ? self.lineData[i].h * 2 : -self.lineData[i].h * 2;
+            line = self.glowLine(self.lineData[i].line, 0, self.lineData[i].h, self.lineData[i].color);
+            var t = Math.floor(j / 2);
+            line.x = self.lineData[i].w * t;
+            T.from(line, .5, {
+              alpha: 0,
+              y: tweenobj,
+              scale: 0,
+              delay: j * .1 + Math.random() * i * .1,
+              ease: Power1.easeIn,
+              onComplete: tween,
+              onCompleteParams: [line, {
+                y: -tweenobj
+              }, i, j, lineBox, arr]
+            });
+          } else {
+            tweenobj = ma ? self.lineData[i].w * 2 : -self.lineData[i].w * 2;
+            line = self.glowLine(self.lineData[i].line, self.lineData[i].w, 0, self.lineData[i].color);
+            var t = j / 2;
+            line.y = self.lineData[i].h * t;
+            T.from(line, .5, {
+              alpha: 0,
+              x: tweenobj,
+              scale: 0,
+              delay: j * .1 + Math.random() * i * .1,
+              ease: Power1.easeIn,
+              onComplete: tween,
+              onCompleteParams: [line, {
+                x: -tweenobj
+              }, i, j, lineBox, arr]
+            });
+          }
+          lineBox.addChild(line)
+        }
      }
    }
  };
-  window.bannerAnim=bannerAnim;
+  window.bannerAnim = bannerAnim;
 });
--- a/site/static/homeLoad.js
+++ b/site/static/homeLoad.js
@ -2,6 +2,9 @@
 * Created by jljsj on 15/6/3.
 */
 $(function() {
+  $.ajaxSetup({
+    cache: true
+  });
  var loadData = [
    "https://os.alipayobjects.com/rmsportal/PfhNcINWBAnMIWR.js", // easeljs-0.8.0.min.js
    "https://os.alipayobjects.com/rmsportal/nGFyCGHAblMWsYE.js", // TweenMax.min.js
--- a/site/static/script.js
+++ b/site/static/script.js
@ -65,39 +65,31 @@ InstantClickChangeFns.push(function() {
  var navFunc = {
    navStrArr: [],
    init: function() {
-      var self = this;
-      self.navBox = $(".nav");
-      self.navBar = self.navBox.find(".bar");
-      self.navList = self.navBox.find("ul li");
-      self.navNum = $(".current").index();
-      self.navBarAnim();
-      self.navResize(null);
-      $(window).bind("resize", self.navResize);
-      self.navBar.show();
+      this.navBox = $(".nav");
+      this.navBar = this.navBox.find(".bar");
+      this.navList = this.navBox.find("ul li");
+      this.navNum = $(".current").index();
+      this.navBarAnim();
+      this.highlightCurrentNav();
+      $(window).bind("resize", this.highlightCurrentNav);
+      this.navBar.show();
    },
-    navResize: function(e) {
-      var self = navFunc;
-      self.navBar.css("left", self.navList.width() * self.navNum);
-
-      self.navList.eq(self.navNum).find("a").addClass("hover");
+    highlightCurrentNav: function(target) {
+      target = target || this.navList.eq(this.navNum);
+      this.navBar.css({
+        left: target.position().left,
+        width: target.outerWidth()
+      });
    },
    navBarAnim: function() {
-      var self = this,
-        delay;
-
-      function startBarAnim(num) {
-        self.navBar.css("left", self.navList.width() * num);
-        self.navList.eq(num).find("a").addClass("hover");
-      }
+      var self = this, delay;
      self.navList.bind("mouseenter", function(e) {
        clearTimeout(delay);
-        var m = e.currentTarget;
-        self.navList.find("a").removeClass("hover");
-        self.navBar.addClass("barAnim").css("left", $(m).width() * $(m).index());
+        self.highlightCurrentNav($(e.currentTarget));
      });
      self.navList.bind("mouseleave", function(e) {
        delay = setTimeout(function() {
-          startBarAnim(self.navNum);
+          self.highlightCurrentNav();
        }, 500);
      });
    }
@ -106,20 +98,17 @@ InstantClickChangeFns.push(function() {
  var listFunc = {
    num: 0,
    init: function() {
-      var self = this;
-      self.listBox = $(".aside-container>ul");
-      if (!self.listBox.length) {
+      this.listBox = $(".aside-container>ul");
+      if (!this.listBox.length) {
        return;
      }
-      self.getUrlNum();
-      //添加标题事件；
-      self.addTitleEvent();
+      this.getUrlNum();
+      this.addTitleEvent();
    },
    getUrlNum: function() {
      var self = this,
        url = location.href,
        str = "";
-      //console.log(self.listBox.find("a"))
      for (var i = 0; i < self.listBox.find("a").length; i++) {
        var m = self.listBox.find("a").eq(i);
        if (m.attr("href") == "./" || url.indexOf(m.attr("href")) >= 0) {
--- a/site/static/style.css
+++ b/site/static/style.css
@ -158,18 +158,18 @@ a.logo {
 }

 .nav {
-  width: 30%;
  height: 80px;
  line-height: 80px;
  float: right;
  font-size: 0.875em;
  position: relative;
  margin-right: 25px;
+  overflow: hidden;
 }

 .nav ul li {
  float: left;
-  width: 20%;
+  padding: 0 22px;
  text-align: center;
 }

@ -187,13 +187,13 @@ a.nav-link-disabled {
 }

 .nav ul li.current a {
-  color: #71B5DE;
+  color: #6AC2F5;
  font-weight: 600;
 }

 .nav ul li a:hover,
 .nav ul li .hover {
-  color: #6EB4E0;
+  color: #6AC2F5;
 }

 .nav .bar {
@ -202,12 +202,9 @@ a.nav-link-disabled {
  position: absolute;
  top: 0;
  left: 0;
-  background: #6EB4E0;
+  background: #6AC2F5;
  display: none;
-}
-
-.barAnim {
-  transition: left .3s cubic-bezier(0.075, 0.82, 0.165, 1);
+  transition: left .3s cubic-bezier(0.075, 0.82, 0.165, 1), width 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
 }

 .main-box {
@ -2101,7 +2098,7 @@ a.entry-link:hover .anticon-smile {
  height: 440px;
  position: relative;
  border-radius: 0 0 5px 5px;
-  background: #f4f4f4;
+  background: #ececec;
 }
 .window-frame .status-bar {
  height: 2rem;
--- a/site/static/tomorrow.css
+++ b/site/static/tomorrow.css
@ -48,7 +48,7 @@ pre code {
  background: white;
  color: #666;
  font-family: Consolas, monospace;
-  line-height: 1.hljs-5;
+  line-height: 1.5;
  border: 1px solid #e9e9e9;
  padding: 10px 15px;
  border-radius: 6px;
--- a/site/templates/layout.html
+++ b/site/templates/layout.html
@ -18,7 +18,7 @@
    <!--[if IE 8]>
    <script src="https://t.alipayobjects.com/images/rmsweb/T1q8JiXftaXXXXXXXX.js"></script>
    <![endif]-->
-    <script src="https://as.alipayobjects.com/??component/console-polyfill/0.2.2/index.js,component/es5-shim/4.1.14/es5-shim.min.js,component/es5-shim/4.1.14/es5-sham.min.js,component/html5shiv/3.7.2/html5shiv.min.js,g/component/media-match/2.0.2/media.match.min.js"></script>
+    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.1.14/es5-shim.min.js,es5-shim/4.1.14/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
    <script src="https://a.alipayobjects.com/??bluebird/2.9.30/bluebird.js,jquery/jquery/1.11.1/jquery.js"></script>
    <script>
    (function() {
@ -67,11 +67,8 @@
          <li class="{%- if post.directory|rootDirectoryIn(['spec']) %}current{%- endif %}">
            <a href="{{static_url('../spec/introduce')}}">设计</a>
          </li>
-          <li>
-            <a class="nav-link-disabled" href="">案例</a>
-          </li>
          <li class="{%- if post.directory|rootDirectoryIn(['docs','components']) %}current{%- endif %}">
-            <a href="{{static_url('../docs/introduce')}}">React</a>
+            <a href="{{static_url('../docs/introduce')}}">React UI</a>
          </li>
          <li>
            <a target="_blank" href="https://github.com/ant-design/ant-design">Github</a>
--- a/spec/colors.md
+++ b/spec/colors.md
@ -261,11 +261,11 @@ let TintShadeTool = React.createClass({
    };
    return <div style={{margin: '40px 0'}}>
      <div>
-        <Clip onSuccess={this.copySuccess} data-clipboard-text={this.state.result} style={{border: 0, background: '#fff', cursor: 'pointer'}}>
-          <Tooltip title="点击色块复制色值">
+        <Tooltip title="点击色块复制色值">
+          <CopyToClipboard onCopy={this.copySuccess} text={this.state.result}>
            <div style={{backgroundColor: this.state.result}} className={'color-block ' + (this.state.justCopied ? 'copied' : '') + (this.state.darkBackground ? ' dark' : '')}></div>
-          </Tooltip>
-        </Clip>
+          </CopyToClipboard>
+        </Tooltip>
        <span style={{width: 188, display: 'inline-block', fontFamily: 'Consolas'}}>{this.state.result}</span>
        <input className="ant-input" style={{width: 80, color: this.state.color, marginRight: 8}} value={this.state.color} onChange={this.handleChangeColor} />
        <InputNumber style={{width: 70}} value={this.state.value} onChange={this.handleChangeValue} min={-100} max={100} step={5} />
@ -290,6 +290,7 @@ ReactDOM.render(<TintShadeTool />, document.getElementById('color-tint-shade-too
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
+  cursor: pointer;
 }
 .color-block:after {
  position: absolute;
--- a/style/components/badge.less
+++ b/style/components/badge.less
@ -14,10 +14,11 @@
    border-radius: 10px;
    min-width: 20px;
    background: @error-color;
+    border: 1px solid transparent;
    color: #fff;
-    line-height: 20px;
+    line-height: 18px;
    text-align: center;
-    padding: 0 7px;
+    padding: 0 6px;
    font-size: 12px;
    white-space: nowrap;
    transform-origin: -10% center;
@ -53,9 +54,16 @@
    animation: antZoomBadgeOut .3s @ease-in-back;
    animation-fill-mode: both;
  }
+
+  &-not-a-wrapper &-count {
+    top: auto;
+    display: block;
+    position: relative;
+    transform: translateX(0);
+  }
 }

-a .@{badge-prefix-cls} {
+a & {
  &-count:hover {
    background: tint(@error-color, 20%);
  }
--- a/style/components/collapse.less
+++ b/style/components/collapse.less
@ -10,10 +10,10 @@
 .@{collapse-prefix-cls} {
  background-color: #f4f4f4;
  border-radius: 3px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid @border-color-base;

  & > &-item {
-    border-top: 1px solid #d9d9d9;
+    border-top: 1px solid @border-color-base;
    &:first-child {
      border-top: 0;
    }
@ -65,11 +65,6 @@
    }
  }

-  &-collapsing {
-    transition-duration: .24s;
-    transition-timing-function: @ease-out-circ;
-  }
-
  &-item:last-child {
    > .@{collapse-prefix-cls}-content {
      border-radius: 0 0 3px 3px;
--- a/style/components/form.less
+++ b/style/components/form.less
@ -125,6 +125,10 @@ form {
    .input-lg();
  }

+  textarea.@{css-prefix}input {
+    height: auto;
+  }
+
  // input[type=file]
  .@{css-prefix}upload {
    background: transparent;
@ -140,10 +144,14 @@ form {
  .@{css-prefix}radio-inline,
  .@{css-prefix}checkbox-inline {
    display: inline-block;
-    margin-right: 16px;
    vertical-align: middle;
    font-weight: normal;
    cursor: pointer;
+    margin-left: 16px;
+
+    &:first-child {
+      margin-left: 0;
+    }
  }

  .@{css-prefix}checkbox-vertical,
--- a/style/components/select.less
+++ b/style/components/select.less
@ -234,13 +234,7 @@
      position: relative;
      overflow: hidden;
      transition: padding @duration @ease-in-out;
-      &:hover {
-        padding: 0 20px 0 10px;
-        .@{select-prefix-cls}-selection__choice__remove {
-          transform: scale(0.75);
-          opacity: 1;
-        }
-      }
+      padding: 0 20px 0 10px;
    }

    .@{select-prefix-cls}-selection__choice__content {
@ -254,23 +248,19 @@

    .@{select-prefix-cls}-selection__choice__remove {
      .iconfont-mixin();
-      color: #919191;
+      color: #999;
      line-height: 20px;
      cursor: pointer;
      display: inline-block;
      font-weight: bold;
+      transition: all 0.3s @ease-in-out;
      .iconfont-size-under-12px(8px);
      position: absolute;
      right: 4px;
      padding: 0 0 0 8px;
-      transform: scale(0);
-      opacity: 0;
-      transition: opacity @duration, transform @duration;
-      transform-origin: 50%;
      &:hover {
-        color: #333;
+        color: #404040;
      }
-
      &:before {
        content: "\e62d";
      }
--- a/style/components/slider.less
+++ b/style/components/slider.less
@ -11,7 +11,7 @@

 .@{slider-prefix-cls} {
  position: relative;
-  margin: 10px 0;
+  margin: 10px 8px;
  height: 12px;
  border-radius: 5px;
  background-color: #e9e9e9;
--- a/style/components/tabs.less
+++ b/style/components/tabs.less
@ -8,6 +8,7 @@
  position: relative;
  overflow: hidden;
  .clearfix;
+  color: @text-color;

  &-ink-bar {
    z-index: 1;
@ -30,7 +31,7 @@
  }

  &-tabs-bar {
-    border-bottom: 1px solid #e9e9e9;
+    border-bottom: 1px solid @border-color-base;
    margin-bottom: 16px;
  }

@ -76,17 +77,13 @@
      text-align: center;
      text-transform: none;
      font-family: sans-serif;
-      font-size: 12px;
+      .iconfont-size-under-12px(10px);

      &:before {
        display: block;
        font-family: "anticon" !important;
      }
    }
-
-    &:hover {
-      color: tint(@primary-color, 20%);
-    }
  }

  &-tab-btn-disabled {
@ -111,7 +108,6 @@
    &-icon:before {
      content: "\e601";
    }
-
    :root & {
      filter: none;
    }
@ -146,16 +142,7 @@
      clear: both;
    }

-    div.@{tab-prefix-cls}-tab-active {
-      > .@{tab-prefix-cls}-tab-inner,
-      > .@{tab-prefix-cls}-tab-inner:hover {
-        color: tint(@primary-color, 20%);
-        cursor: pointer;
-        text-decoration: none;
-      }
-    }
-
-    div.@{tab-prefix-cls}-tab-disabled {
+    .@{tab-prefix-cls}-tab-disabled {
      pointer-events: none;
      cursor: default;

@ -171,29 +158,31 @@
      box-sizing: border-box;
      position: relative;

-      > .@{tab-prefix-cls}-tab-inner {
+      &-inner {
        padding: 8px 20px;
        transition: color 0.3s @ease-in-out;
        display: block;
-        color: #666;
+        cursor: pointer;
+        text-decoration: none;
+
+        &:hover {
+          color: tint(@primary-color, 20%);
+        }
+
+        &:active {
+          color: shade(@primary-color, 5%);
+        }

        .anticon {
          width: 14px;
          height: 14px;
          margin-right: 8px;
-          line-height: 1.5;
        }
-
      }
+    }

-      > .@{tab-prefix-cls}-tab-inner:hover {
-        color: tint(@primary-color, 30%);
-        cursor: pointer;
-      }
-
-      > .@{tab-prefix-cls}-tab-inner:hover {
-        text-decoration: none;
-      }
+    .@{tab-prefix-cls}-tab-active .@{tab-prefix-cls}-tab-inner {
+      color: @primary-color;
    }
  }

@ -203,7 +192,7 @@

  &-mini &-tab {
    margin-right: 24px;
-    > .@{tab-prefix-cls}-tab-inner {
+    .@{tab-prefix-cls}-tab-inner {
      padding: 8px 16px;
    }
  }
@ -281,7 +270,7 @@
      &:last-child {
        margin-bottom: 0;
      }
-      > .@{tab-prefix-cls}-tab-inner {
+      .@{tab-prefix-cls}-tab-inner {
        padding: 8px 24px;
      }
    }
@ -329,16 +318,15 @@
  &-vertical&-left {
    .@{tab-prefix-cls}-tabs-bar {
      float: left;
+      border-right: 1px solid @border-color-split;
+      margin-right: -1px;
+      margin-bottom: 0;
    }
    .@{tab-prefix-cls}-tab {
-      > .@{tab-prefix-cls}-tab-inner {
+      .@{tab-prefix-cls}-tab-inner {
        text-align: right;
      }
    }
-    .@{tab-prefix-cls}-tabs-bar {
-      border-right: 1px solid #e9e9e9;
-      margin-right: -1px;
-    }
    .@{tab-prefix-cls}-nav-container {
      margin-right: -1px;
    }
@ -350,15 +338,16 @@
    }
    .@{tab-prefix-cls}-content {
      padding-left: 24px;
-      border-left: 1px solid #e9e9e9;
+      border-left: 1px solid @border-color-split;
    }
  }

  &-vertical&-right {
    .@{tab-prefix-cls}-tabs-bar {
      float: right;
-      border-left: 1px solid #e9e9e9;
+      border-left: 1px solid @border-color-split;
      margin-left: -1px;
+      margin-bottom: 0;
    }
    .@{tab-prefix-cls}-nav-container {
      margin-left: -1px;
@ -371,7 +360,82 @@
    }
    .@{tab-prefix-cls}-content {
      padding-right: 24px;
-      border-right: 1px solid #e9e9e9;
+      border-right: 1px solid @border-color-split;
+    }
+  }
+
+  &-bottom &-tabs-bar {
+    margin-bottom: 0;
+    margin-top: 16px;
+  }
+
+
+  // card style
+  &&-card &-ink-bar {
+    visibility: hidden;
+  }
+  &&-card &-tab {
+    margin: 0;
+    border: 1px solid transparent;
+    border-bottom: 0;
+    border-radius: 6px 6px 0 0;
+    transition: all 0.3s @ease-in-out;
+    background: #f9f9f9;
+    margin-right: 2px;
+  }
+  &&-card &-tab-inner {
+    padding: 7px 16px 6px;
+  }
+  &&-card &-tab-active {
+    background: #fff;
+    border-color: @border-color-base;
+    color: @primary-color;
+  }
+  &&-card &-tab-active &-tab-inner {
+    padding-bottom: 7px;
+  }
+  &&-card &-nav-wrap {
+    margin-bottom: 0;
+  }
+  &&-card &-tab-inner .anticon-cross {
+    margin-right: 0;
+    color: #999;
+    transition: all 0.3s @ease-in-out;
+    .iconfont-size-under-12px(9px);
+    width: 0;
+    text-align: right;
+    vertical-align: middle;
+    overflow: hidden;
+    &:hover {
+      color: #404040;
+      font-weight: bold;
+    }
+  }
+
+  &&-card &-tab-active .anticon-cross,
+  &&-card &-tab:hover .anticon-cross {
+    width: 16px;
+  }
+
+  &-extra-content {
+    float: right;
+    line-height: 32px;
+
+    .@{tab-prefix-cls}-new-tab {
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+      text-align: center;
+      cursor: pointer;
+      border-radius: 3px;
+      border: 1px solid @border-color-base;
+      font-size: 12px;
+      .iconfont-size-under-12px(10px);
+      color: #999;
+      transition: color 0.3s ease;
+      &:hover {
+        color: #404040;
+      }
    }
  }
 }
--- a/style/components/timepicker/Select.less
+++ b/style/components/timepicker/Select.less
@ -51,5 +51,13 @@
    &.@{timepicker-prefix-cls}-panel-select-option-selected {
      background: tint(@primary-color, 80%);
    }
+
+    &.@{timepicker-prefix-cls}-panel-select-option-disabled {
+      color: @btn-disable-color;
+      &:hover {
+        background: transparent;
+        cursor: @cursor-disabled;
+      }
+    }
  }
 }
--- a/style/mixins/compatibility.less
+++ b/style/mixins/compatibility.less
@ -32,7 +32,7 @@
 .iconfont-size-under-12px(@size, @rotate: 0deg) {
  display: inline-block;
  @font-scale: unit(@size/@font-size-base);
-  font-size: @font-scale;
+  font-size: @font-size-base;
  font-size: ~"@{size} \9"; // ie8-9
  transform: scale(@font-scale) rotate(@rotate);
  .ie-rotate-via-degrees(@rotate);
--- a/webpack.config.js
+++ b/webpack.config.js
@ -21,12 +21,16 @@ module.exports = {

  module: {
    loaders: [{
+      test: /\.jsx?$/,
+      exclude: /node_modules/,
+      loader: 'es3ify',
+    }, {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react', 'stage-0'],
-        plugins: ['add-module-exports'],
+        plugins: ['add-module-exports']
      }
    }, {
      test: /\.json$/,