diff --git a/components/collapse/demo/accordion.md b/components/collapse/demo/accordion.md
new file mode 100644
index 0000000000..1aa15540e4
--- /dev/null
+++ b/components/collapse/demo/accordion.md
@@ -0,0 +1,32 @@
+# 手风琴
+
+- 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(
+
+
+ {text}
+
+
+ {text}
+
+
+ {text}
+
+
+, document.getElementById('components-collapse-demo-accordion'));
+````
diff --git a/components/collapse/demo/basic.md b/components/collapse/demo/basic.md
new file mode 100644
index 0000000000..c54a3b408a
--- /dev/null
+++ b/components/collapse/demo/basic.md
@@ -0,0 +1,36 @@
+# 折叠面板
+
+- 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(
+
+
+ {text}
+
+
+ {text}
+
+
+ {text}
+
+
+, document.getElementById('components-collapse-demo-basic'));
+````
diff --git a/components/collapse/index.jsx b/components/collapse/index.jsx
index e69de29bb2..44c6c472b4 100644
--- a/components/collapse/index.jsx
+++ b/components/collapse/index.jsx
@@ -0,0 +1,19 @@
+'use strict';
+
+var Collapse = require('rc-collapse');
+var React = require('react');
+var prefixCls = 'ant-collapse';
+
+class AntCollapse extends React.Component {
+ render() {
+ return ;
+ }
+}
+
+AntCollapse.defaultProps = {
+ prefixCls: prefixCls
+};
+
+AntCollapse.Panel = Collapse.Panel;
+
+module.exports = AntCollapse;
diff --git a/components/collapse/index.md b/components/collapse/index.md
index 62f17a27c1..4be652d261 100644
--- a/components/collapse/index.md
+++ b/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 | 无 |
diff --git a/index.js b/index.js
index b469467007..e896593490 100644
--- a/index.js
+++ b/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;
diff --git a/package.json b/package.json
index 34a441759d..e6a859a3a2 100644
--- a/package.json
+++ b/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",
diff --git a/style/components/collapse.less b/style/components/collapse.less
new file mode 100644
index 0000000000..7d9e392a48
--- /dev/null
+++ b/style/components/collapse.less
@@ -0,0 +1,74 @@
+@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: .3s;
+ 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);
+ }
+ }
+}
diff --git a/style/components/index.less b/style/components/index.less
index 2b88bf6cae..71cb926142 100644
--- a/style/components/index.less
+++ b/style/components/index.less
@@ -16,3 +16,4 @@
@import "breadcrumb";
@import "inputNumber";
@import "typography";
+@import "collapse";