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

components/collapse/demo/accordion.md

+# 手风琴
+
+- order: 1
+
+手风琴，每次只打开一个tab。默认打开第一个
+
+---
+
+````jsx
+var Collapse = antd.Collapse;
+var Panel = Collapse.Panel;
+
+var text = `
+  A dog is a type of domesticated animal.
+  Known for its loyalty and faithfulness,
+  it can be found as a welcome guest in many households across the world.
+`;
+
+React.render(
+  <Collapse accordion={true}>
+    <Panel header={`This is panel header 1`} key="1">
+      <p>{text}</p>
+    </Panel>
+    <Panel header={`This is panel header 2`} key="2">
+      <p>{text}</p>
+    </Panel>
+    <Panel header={`This is panel header 3`} key="3">
+      <p>{text}</p>
+    </Panel>
+  </Collapse>
+, document.getElementById('components-collapse-demo-accordion'));
+````

components/collapse/demo/basic.md

+# 折叠面板
+
+- order: 0
+
+默认打开第二个面板。
+
+---
+
+````jsx
+var Collapse = antd.Collapse;
+var Panel = Collapse.Panel;
+
+function callback(key) {
+  console.log(key);
+}
+
+var text = `
+  A dog is a type of domesticated animal.
+  Known for its loyalty and faithfulness,
+  it can be found as a welcome guest in many households across the world.
+`;
+
+React.render(
+  <Collapse defaultActiveKey={["2"]} onChange={callback}>
+    <Panel header={`This is panel header 1`} key="1">
+      <p>{text}</p>
+    </Panel>
+    <Panel header={`This is panel header 2`} key="2">
+      <p>{text}</p>
+    </Panel>
+    <Panel header={`This is panel header 3`} key="3">
+      <p>{text}</p>
+    </Panel>
+  </Collapse>
+, document.getElementById('components-collapse-demo-basic'));
+````

components/collapse/demo/mix.md

+# 面板嵌套
+
+- order: 2
+
+手风琴嵌套折叠面板
+
+---
+
+````jsx
+var Collapse = antd.Collapse;
+var Panel = Collapse.Panel;
+
+function callback(key) {
+  console.log(key);
+}
+
+var text = `
+  A dog is a type of domesticated animal.
+  Known for its loyalty and faithfulness,
+  it can be found as a welcome guest in many households across the world.
+`;
+
+React.render(
+  <Collapse onChange={callback} accordion={true}>
+    <Panel header={`This is panel header 1`} key="1">
+      <Collapse defaultActiveKey="1">
+        <Panel header={`This is panel nest panel`} key="1">
+          <p>{text}</p>
+        </Panel>
+      </Collapse>
+    </Panel>
+    <Panel header={`This is panel header 2`} key="2">
+      <p>{text}</p>
+    </Panel>
+    <Panel header={`This is panel header 3`} key="3">
+      <p>{text}</p>
+    </Panel>
+  </Collapse>
+, document.getElementById('components-collapse-demo-mix'));
+````

components/collapse/index.jsx

+'use strict';
+
+var Collapse = require('rc-collapse');
+var React = require('react');
+var prefixCls = 'ant-collapse';
+
+class AntCollapse extends React.Component {
+  render() {
+    return <Collapse {...this.props} />;
+  }
+}
+
+AntCollapse.defaultProps = {
+  prefixCls: prefixCls
+};
+
+AntCollapse.Panel = Collapse.Panel;
+
+module.exports = AntCollapse;

components/collapse/index.md

@@ -11,3 +11,21 @@
 
 - 对复杂区域进行分组和隐藏，保持页面的整洁。
 - `手风琴` 是一种特殊的折叠面板，只允许单个内容区域展开。
+
+## API
+
+### Collapse
+
+| 参数             | 说明                                         | 类型     | 默认值                          |
+|------------------|----------------------------------------------|----------|---------------------------------|
+| activeKey        | 当前激活 tab 面板的 key| Array or String   | 默认无，accordion模式下默认第一个元素|
+| defaultActiveKey | 初始化选中面板的 key | String   | 无 |
+| onChange         | 切换面板的回调                               | Function | 无                              |
+
+
+### Collapse.Panel
+
+| 参数 | 说明             | 类型                    | 默认值 |
+|------|------------------|-------------------------|--------|
+| key  | 对应 activeKey   | String                  | 无     |
+| header | 面板头内容 | React.Element or String | 无     |

components/iconfont/index.md

@@ -13,11 +13,11 @@
 
 我们为每个图标赋予了语义化的命名。我们的命名规范如：
 
-- 1. 使用 `-` 来连接单词；
+- 使用 `-` 来连接单词；
 
-- 2. 实心和描线图标保持同名，用 `-o` 来区分，比如 `question-circle`(实心) 和 `question-circle-o`(描线)；
+- 实心和描线图标保持同名，用 `-o` 来区分，比如 `question-circle`(实心) 和 `question-circle-o`(描线)；
 
-- 3. 命名顺序：`[icon名]-[描线与否]-[方向]`。
+- 命名顺序：`[icon名]-[描线与否]-[方向]`。
 
 每个图标的类名需要在图标名称前加上 `anticon-` 前缀，如 `.anticon-question-circle`。
 

index.js

@@ -15,7 +15,8 @@ var antd = {
   confirm: require('./components/modal/confirm'),
   Steps: require('./components/steps'),
   InputNumber: require('./components/input-number'),
-  Switch: require('./components/switch')
+  Switch: require('./components/switch'),
+  Collapse: require('./components/Collapse')
 };
 
 module.exports = antd;

package.json

