From 25180783593c272db29451c42ff77e421e6268e3 Mon Sep 17 00:00:00 2001
From: wangxueliang <wangxueliang@yidian-inc.com>
Date: Thu, 1 Feb 2018 18:18:05 +0800
Subject: [PATCH] add collapse and demo

---
 components/collapse/Collapse.vue              |  42 ++++++
 components/collapse/CollapsePanel.vue         |  27 ++++
 components/collapse/demo/accordion.md         |  36 +++++
 components/collapse/demo/basic.md             |  42 ++++++
 components/collapse/demo/borderless.md        |  36 +++++
 components/collapse/demo/custom.md            |  37 +++++
 components/collapse/demo/index.vue            |  53 ++++++++
 components/collapse/demo/mix.md               |  45 ++++++
 components/collapse/demo/noarrow.md           |  38 ++++++
 components/collapse/index.en-US.md            |  18 +++
 components/collapse/index.js                  |   5 +
 components/collapse/index.zh-CN.md            |  17 +++
 components/collapse/src/Collapse.vue          | 123 +++++++++++++++++
 components/collapse/src/Panel.vue             |  69 ++++++++++
 components/collapse/src/PanelContent.vue      |  32 +++++
 components/collapse/src/commonProps.js        |  32 +++++
 components/collapse/src/index.js              |   6 +
 .../collapse/src/openAnimationFactory.js      |  35 +++++
 components/collapse/style/index.js            |   2 +
 components/collapse/style/index.less          | 128 ++++++++++++++++++
 components/index.js                           |   4 +
 components/style.js                           |   2 +
 examples/demo.js                              |   1 +
 examples/routes.js                            |   2 +-
 24 files changed, 831 insertions(+), 1 deletion(-)
 create mode 100644 components/collapse/Collapse.vue
 create mode 100644 components/collapse/CollapsePanel.vue
 create mode 100644 components/collapse/demo/accordion.md
 create mode 100644 components/collapse/demo/basic.md
 create mode 100644 components/collapse/demo/borderless.md
 create mode 100644 components/collapse/demo/custom.md
 create mode 100644 components/collapse/demo/index.vue
 create mode 100644 components/collapse/demo/mix.md
 create mode 100644 components/collapse/demo/noarrow.md
 create mode 100644 components/collapse/index.en-US.md
 create mode 100644 components/collapse/index.js
 create mode 100644 components/collapse/index.zh-CN.md
 create mode 100644 components/collapse/src/Collapse.vue
 create mode 100644 components/collapse/src/Panel.vue
 create mode 100644 components/collapse/src/PanelContent.vue
 create mode 100644 components/collapse/src/commonProps.js
 create mode 100644 components/collapse/src/index.js
 create mode 100644 components/collapse/src/openAnimationFactory.js
 create mode 100644 components/collapse/style/index.js
 create mode 100644 components/collapse/style/index.less