@@ -17,6 +17,7 @@
     "gregorian-calendar-format": "~3.0.1",
     "object-assign": "~3.0.0",
     "rc-calendar": "~3.10.0",
+    "rc-collapse": "~1.2.0",
     "rc-dialog": "~4.4.0",
     "rc-dropdown": "~1.1.1",
     "rc-input-number": "~2.0.1",
@@ -48,7 +49,6 @@
     "webpack": "^1.10.1",
     "webpack-dev-middleware": "^1.2.0"
   },
-
   "scripts": {
     "babel": "babel components --out-dir lib",
     "build": "npm run clean && webpack && nico build",

style/components/collapse.less

+@prefixCls: ant-collapse;
+@borderStyle: 1px solid #d9d9d9;
+
+#arrow {
+  .common(){
+    width: 0;
+    height: 0;
+    font-size: 0;
+    line-height: 0;
+  }
+  .right(@w, @h, @color) {
+    border-top: @w solid transparent;
+    border-bottom: @w solid transparent;
+    border-left: @h solid @color;
+  }
+
+  .bottom(@w, @h, @color) {
+    border-left: @w solid transparent;
+    border-right: @w solid transparent;
+    border-top: @h solid @color;
+  }
+}
+
+.@{prefixCls} {
+  background-color: #f3f5f7;
+  border-radius: 3px;
+  border-top: @borderStyle;
+  border-left: @borderStyle;
+  border-right: @borderStyle;
+
+  &-content {
+    height: 0;
+    opacity: 0;
+    transition-property: all;
+    transition-duration: .2s;
+    transition-timing-function: ease-in;
+    overflow: hidden;
+    color: #999;
+    padding: 0 16px;
+    background-color: #fbfbfb;
+    > p, > div {
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+  }
+
+  &-content-active {
+    opacity: 1;
+    height: auto;
+    border-bottom: @borderStyle;
+  }
+
+  &-header {
+    height: 38px;
+    line-height: 38px;
+    text-indent: 16px;
+    color: #666;
+    border-bottom: @borderStyle;
+    &:before {
+      display: inline-block;
+      content: '\20';
+      #arrow > .common();
+      #arrow > .right(3px, 4px, #666);
+      vertical-align: middle;
+      margin-right: 8px;
+    }
+  }
+
+  &-item-active {
+    .@{prefixCls}-header::before {
+      #arrow > .bottom(3px, 4px, #666);
+    }
+  }
+}

style/components/index.less

@@ -16,3 +16,4 @@
 @import "breadcrumb";
 @import "inputNumber";
 @import "typography";
+@import "collapse";

style/components/inputNumber.less

@@ -90,11 +90,10 @@
     cursor: pointer;
     &-inner {
       top: 2px;
-      left: 4px;
-      transform: rotate(270deg);
-      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
       &:before {
-        content: "\e611";
+        content: "\e600";
+        .ie-rotate(2);
+        transform: rotate(180deg);
       }
     }
   }
@@ -103,10 +102,8 @@
     cursor: pointer;
     &-inner {
       bottom: 2px;
-      transform: rotate(90deg);
-      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
       &:before {
-        content: "\e611";
+        content: "\e600";
       }
     }
   }

style/core/iconfont.less

@@ -55,12 +55,11 @@
 .@{iconfont-css-prefix}-retweet:before                {content:"\e659";}
 
 .@{iconfont-css-prefix}-right:before                  {content:"\e611";}
-.@{iconfont-css-prefix}-down                          {.ie-rotate(1);}
-.@{iconfont-css-prefix}-down:before                   {content:"\e611";.rotate(90deg);}
+.@{iconfont-css-prefix}-down:before                   {content:"\e600";}
 .@{iconfont-css-prefix}-left                          {.ie-rotate(2);}
 .@{iconfont-css-prefix}-left:before                   {content:"\e611";.rotate(180deg);}
-.@{iconfont-css-prefix}-up                            {.ie-rotate(3);}
-.@{iconfont-css-prefix}-up:before                     {content:"\e611";.rotate(270deg);}
+.@{iconfont-css-prefix}-up                            {.ie-rotate(2);}
+.@{iconfont-css-prefix}-up:before                     {content:"\e600";.rotate(180deg);}
 
 // 提示性图标
 .@{iconfont-css-prefix}-question:before               {content:"\e655";}
@@ -125,6 +124,7 @@
 .@{iconfont-css-prefix}-link:before                   {content:"\e640";}
 .@{iconfont-css-prefix}-logout:before                 {content:"\e642";}
 .@{iconfont-css-prefix}-mail:before                   {content:"\e643";}
+.@{iconfont-css-prefix}-menu-fold                     {.ie-rotate(2);}
 .@{iconfont-css-prefix}-menu-fold:before              {content:"\e645";.rotate(180deg);}
 .@{iconfont-css-prefix}-menu-unfold:before            {content:"\e645";}
 .@{iconfont-css-prefix}-mobile:before                 {content:"\e649";}
@@ -172,7 +172,8 @@
   .@{iconfont-css-prefix}-circle-o-left,
   .@{iconfont-css-prefix}-double-left,
   .@{iconfont-css-prefix}-verticle-left,
-  .@{iconfont-css-prefix}-backward {
+  .@{iconfont-css-prefix}-backward,
+  .@{iconfont-css-prefix}-menu-fold {
     filter: none;
   }
 }

style/themes/default/custom.less

@@ -20,7 +20,7 @@
 
 // ICONFONT
 @iconfont-css-prefix    : anticon;
-@icon-url               : "//at.alicdn.com/t/font_1436443521_8072257";
+@icon-url               : "//at.alicdn.com/t/font_1436496908_974446";
 
 // LINK
 @link-color             : @primary-color;