diff --git a/components/collapse/Collapse.vue b/components/collapse/Collapse.vue
new file mode 100644
index 000000000..a1f39fbc4
--- /dev/null
+++ b/components/collapse/Collapse.vue
@@ -0,0 +1,42 @@
+<script>
+import PropTypes from '../_util/vue-types'
+import animation from '../_util/openAnimation'
+import { getOptionProps } from '../_util/props-util'
+import RcCollapse from './src'
+
+export default {
+  props: {
+    prefixCls: PropTypes.string.def('ant-collapse'),
+    bordered: PropTypes.bool.def(true),
+    openAnimation: PropTypes.any.def({ ...animation, appear () { } }),
+    activeKey: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.string),
+    ]),
+    defaultValue: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.string),
+    ]),
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.string),
+    ]),
+    change: PropTypes.func.def(() => {}),
+    accordion: PropTypes.bool,
+  },
+  render () {
+    const { prefixCls, bordered, $listeners } = this
+    const collapseClassName = {
+      [`${prefixCls}-borderless`]: !bordered,
+    }
+    const rcCollapeProps = {
+      props: {
+        ...getOptionProps(this),
+      },
+      class: collapseClassName,
+      on: $listeners,
+    }
+    return <RcCollapse {...rcCollapeProps}>{this.$slots.default}</RcCollapse>
+  },
+}
+</script>
diff --git a/components/collapse/CollapsePanel.vue b/components/collapse/CollapsePanel.vue
new file mode 100644
index 000000000..d3edde855
--- /dev/null
+++ b/components/collapse/CollapsePanel.vue
@@ -0,0 +1,27 @@
+<script>
+import PropTypes from '../_util/vue-types'
+import { getOptionProps } from '../_util/props-util'
+import RcCollapse from './src'
+import { panelProps } from './src/commonProps'
+
+export default {
+  props: {
+    name: PropTypes.string,
+    ...panelProps,
+  },
+  render () {
+    const { prefixCls, showArrow = true, $listeners } = this
+    const collapsePanelClassName = {
+      [`${prefixCls}-no-arrow`]: !showArrow,
+    }
+    const rcCollapePanelProps = {
+      props: {
+        ...getOptionProps(this),
+      },
+      class: collapsePanelClassName,
+      on: $listeners,
+    }
+    return <RcCollapse.Panel {...rcCollapePanelProps} >{this.$slots.default}</RcCollapse.Panel>
+  },
+}
+</script>
diff --git a/components/collapse/demo/accordion.md b/components/collapse/demo/accordion.md
new file mode 100644
index 000000000..90e2f6ca9
--- /dev/null
+++ b/components/collapse/demo/accordion.md
@@ -0,0 +1,36 @@
+<cn>
+#### 手风琴
+手风琴，每次只打开一个tab。默认打开第一个。
+</cn>
+
+<us>
+#### Accordion
+Accordion mode, only one panel can be expanded at a time. The first panel will be expanded by default.
+</us>
+
+```html
+<template>
+  <div>
+    <a-collapse accordion>
+      <a-collapse-panel header="This is panel header 1" name="1">
+        <p>{{text}}</p>
+      </a-collapse-panel>
+      <a-collapse-panel header="This is panel header 2" name="2" :disabled='false'>
+        <p>{{text}}</p>
+      </a-collapse-panel>
+      <a-collapse-panel header="This is panel header 3" name="3">
+        <p>{{text}}</p>
+      </a-collapse-panel>
+    </a-collapse>
+  </div>
+</template>
+<script>
+  export default {
+  data () {
+    return {
+      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.`,
+    }
+  },
+}
+</script>
+```
diff --git a/components/collapse/demo/basic.md b/components/collapse/demo/basic.md
new file mode 100644
index 000000000..6d3037988
--- /dev/null
+++ b/components/collapse/demo/basic.md
@@ -0,0 +1,42 @@
+<cn>
+#### 折叠面板
+可以同时展开多个面板，这个例子默认展开了第一个。
+</cn>
+
+<us>
+#### Collapse
+More than one panel can be expanded at a time, the first panel is initialized to be active in this case.
+</us>
+
+```html
+<template>
+  <div>
+    <a-collapse v-model="value" @change="changeActivekey">
+      <a-collapse-panel header="This is panel header 1" name="1">
+        <p>{{text}}</p>
+      </a-collapse-panel>
+      <a-collapse-panel header="This is panel header 2" name="2" :disabled='false'>
+        <p>{{text}}</p>
+      </a-collapse-panel>
+      <a-collapse-panel header="This is panel header 3" name="3" disabled>
+        <p>{{text}}</p>
+      </a-collapse-panel>
+    </a-collapse>
+  </div>
+</template>
+<script>
+  export default {
+  data () {
+    return {
+      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.`,
+      value: ['1']
+    }
+  },
+  methods: {
+    changeActivekey (key) {
+      console.log(key)
+    },
+  },
+}
+</script>
+```
diff --git a/components/collapse/demo/borderless.md b/components/collapse/demo/borderless.md
new file mode 100644
index 000000000..80ded4270
--- /dev/null
+++ b/components/collapse/demo/borderless.md
@@ -0,0 +1,36 @@
+<cn>
+#### 简洁风格
+一套没有边框的简洁样式。
+</cn>
+
+<us>
+#### Borderless
+A borderless style of Collapse.
+</us>
+
+```html
+<template>
+  <div>
+    <a-collapse :defaultValue="'1'" :bordered="false">
+      <a-collapse-panel header="This is panel header 1" name="1">
+        <p>{{text}}</p>
+      </a-collapse-panel>
+      <a-collapse-panel header="This is panel header 2" name="2" :disabled='false'>
+        <p>{{text}}</p>
+      </a-collapse-panel>
+      <a-collapse-panel header="This is panel header 3" name="3">
+        <p>{{text}}</p>
+      </a-collapse-panel>
+    </a-collapse>
+  </div>
+</template>
+<script>
+  export default {
+  data () {
+    return {
+      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.`,
+    }
+  },
+}
+</script>
+```
diff --git a/components/collapse/demo/custom.md b/components/collapse/demo/custom.md
new file mode 100644
index 000000000..ae19e02d2
--- /dev/null
+++ b/components/collapse/demo/custom.md
@@ -0,0 +1,37 @@
+<cn>
+#### 自定义面板
+自定义各个面板的背景色、圆角和边距。
+</cn>
+
+<us>
+#### Custom Panel
+Customize the background, border and margin styles for each panel.
+</us>
+
+```html
+<template>
+  <div>
+    <a-collapse :defaultValue="'1'" :bordered="false">
+      <a-collapse-panel header="This is panel header 1" name="1" :style="customStyle">
+        <p>{{text}}</p>
+      </a-collapse-panel>
+      <a-collapse-panel header="This is panel header 2" name="2" :style="customStyle">
+        <p>{{text}}</p>
+      </a-collapse-panel>
+      <a-collapse-panel header="This is panel header 3" name="3" :style="customStyle">
+        <p>{{text}}</p>
+      </a-collapse-panel>
+    </a-collapse>
+  </div>
+</template>
+<script>
+  export default {
+  data () {
+    return {
+      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.`,
+      customStyle: 'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden'
+    }
+  },
+}
+</script>
+```
diff --git a/components/collapse/demo/index.vue b/components/collapse/demo/index.vue
new file mode 100644
index 000000000..37ca57d19
--- /dev/null
+++ b/components/collapse/demo/index.vue
@@ -0,0 +1,53 @@
+<script>
+import Accordion from './accordion'
+import Basic from './basic'
+import Borderless from './borderless'
+import Custom from './custom'
+import Mix from './mix'
+import Noarrow from './noarrow'
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+
+const md = {
+  cn: `# Collapse折叠面板
+
+可以折叠/展开的内容区域。
+
+## 何时使用
+
+- 对复杂区域进行分组和隐藏，保持页面的整洁。
+- '手风琴' 是一种特殊的折叠面板，只允许单个内容区域展开。
+          ## 代码演示`,
+  us: `# When To Use
+
+- Can be used to group or hide complex regions to keep the page clean.
+- 'Accordion' is a special kind of 'Collapse', which allows only one panel to be expanded at a time.`,
+}
+export default {
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        <Basic/>
+        <br/>
+        <Accordion/>
+        <br/>
+        <Mix/>
+        <br/>
+        <Borderless/>
+        <br/>
+        <Custom/>
+        <br/>
+        <Noarrow/>
+        <br/>
+        <api>
+          <template slot='cn'>
+            <CN/>
+          </template>
+          <US/>
+        </api>
+      </div>
+    )
+  },
+}
+</script>
diff --git a/components/collapse/demo/mix.md b/components/collapse/demo/mix.md
new file mode 100644
index 000000000..bd7a3fdc1
--- /dev/null
+++ b/components/collapse/demo/mix.md
@@ -0,0 +1,45 @@
+<cn>
+#### 面板嵌套
+嵌套折叠面板。
+</cn>
+
+<us>
+#### Nested panel
+`Collapse` is nested inside the `Collapse`.
+</us>
+
+```html
+<template>
+  <div>
+    <a-collapse @change="changeActivekey">
+      <a-collapse-panel header="This is panel header 1" name="1">
+        <a-collapse :defaultValue="'1'">
+          <a-collapse-panel header="This is panel nest panel" name="1">
+            <p>{{text}}</p>
+          </a-collapse-panel>
+        </a-collapse>
+      </a-collapse-panel>
+      <a-collapse-panel header="This is panel header 2" name="2" :disabled='false'>
+        <p>{{text}}</p>
+      </a-collapse-panel>
+      <a-collapse-panel header="This is panel header 3" name="3">
+        <p>{{text}}</p>
+      </a-collapse-panel>
+    </a-collapse>
+  </div>
+</template>
+<script>
+  export default {
+  data () {
+    return {
+      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.`,
+    }
+  },
+  methods: {
+    changeActivekey (key) {
+      console.log(key)
+    },
+  },
+}
+</script>
+```
diff --git a/components/collapse/demo/noarrow.md b/components/collapse/demo/noarrow.md
new file mode 100644
index 000000000..eb9a805d9
--- /dev/null
+++ b/components/collapse/demo/noarrow.md
@@ -0,0 +1,38 @@
+<cn>
+#### 隐藏箭头
+你可以通过 `:showArrow="false"` 隐藏 `a-collapse-panel` 组件的箭头图标。
+</cn>
+
+<us>
+#### No arrow
+You can disable showing arrow icon by passing `:showArrow="false"` to `a-collapse-panel` component.
+</us>
+
+```html
+<template>
+  <div>
+    <a-collapse :defaultValue="'1'" @change="changeActivekey">
+      <a-collapse-panel header="This is panel header with arrow icon" name="1">
+        <p>{{text}}</p>
+      </a-collapse-panel>
+      <a-collapse-panel header="This is panel header with no arrow icon" name="2" :showArrow="false">
+        <p>{{text}}</p>
+      </a-collapse-panel>
+    </a-collapse>
+  </div>
+</template>
+<script>
+  export default {
+  data () {
+    return {
+      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.`,
+    }
+  },
+  methods: {
+    changeActivekey (key) {
+      console.log(key)
+    },
+  },
+}
+</script>
+```
diff --git a/components/collapse/index.en-US.md b/components/collapse/index.en-US.md
new file mode 100644
index 000000000..6053afb58
--- /dev/null
+++ b/components/collapse/index.en-US.md
@@ -0,0 +1,18 @@
+## API
+
+### Collapse
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| value | name of the active panel | \[]\|string | No default value. In `accordion` mode, it's the name of the first panel. |
+| defaultValue | name of the initial active panel | string | - |
+| change | Callback function executed when active panel is changed | Function | - |
+
+### Collapse.Panel
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| disabled | If `true`, panel cannot be opened or closed | boolean | `false` |
+| header | Title of the panel | string | - |
+| name | Unique name identifying the panel from among its siblings | string | - |
+| showArrow | If `false`, panel will not show arrow icon | boolean | `true` |
diff --git a/components/collapse/index.js b/components/collapse/index.js
new file mode 100644
index 000000000..db3809adc
--- /dev/null
+++ b/components/collapse/index.js
@@ -0,0 +1,5 @@
+import Collapse from './Collapse'
+import CollapsePanel from './CollapsePanel'
+
+Collapse.Panel = CollapsePanel
+export default Collapse
diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md
new file mode 100644
index 000000000..9a2715c59
--- /dev/null
+++ b/components/collapse/index.zh-CN.md
@@ -0,0 +1,17 @@
+## API
+
+### Collapse
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 当前激活 tab 面板的 name | []\|string | 默认无，accordion模式下默认第一个元素 |
+| defaultValue | 初始化选中面板的 name | string | 无 |
+| change | 切换面板的回调 | Function | 无 |
+
+### Collapse.Panel
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| disabled | 禁用后的面板展开与否将无法通过用户交互改变 | boolean | false |
+| header | 面板头内容 | string | 无 |
+| name | 对应 activeKey | string | 无 |
diff --git a/components/collapse/src/Collapse.vue b/components/collapse/src/Collapse.vue
new file mode 100644
index 000000000..fa2cf050e
--- /dev/null
+++ b/components/collapse/src/Collapse.vue
@@ -0,0 +1,123 @@
+<script>
+import PropTypes from '../../_util/vue-types'
+import BaseMixin from '../../_util/BaseMixin'
+import { hasProp } from '../../_util/props-util'
+import { cloneElement, getPropsData, isEmptyElement } from '../../_util/vnode'
+import openAnimationFactory from './openAnimationFactory'
+import { collapseProps } from './commonProps'
+
+function _toArray (activeKey) {
+  let currentActiveKey = activeKey
+  if (!Array.isArray(currentActiveKey)) {
+    currentActiveKey = currentActiveKey ? [currentActiveKey] : []
+  }
+  return currentActiveKey
+}
+
+export default {
+  name: 'Collapse',
+  mixins: [BaseMixin],
+  props: {
+    ...collapseProps,
+    openAnimation: PropTypes.object,
+  },
+  data () {
+    const { value, defaultValue, openAnimation, prefixCls } = this.$props
+    let currentActiveKey = defaultValue
+    if (hasProp(this, 'value')) {
+      currentActiveKey = value
+    }
+    const currentOpenAnimations = openAnimation || openAnimationFactory(prefixCls)
+    return {
+      currentOpenAnimations,
+      stateActiveKey: _toArray(currentActiveKey),
+    }
+  },
+  methods: {
+    onClickItem (key) {
+      let activeKey = this.stateActiveKey
+      if (this.accordion) {
+        activeKey = activeKey[0] === key ? [] : [key]
+      } else {
+        activeKey = [...activeKey]
+        const index = activeKey.indexOf(key)
+        const isActive = index > -1
+        if (isActive) {
+        // remove active state
+          activeKey.splice(index, 1)
+        } else {
+          activeKey.push(key)
+        }
+      }
+      this.setActiveKey(activeKey)
+    },
+    getItems () {
+      const activeKey = this.stateActiveKey
+      const { prefixCls, accordion, destroyInactivePanel } = this.$props
+      const newChildren = []
+      this.$slots.default.forEach((child, index) => {
+        if (isEmptyElement(child)) return
+        const { header, headerClass, disabled, name = String(index) } = getPropsData(child)
+        let isActive = false
+        if (accordion) {
+          isActive = activeKey[0] === name
+        } else {
+          isActive = activeKey.indexOf(name) > -1
+        }
+
+        let panelEvents = {}
+        if (!disabled && disabled !== '') {
+          panelEvents = {
+            itemClick: () => { this.onClickItem(name) },
+          }
+        }
+
+        const props = {
+          props: {
+            header,
+            headerClass,
+            isActive,
+            prefixCls,
+            destroyInactivePanel,
+            openAnimation: this.currentOpenAnimations,
+          },
+          on: {
+            ...panelEvents,
+          },
+        }
+
+        newChildren.push(cloneElement(child, props))
+      })
+      return newChildren
+    },
+    setActiveKey (activeKey) {
+      this.setState({ stateActiveKey: activeKey })
+      this.$emit('change', this.accordion ? activeKey[0] : activeKey)
+      this.$emit('input', this.accordion ? activeKey[0] : activeKey)
+    },
+  },
+  watch: {
+    value (val) {
+      this.setState({
+        stateActiveKey: _toArray(val),
+      })
+    },
+    openAnimation (val) {
+      this.setState({
+        currentOpenAnimations: val,
+      })
+    },
+  },
+  render () {
+    const { prefixCls } = this.$props
+    const collapseClassName = {
+      [prefixCls]: true,
+    }
+    return (
+      <div class={collapseClassName}>
+        {this.getItems()}
+      </div>
+    )
+  },
+}
+</script>
diff --git a/components/collapse/src/Panel.vue b/components/collapse/src/Panel.vue
new file mode 100644
index 000000000..b2e1be2d0
--- /dev/null
+++ b/components/collapse/src/Panel.vue
@@ -0,0 +1,69 @@
+<script>
+import PanelContent from './PanelContent'
+import { panelProps } from './commonProps'
+
+export default {
+  name: 'Panel',
+  props: {
+    ...panelProps,
+  },
+  methods: {
+    handleItemClick () {
+      this.$emit('itemClick')
+    },
+  },
+  render () {
+    const {
+      prefixCls,
+      header,
+      headerClass,
+      isActive,
+      showArrow,
+      destroyInactivePanel,
+      disabled,
+      openAnimation,
+    } = this.$props
+    const { $slots } = this
+
+    const transitionProps = {
+      props: Object.assign({
+        appear: false,
+        css: false,
+      }),
+      on: { ...openAnimation },
+    }
+    const headerCls = {
+      [`${prefixCls}-header`]: true,
+      [headerClass]: headerClass,
+    }
+    const itemCls = {
+      [`${prefixCls}-item`]: true,
+      [`${prefixCls}-item-active`]: isActive,
+      [`${prefixCls}-item-disabled`]: disabled,
+    }
+    return (
+      <div class={itemCls} role='tablist'>
+        <div
+          class={headerCls}
+          onClick={this.handleItemClick.bind(this)}
+          role='tab'
+          aria-expanded={isActive}
+        >
+          {showArrow && <i class='arrow' />}
+          {header}
+        </div><transition
+          {...transitionProps}
+        >
+          <PanelContent
+            prefixCls={prefixCls}
+            isActive={isActive}
+            destroyInactivePanel={destroyInactivePanel}
+          >
+            {$slots.default}
+          </PanelContent>
+        </transition>
+      </div>
+    )
+  },
+}
+</script>
diff --git a/components/collapse/src/PanelContent.vue b/components/collapse/src/PanelContent.vue
new file mode 100644
index 000000000..36c13bb14
--- /dev/null
+++ b/components/collapse/src/PanelContent.vue
@@ -0,0 +1,32 @@
+<script>
+import PropTypes from '../../_util/vue-types'
+
+export default {
+  name: 'PanelContent',
+  props: {
+    prefixCls: PropTypes.string,
+    isActive: PropTypes.bool,
+    destroyInactivePanel: PropTypes.bool,
+  },
+  render () {
+    if (!this.isActive) {
+      return null
+    }
+    const { prefixCls, isActive, destroyInactivePanel } = this.$props
+    const { $slots } = this
+    const contentCls = {
+      [`${prefixCls}-content`]: true,
+      [`${prefixCls}-content-active`]: isActive,
+      [`${prefixCls}-content-inactive`]: !isActive,
+    }
+    const child = !isActive && destroyInactivePanel ? null
+      : <div class={`${prefixCls}-content-box`}>{$slots.default}</div>
+    return (
+      <div
+        class={contentCls}
+        role='tabpanel'
+      >{child}</div>
+    )
+  },
+}
+</script>
diff --git a/components/collapse/src/commonProps.js b/components/collapse/src/commonProps.js
new file mode 100644
index 000000000..a4cb6d14a
--- /dev/null
+++ b/components/collapse/src/commonProps.js
@@ -0,0 +1,32 @@
+import PropTypes from '../../_util/vue-types'
+
+const collapseProps = {
+  prefixCls: PropTypes.string,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
+  defaultValue: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
+  accordion: PropTypes.bool.def(false),
+  destroyInactivePanel: PropTypes.bool.def(false),
+}
+
+const panelProps = {
+  openAnimation: PropTypes.object,
+  prefixCls: PropTypes.string,
+  header: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.node,
+  ]),
+  headerClass: PropTypes.string.def(''),
+  showArrow: PropTypes.bool.def(true),
+  isActive: PropTypes.bool.def(false),
+  destroyInactivePanel: PropTypes.bool.def(false),
+  disabled: PropTypes.bool.def(false),
+}
+
+export { collapseProps, panelProps }
diff --git a/components/collapse/src/index.js b/components/collapse/src/index.js
new file mode 100644
index 000000000..ce0739f3c
--- /dev/null
+++ b/components/collapse/src/index.js
@@ -0,0 +1,6 @@
+import CollapsePanel from './Panel'
+import Collapse from './Collapse'
+
+Collapse.Panel = CollapsePanel
+
+export default Collapse
diff --git a/components/collapse/src/openAnimationFactory.js b/components/collapse/src/openAnimationFactory.js
new file mode 100644
index 000000000..c8cc8b41a
--- /dev/null
+++ b/components/collapse/src/openAnimationFactory.js
@@ -0,0 +1,35 @@
+import cssAnimation from 'css-animation'
+
+function animate (node, show, transitionName, done) {
+  let height
+  return cssAnimation(node, transitionName, {
+    start () {
+      if (!show) {
+        node.style.height = `${node.offsetHeight}px`
+      } else {
+        height = node.offsetHeight
+        node.style.height = 0
+      }
+    },
+    active () {
+      node.style.height = `${show ? height : 0}px`
+    },
+    end () {
+      node.style.height = ''
+      done()
+    },
+  })
+}
+
+function animation (prefixCls) {
+  return {
+    enter (node, done) {
+      return animate(node, true, `${prefixCls}-anim`, done)
+    },
+    leave (node, done) {
+      return animate(node, false, `${prefixCls}-anim`, done)
+    },
+  }
+}
+
+export default animation
diff --git a/components/collapse/style/index.js b/components/collapse/style/index.js
new file mode 100644
index 000000000..cf31ed80f
--- /dev/null
+++ b/components/collapse/style/index.js
@@ -0,0 +1,2 @@
+import '../../style/index.less'
+import './index.less'
diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less
new file mode 100644
index 000000000..39e59f1d8
--- /dev/null
+++ b/components/collapse/style/index.less
@@ -0,0 +1,128 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
+@collapse-prefix-cls: ~"@{ant-prefix}-collapse";
+
+@collapse-header-bg: @background-color-light;
+@collapse-active-bg: @background-color-base;
+
+.collapse-close() {
+  transform: rotate(0);
+}
+.collapse-open() {
+  transform: rotate(90deg);
+}
+
+.@{collapse-prefix-cls} {
+  .reset-component;
+  background-color: @collapse-header-bg;
+  border-radius: @border-radius-base;
+  border: @border-width-base @border-style-base @border-color-base;
+  border-bottom: 0;
+
+  & > &-item {
+    border-bottom: @border-width-base @border-style-base @border-color-base;
+
+    &:last-child {
+      &,
+      & > .@{collapse-prefix-cls}-header {
+        border-radius: 0 0 @border-radius-base @border-radius-base;
+      }
+    }
+
+    > .@{collapse-prefix-cls}-header {
+      line-height: 22px;
+      padding: 12px 0 12px 40px;
+      color: @heading-color;
+      cursor: pointer;
+      position: relative;
+      transition: all .3s;
+
+      .arrow {
+        .iconfont-mixin();
+        .collapse-close();
+        font-size: @font-size-sm;
+        position: absolute;
+        display: inline-block;
+        line-height: 46px;
+        vertical-align: top;
+        transition: transform 0.24s;
+        top: 0;
+        left: @padding-md;
+        &:before {
+          content: "\E61F";
+        }
+      }
+    }
+
+    &.@{collapse-prefix-cls}-no-arrow {
+      > .@{collapse-prefix-cls}-header {
+        padding-left: 12px;
+      }
+    }
+  }
+
+  &-anim-active {
+    transition: height .2s @ease-out;
+  }
+
+  &-content {
+    overflow: hidden;
+    color: @text-color;
+    padding: 0 @padding-md;
+    background-color: @component-background;
+    border-top: @border-width-base @border-style-base @border-color-base;
+
+    & > &-box {
+      padding-top: @padding-md;
+      padding-bottom: @padding-md;
+    }
+
+    &-inactive {
+      display: none;
+    }
+  }
+
+  &-item:last-child {
+    > .@{collapse-prefix-cls}-content {
+      border-radius: 0 0 @border-radius-base @border-radius-base;
+    }
+  }
+
+  & > &-item > &-header[aria-expanded="true"] {
+    .arrow {
+      .collapse-open();
+    }
+  }
+
+  &-borderless {
+    background-color: @component-background;
+    border: 0;
+  }
+
+  &-borderless > &-item {
+    border-bottom: 1px solid @border-color-base;
+  }
+
+  &-borderless > &-item:last-child,
+  &-borderless > &-item:last-child &-header {
+    border-radius: 0;
+  }
+
+  &-borderless > &-item > &-content {
+    background-color: transparent;
+    border-top: 0;
+  }
+
+  &-borderless > &-item > &-content > &-content-box {
+    padding-top: 4px;
+  }
+
+  & &-item-disabled > &-header {
+    &,
+    & > .arrow {
+      cursor: not-allowed;
+      color: @disabled-color;
+    }
+  }
+}
diff --git a/components/index.js b/components/index.js
index 610185856..dbc9732f0 100644
--- a/components/index.js
+++ b/components/index.js
@@ -55,3 +55,7 @@ const DropdownButton = Dropdown.Button
 export { Dropdown, DropdownButton }
 
 export { default as Divider } from './divider'
+
+import Collapse from './collapse'
+const CollapsePanel = Collapse.Panel
+export { Collapse, CollapsePanel }
diff --git a/components/style.js b/components/style.js
index a4554cf93..ab2b465ea 100644
--- a/components/style.js
+++ b/components/style.js
@@ -16,3 +16,5 @@ import './popconfirm/style'
 import './menu/style'
 import './dropdown/style'
 import './divider/style'
+import './card/style'
+import './collapse/style'
diff --git a/examples/demo.js b/examples/demo.js
index 8c8beddc1..874cade54 100644
--- a/examples/demo.js
+++ b/examples/demo.js
@@ -18,4 +18,5 @@ export { default as tag } from 'antd/tag/demo/index.vue'
 export { default as tooltip } from 'antd/tooltip/demo/index.vue'
 export { default as dropdown } from 'antd/dropdown/demo/index.vue'
 export { default as divider } from 'antd/divider/demo/index.vue'
+export { default as collapse } from 'antd/collapse/demo/index.vue'
 
diff --git a/examples/routes.js b/examples/routes.js
index 1b61e245f..ee71d394d 100644
--- a/examples/routes.js
+++ b/examples/routes.js
@@ -1,7 +1,7 @@
 import Demo from './components/demo.vue'
 const AsyncComp = () => {
   return {
-    component: import(`../components/dropdown/demo/sub-menu.md`),
+    component: import(`../components/collapse/demo/index.vue`),
   }
 }
 export default [