diff --git a/.gitignore b/.gitignore
index 9416a7fd1..51b07a34e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -59,3 +59,6 @@ typings/
 .idea
 .DS_Store
 dist/
+
+# 备份文件
+/components/test/*
diff --git a/components/_util/ContainerRender.vue b/components/_util/ContainerRender.vue
index d949112bc..19c0db2be 100644
--- a/components/_util/ContainerRender.vue
+++ b/components/_util/ContainerRender.vue
@@ -40,18 +40,25 @@ export default {
       }
     },
 
-    renderComponent (props, ready) {
+    renderComponent (props = {}, ready) {
       const { visible, getComponent, forceRender, getContainer, parent } = this
       const self = this
       if (visible || parent.$refs._component || forceRender) {
+        let el = this.componentEl
         if (!this.container) {
           this.container = getContainer()
+          el = document.createElement('div')
+          this.componentEl = el
+          this.container.appendChild(el)
         }
 
         if (!this._component) {
           this._component = new Vue({
+            data: {
+              comProps: props,
+            },
             parent: self.parent,
-            el: self.container,
+            el: el,
             mounted () {
               this.$nextTick(() => {
                 if (ready) {
@@ -60,9 +67,11 @@ export default {
               })
             },
             render () {
-              return getComponent(props)
+              return getComponent(this.comProps)
             },
           })
+        } else {
+          this._component.comProps = props
         }
       }
     },
diff --git a/components/_util/props-util.js b/components/_util/props-util.js
index ea74b6b4f..465278457 100644
--- a/components/_util/props-util.js
+++ b/components/_util/props-util.js
@@ -1,12 +1,18 @@
-
-const parseStyleText = (cssText = '') => {
+const camelizeRE = /-(\w)/g
+const camelize = (str) => {
+  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
+}
+const parseStyleText = (cssText = '', camel) => {
   const res = {}
   const listDelimiter = /;(?![^(]*\))/g
   const propertyDelimiter = /:(.+)/
   cssText.split(listDelimiter).forEach(function (item) {
     if (item) {
       const tmp = item.split(propertyDelimiter)
-      tmp.length > 1 && (res[tmp[0].trim()] = tmp[1].trim())
+      if (tmp.length > 1) {
+        const k = camel ? camelize(tmp[0].trim()) : tmp[0].trim()
+        res[k] = tmp[1].trim()
+      }
     }
   })
   return res
@@ -39,6 +45,18 @@ const getSlotOptions = (ele) => {
   return componentOptions ? componentOptions.Ctor.options || {} : {}
 }
 const getOptionProps = (instance) => {
+  if (instance.componentOptions) {
+    const componentOptions = instance.componentOptions
+    const { propsData = {}, Ctor = {}} = componentOptions
+    const props = (Ctor.options || {}).props || {}
+    const res = {}
+    for (const [k, v] of Object.entries(props)) {
+      if (v.default !== undefined) {
+        res[k] = v
+      }
+    }
+    return { ...res, ...propsData }
+  }
   const { $options = {}, $props = {}} = instance
   return filterProps($props, $options.propsData)
 }
@@ -120,14 +138,22 @@ export function getClass (ele) {
   }
   return cls
 }
-export function getStyle (ele) {
+export function getStyle (ele, camel) {
   let data = {}
   if (ele.data) {
     data = ele.data
   } else if (ele.$vnode && ele.$vnode.data) {
     data = ele.$vnode.data
   }
-  return data.style || parseStyleText(data.staticStyle || '')
+  let style = data.style || data.staticStyle
+  if (typeof style === 'string') {
+    style = parseStyleText(style, camel)
+  } else if (camel && style) { // 驼峰化
+    const res = {}
+    Object.keys(style).forEach(k => (res[camelize(k)] = style[k]))
+    return res
+  }
+  return style
 }
 
 export function getComponentName (opts) {
diff --git a/components/alert/demo/banner.md b/components/alert/demo/banner.md
new file mode 100644
index 000000000..da0d10833
--- /dev/null
+++ b/components/alert/demo/banner.md
@@ -0,0 +1,23 @@
+<cn>
+#### 顶部公告
+页面顶部通告形式，默认有图标且`type` 为 'warning'。
+</cn>
+
+<us>
+#### Banner
+Display Alert as a banner at top of page.
+</us>
+
+```html
+<template>
+  <div>
+    <a-alert message="Warning text" banner />
+    <br />
+    <a-alert message="Very long warning text warning text text text text text text text" banner closable />
+    <br />
+    <a-alert :showIcon="false" message="Warning text without icon" banner />
+    <br />
+    <a-alert type="error" message="Error text" banner />
+  </div>
+</template>
+```
diff --git a/components/alert/demo/basic.md b/components/alert/demo/basic.md
new file mode 100644
index 000000000..d3e81b4cf
--- /dev/null
+++ b/components/alert/demo/basic.md
@@ -0,0 +1,15 @@
+<cn>
+#### 基本
+最简单的用法，适用于简短的警告提示。
+</cn>
+
+<us>
+#### basic
+The simplest usage for short messages.
+</us>
+
+```html
+<template>
+  <a-alert message="Success Text" type="success" />
+</template>
+```
diff --git a/components/alert/demo/closable.md b/components/alert/demo/closable.md
new file mode 100644
index 000000000..d42ca2859
--- /dev/null
+++ b/components/alert/demo/closable.md
@@ -0,0 +1,38 @@
+<cn>
+#### 可关闭的警告提示
+显示关闭按钮，点击可关闭警告提示。
+</cn>
+
+<us>
+#### Closable
+To show close button.
+</us>
+
+```html
+<template>
+  <div>
+    <a-alert
+      message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
+      type="warning"
+      closable
+      @close="onClose"
+    />
+    <a-alert
+      message="Error Text"
+      description="Error Description Error Description Error Description Error Description Error Description Error Description"
+      type="error"
+      closable
+      @close="onClose"
+    />
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    onClose(e) {
+      console.log(e, 'I was closed.');
+    }
+  }
+}
+</script>
+```
diff --git a/components/alert/demo/close-text.md b/components/alert/demo/close-text.md
new file mode 100644
index 000000000..06516026e
--- /dev/null
+++ b/components/alert/demo/close-text.md
@@ -0,0 +1,15 @@
+<cn>
+#### 自定义关闭
+可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。
+</cn>
+
+<us>
+#### Customized Close Text
+Replace the default icon with customized text.
+</us>
+
+```html
+<template>
+  <a-alert message="Info Text" type="info" closeText="Close Now" />
+</template>
+```
diff --git a/components/alert/demo/description.md b/components/alert/demo/description.md
new file mode 100644
index 000000000..8da625522
--- /dev/null
+++ b/components/alert/demo/description.md
@@ -0,0 +1,39 @@
+<cn>
+#### 含有辅助性文字介绍
+含有辅助性文字介绍的警告提示。
+</cn>
+
+<us>
+#### Description
+Additional description for alert message.
+</us>
+
+```html
+<template>
+  <div>
+    <a-alert
+      message="Success Text"
+      type="success"
+    >
+      <p slot="description">
+        Success Description <span style="color: red">Success</span> Description Success Description
+      </p>
+    </a-alert>
+    <a-alert
+      message="Info Text"
+      description="Info Description Info Description Info Description Info Description"
+      type="info"
+    />
+    <a-alert
+      message="Warning Text"
+      description="Warning Description Warning Description Warning Description Warning Description"
+      type="warning"
+    />
+    <a-alert
+      message="Error Text"
+      description="Error Description Error Description Error Description Error Description"
+      type="error"
+    />
+  </div>
+</template>
+```
diff --git a/components/alert/demo/icon.md b/components/alert/demo/icon.md
new file mode 100644
index 000000000..68f32c6e7
--- /dev/null
+++ b/components/alert/demo/icon.md
@@ -0,0 +1,44 @@
+<cn>
+#### 图标
+可口的图标让信息类型更加醒目。
+</cn>
+
+<us>
+#### Icon
+Decent icon make information more clear and more friendly.
+</us>
+
+```html
+<template>
+  <div>
+    <a-alert message="Success Tips" type="success" showIcon />
+    <a-alert message="Informational Notes" type="info" showIcon />
+    <a-alert message="Warning" type="warning" showIcon />
+    <a-alert message="Error" type="error" showIcon />
+    <a-alert
+      message="Success Tips"
+      description="Detailed description and advices about successful copywriting."
+      type="success"
+      showIcon
+    />
+    <a-alert
+      message="Informational Notes"
+      description="Additional description and informations about copywriting."
+      type="info"
+      showIcon
+    />
+    <a-alert
+      message="Warning"
+      description="This is a warning notice about copywriting."
+      type="warning"
+      showIcon
+    />
+    <a-alert
+      message="Error"
+      description="This is an error message about copywriting."
+      type="error"
+      showIcon
+    />
+  </div>
+</template>
+```
diff --git a/components/alert/demo/index.vue b/components/alert/demo/index.vue
new file mode 100644
index 000000000..038f85940
--- /dev/null
+++ b/components/alert/demo/index.vue
@@ -0,0 +1,55 @@
+<script>
+import Banner from './banner'
+import Basic from './basic'
+import Closable from './closable'
+import CloseText from './close-text'
+import Description from './description'
+import Icon from './icon'
+import Style from './style'
+
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+const md = {
+  cn: `# Alert 警告提示
+          警告提示，展现需要关注的信息。
+## 何时使用
+- 当某个页面需要向用户显示警告的信息时。
+- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
+          ## 代码演示`,
+  us: `# Alert
+          Alert component for feedback.
+## When To Use
+- When you need to show alert messages to users.
+- When you need a persistent static container which is closable by user actions.
+`,
+}
+export default {
+  category: 'Components',
+  subtitle: '警告提示',
+  type: 'Feedback',
+  title: 'Alert',
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        < Banner/>
+        <Basic/>
+        <Closable/>
+        <CloseText/>
+        <Description/>
+        <Icon/>
+        <Style/>
+        <api>
+          <CN slot='cn' />
+          <US/>
+        </api>
+      </div>
+    )
+  },
+}
+</script>
+<style>
+.ant-alert {
+  margin-bottom: 16px;
+}
+</style>
diff --git a/components/alert/demo/style.md b/components/alert/demo/style.md
new file mode 100644
index 000000000..47a111bf3
--- /dev/null
+++ b/components/alert/demo/style.md
@@ -0,0 +1,20 @@
+<cn>
+#### 四种样式
+共有四种样式 `success`、`info`、`warning`、`error`。
+</cn>
+
+<us>
+#### More types
+There are 4 types of Alert: `success`, `info`, `warning`, `error`.
+</us>
+
+```html
+<template>
+  <div>
+    <a-alert message="Success Text" type="success" />
+    <a-alert message="Info Text" type="info" />
+    <a-alert message="Warning Text" type="warning" />
+    <a-alert message="Error Text" type="error" />
+  </div>
+</template>
+```
diff --git a/components/alert/index.en-US.md b/components/alert/index.en-US.md
new file mode 100644
index 000000000..cbc01cf36
--- /dev/null
+++ b/components/alert/index.en-US.md
@@ -0,0 +1,18 @@
+
+## API
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| banner | Whether to show as banner | boolean | false |
+| closable | Whether Alert can be closed | boolean | - |
+| closeText | Close text to show | string\|slot | - |
+| description | Additional content of Alert | string\|slot | - |
+| message | Content of Alert | string\|slot | - |
+| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true |
+| iconType | Icon type, effective when `showIcon` is `true` | string | - |
+| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |
+
+### events
+| Events Name | Description | Arguments |
+| --- | --- | --- |
+| close | Callback when Alert is closed | Function |
diff --git a/components/alert/index.vue b/components/alert/index.vue
new file mode 100644
index 000000000..613a1fe63
--- /dev/null
+++ b/components/alert/index.vue
@@ -0,0 +1,133 @@
+<script>
+import Icon from '../icon'
+import classNames from 'classnames'
+import BaseMixin from '../_util/BaseMixin'
+import PropTypes from '../_util/vue-types'
+import getTransitionProps from '../_util/getTransitionProps'
+import { getComponentFromProp } from '../_util/props-util'
+
+export const AlertProps = {
+  /**
+   * Type of Alert styles, options:`success`, `info`, `warning`, `error`
+   */
+  type: PropTypes.oneOf(['success', 'info', 'warning', 'error']),
+  /** Whether Alert can be closed */
+  closable: PropTypes.bool,
+  /** Close text to show */
+  closeText: PropTypes.any,
+  /** Content of Alert */
+  message: PropTypes.any,
+  /** Additional content of Alert */
+  description: PropTypes.any,
+  /** Callback when close Alert */
+  // onClose?: React.MouseEventHandler<HTMLAnchorElement>;
+  /** Whether to show icon */
+  showIcon: PropTypes.bool,
+  iconType: PropTypes.string,
+  prefixCls: PropTypes.string,
+  banner: PropTypes.bool,
+}
+
+export default {
+  props: AlertProps,
+  mixins: [BaseMixin],
+  name: 'Alert',
+  data () {
+    return {
+      closing: true,
+      closed: false,
+    }
+  },
+  methods: {
+    handleClose (e) {
+      e.preventDefault()
+      const dom = this.$el
+      dom.style.height = `${dom.offsetHeight}px`
+      // Magic code
+      // 重复一次后才能正确设置 height
+      dom.style.height = `${dom.offsetHeight}px`
+
+      this.setState({
+        closing: false,
+      })
+      this.$emit('close', e)
+    },
+    animationEnd () {
+      this.setState({
+        closed: true,
+        closing: true,
+      })
+    },
+  },
+
+  render () {
+    const { prefixCls = 'ant-alert', banner, closing, closed } = this
+    let { closable, type, showIcon, iconType } = this
+    const closeText = getComponentFromProp(this, 'closeText')
+    const description = getComponentFromProp(this, 'description')
+    const message = getComponentFromProp(this, 'message')
+    // banner模式默认有 Icon
+    showIcon = banner && showIcon === undefined ? true : showIcon
+    // banner模式默认为警告
+    type = banner && type === undefined ? 'warning' : type || 'info'
+
+    if (!iconType) {
+      switch (type) {
+        case 'success':
+          iconType = 'check-circle'
+          break
+        case 'info':
+          iconType = 'info-circle'
+          break
+        case 'error':
+          iconType = 'cross-circle'
+          break
+        case 'warning':
+          iconType = 'exclamation-circle'
+          break
+        default:
+          iconType = 'default'
+      }
+
+      // use outline icon in alert with description
+      if (description) {
+        iconType += '-o'
+      }
+    }
+
+    const alertCls = classNames(prefixCls, {
+      [`${prefixCls}-${type}`]: true,
+      [`${prefixCls}-close`]: !closing,
+      [`${prefixCls}-with-description`]: !!description,
+      [`${prefixCls}-no-icon`]: !showIcon,
+      [`${prefixCls}-banner`]: !!banner,
+    })
+
+    // closeable when closeText is assigned
+    if (closeText) {
+      closable = true
+    }
+
+    const closeIcon = closable ? (
+      <a onClick={this.handleClose} class={`${prefixCls}-close-icon`}>
+        {closeText || <Icon type='cross' />}
+      </a>
+    ) : null
+    const transitionProps = getTransitionProps(`${prefixCls}-slide-up`, {
+      appear: false,
+      afterLeave: this.animationEnd,
+    })
+    return closed ? null : (
+      <transition {...transitionProps}>
+        <div v-show={closing} class={alertCls}>
+          {showIcon ? <Icon class={`${prefixCls}-icon`} type={iconType} /> : null}
+          <span class={`${prefixCls}-message`}>{message}</span>
+          <span class={`${prefixCls}-description`}>{description}</span>
+          {closeIcon}
+        </div>
+      </transition>
+    )
+  },
+}
+
+</script>
diff --git a/components/alert/index.zh-CN.md b/components/alert/index.zh-CN.md
new file mode 100644
index 000000000..649e9b922
--- /dev/null
+++ b/components/alert/index.zh-CN.md
@@ -0,0 +1,18 @@
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| banner | 是否用作顶部公告 | boolean | false |
+| closable | 默认不显示关闭按钮 | boolean | 无 |
+| closeText | 自定义关闭按钮 | string\|slot | 无 |
+| description | 警告提示的辅助性文字介绍 | string\|slot | 无 |
+| message | 警告提示内容 | string\|slot | 无 |
+| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |
+| iconType | 自定义图标类型，`showIcon` 为 `true` 时有效 | string | - |
+| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |
+
+### 事件
+| 事件名称 | 说明 | 回调参数 |
+| --- | --- | --- |
+| close | 关闭时触发的回调函数 | Function |
diff --git a/components/alert/style/index.js b/components/alert/style/index.js
new file mode 100644
index 000000000..cf31ed80f
--- /dev/null
+++ b/components/alert/style/index.js
@@ -0,0 +1,2 @@
+import '../../style/index.less'
+import './index.less'
diff --git a/components/alert/style/index.less b/components/alert/style/index.less
new file mode 100644
index 000000000..dfcf65789
--- /dev/null
+++ b/components/alert/style/index.less
@@ -0,0 +1,169 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
+@alert-prefix-cls: ~"@{ant-prefix}-alert";
+
+@alert-message-color: @heading-color;
+@alert-text-color: @text-color;
+
+.@{alert-prefix-cls} {
+  .reset-component;
+  position: relative;
+  padding: 8px 15px 8px 37px;
+  border-radius: @border-radius-base;
+
+  &&-no-icon {
+    padding: 8px 15px;
+  }
+
+  &-icon {
+    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2 + 1px;
+    left: 16px;
+    position: absolute;
+  }
+
+  &-description {
+    font-size: @font-size-base;
+    line-height: 22px;
+    display: none;
+  }
+
+  &-success {
+    border: @border-width-base @border-style-base ~`colorPalette("@{success-color}", 3)`;
+    background-color: ~`colorPalette("@{success-color}", 1)`;
+    .@{alert-prefix-cls}-icon {
+      color: @success-color;
+    }
+  }
+
+  &-info {
+    border: @border-width-base @border-style-base ~`colorPalette("@{info-color}", 3)`;
+    background-color: ~`colorPalette("@{info-color}", 1)`;
+    .@{alert-prefix-cls}-icon {
+      color: @info-color;
+    }
+  }
+
+  &-warning {
+    border: @border-width-base @border-style-base ~`colorPalette("@{warning-color}", 3)`;
+    background-color: ~`colorPalette("@{warning-color}", 1)`;
+    .@{alert-prefix-cls}-icon {
+      color: @warning-color;
+    }
+  }
+
+  &-error {
+    border: @border-width-base @border-style-base ~`colorPalette("@{error-color}", 3)`;
+    background-color: ~`colorPalette("@{error-color}", 1)`;
+    .@{alert-prefix-cls}-icon {
+      color: @error-color;
+    }
+  }
+
+  &-close-icon {
+    font-size: @font-size-sm;
+    position: absolute;
+    right: 16px;
+    top: 8px;
+    line-height: 22px;
+    overflow: hidden;
+    cursor: pointer;
+
+    .@{iconfont-css-prefix}-cross {
+      color: @text-color-secondary;
+      transition: color .3s;
+      &:hover {
+        color: #404040;
+      }
+    }
+  }
+
+  &-close-text {
+    position: absolute;
+    right: 16px;
+  }
+
+  &-with-description {
+    padding: 15px 15px 15px 64px;
+    position: relative;
+    border-radius: @border-radius-base;
+    color: @text-color;
+    line-height: @line-height-base;
+  }
+
+  &-with-description&-no-icon {
+    padding: 15px;
+  }
+
+  &-with-description &-icon {
+    position: absolute;
+    top: 16px;
+    left: 24px;
+    font-size: 24px;
+  }
+
+  &-with-description &-close-icon {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    cursor: pointer;
+    font-size: @font-size-base;
+  }
+
+  &-with-description &-message {
+    font-size: @font-size-lg;
+    color: @alert-message-color;
+    display: block;
+    margin-bottom: 4px;
+  }
+
+  &-with-description &-description {
+    display: block;
+  }
+
+  &&-close {
+    height: 0 !important;
+    margin: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    transition: all .3s @ease-in-out-circ;
+    transform-origin: 50% 0;
+  }
+
+  &-slide-up-leave {
+    animation: antAlertSlideUpOut .3s @ease-in-out-circ;
+    animation-fill-mode: both;
+  }
+
+  &-banner {
+    border-radius: 0;
+    border: 0;
+    margin-bottom: 0;
+  }
+}
+
+@keyframes antAlertSlideUpIn {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes antAlertSlideUpOut {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+  }
+}
diff --git a/components/badge/Badge.vue b/components/badge/Badge.vue
index 7f8fe8121..dcc657788 100644
--- a/components/badge/Badge.vue
+++ b/components/badge/Badge.vue
@@ -1,128 +1,114 @@
-<template>
-  <span :class="badgeComputedCls.badgeCls">
-    <template v-if="isStatusBadge">
-      <span :class="badgeComputedCls.statusCls"></span>
-      <span :class="[prefixCls+'-status-text']">{{text}}</span>
-    </template>
-    <template v-else>
-      <slot></slot><transition appear :name="transitionName">
-        <scroll-number
-          v-if="!badgeStatus.isHidden"
-          :prefixCls="scrollNumberPrefixCls"
-          :className="badgeComputedCls.scrollNumberCls"
-          :count="badgeStatus.stateCount"
-          :titleNumber="count"
-          :styleNumber="styles"
-          >
-        </scroll-number>
-      </transition>
-      <span
-        v-if="!badgeStatus.isHidden && text"
-        :class="[prefixCls+'-status-text']">
-        {{text}}
-      </span>
-    </template>
-  </span>
-</template>
 <script>
-import Icon from '../icon'
+import PropTypes from '../_util/vue-types'
 import ScrollNumber from './ScrollNumber'
+import classNames from 'classnames'
+import { initDefaultProps, filterEmpty } from '../_util/props-util'
+import getTransitionProps from '../_util/getTransitionProps'
+
+export const BadgeProps = {
+  /** Number to show in badge */
+  count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  showZero: PropTypes.bool,
+  /** Max count to show */
+  overflowCount: PropTypes.number,
+  /** whether to show red dot without number */
+  dot: PropTypes.bool,
+  prefixCls: PropTypes.string,
+  scrollNumberPrefixCls: PropTypes.string,
+  status: PropTypes.oneOf(['success', 'processing', 'default', 'error', 'warning']),
+  text: PropTypes.string,
+  offset: PropTypes.array,
+  numberStyle: PropTypes.object.def({}),
+}
 
 export default {
-  name: 'Badge',
-  props: {
-    prefixCls: {
-      type: String,
-      default: 'ant-badge',
-    },
-    scrollNumberPrefixCls: {
-      type: String,
-      default: 'ant-scroll-number',
-    },
-    count: {
-      type: [Number, String],
-    },
-    overflowCount: {
-      type: [Number, String],
-      default: 99,
-    },
-    showZero: {
-      type: Boolean,
-      default: false,
-    },
-    dot: {
-      type: Boolean,
-      default: false,
-    },
-    status: {
-      validator: (val) => {
-        if (!val) return true
-        return ['success', 'processing', 'default', 'error', 'warning'].includes(val)
-      },
-      default: '',
-    },
-    text: {
-      type: String,
-      default: '',
-    },
-    styles: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  data () {
-    const { prefixCls, $slots } = this
-    const isHasDefaultSlot = $slots && !!$slots.default
-    return {
-      isHasDefaultSlot,
-      transitionName: isHasDefaultSlot ? `${prefixCls}-zoom` : '',
+  props: initDefaultProps(BadgeProps, {
+    prefixCls: 'ant-badge',
+    scrollNumberPrefixCls: 'ant-scroll-number',
+    count: null,
+    showZero: false,
+    dot: false,
+    overflowCount: 99,
+  }),
+
+  render () {
+    const {
+      count,
+      showZero,
+      prefixCls,
+      scrollNumberPrefixCls,
+      overflowCount,
+      dot,
+      status,
+      text,
+      offset,
+      $slots,
+      numberStyle,
+    } = this
+    const isDot = dot || status
+    let displayCount = count > overflowCount ? `${overflowCount}+` : count
+    // dot mode don't need count
+    if (isDot) {
+      displayCount = ''
     }
-  },
-  computed: {
-    isStatusBadge () {
-      const { isHasDefaultSlot, status } = this
-      return !isHasDefaultSlot && status
-    },
-    badgeComputedCls () {
-      const { prefixCls, isHasDefaultSlot, status, dot, count } = this
-      const isDot = dot || status
-      return {
-        badgeCls: {
-          [`${prefixCls}`]: true,
-          [`${prefixCls}-status`]: !!status,
-          [`${prefixCls}-not-a-wrapper`]: !isHasDefaultSlot,
-        },
-        statusCls: {
-          [`${prefixCls}-status-dot`]: !!status,
-          [`${prefixCls}-status-${status}`]: !isHasDefaultSlot,
-        },
-        scrollNumberCls: {
-          [`${prefixCls}-dot`]: isDot,
-          [`${prefixCls}-count`]: !isDot,
-          [`${prefixCls}-multiple-words`]: count && count.toString && count.toString().length > 1,
-          [`${prefixCls}-status-${status}`]: !isHasDefaultSlot,
-        },
-      }
-    },
-    badgeStatus () {
-      const { count, overflowCount, showZero, dot, text } = this
-      let stateCount = +count > +overflowCount ? `${overflowCount}+` : count
-      const isDot = dot || text
-      if (isDot) {
-        stateCount = ''
-      }
-      const isZero = stateCount === '0' || stateCount === 0
-      const isEmpty = stateCount === null || stateCount === undefined || stateCount === ''
-      const isHidden = (isEmpty || (isZero && !showZero)) && !isDot
-      return {
-        stateCount,
-        isHidden,
-      }
-    },
-  },
-  components: {
-    Icon,
-    ScrollNumber,
+    const children = filterEmpty($slots.default)
+    const isZero = displayCount === '0' || displayCount === 0
+    const isEmpty = displayCount === null || displayCount === undefined || displayCount === ''
+    const hidden = (isEmpty || (isZero && !showZero)) && !isDot
+    const statusCls = classNames({
+      [`${prefixCls}-status-dot`]: !!status,
+      [`${prefixCls}-status-${status}`]: !!status,
+    })
+    const scrollNumberCls = classNames({
+      [`${prefixCls}-dot`]: isDot,
+      [`${prefixCls}-count`]: !isDot,
+      [`${prefixCls}-multiple-words`]: count && count.toString && count.toString().length > 1,
+      [`${prefixCls}-status-${status}`]: !!status,
+    })
+    const badgeCls = classNames(prefixCls, {
+      [`${prefixCls}-status`]: !!status,
+      [`${prefixCls}-not-a-wrapper`]: !children.length,
+    })
+    const styleWithOffset = offset ? {
+      marginTop: offset[0],
+      marginLeft: offset[1],
+      ...numberStyle,
+    } : numberStyle
+    // <Badge status="success" />
+
+    if (!children.length && status) {
+      return (
+        <span class={badgeCls} style={styleWithOffset}>
+          <span class={statusCls} />
+          <span class={`${prefixCls}-status-text`}>{text}</span>
+        </span>
+      )
+    }
+
+    const scrollNumber = hidden ? null : (
+      <ScrollNumber
+        prefixCls={scrollNumberPrefixCls}
+        v-show={!hidden}
+        class={scrollNumberCls}
+        count={displayCount}
+        title={count}
+        style={styleWithOffset}
+      />
+    )
+
+    const statusText = (hidden || !text) ? null : (
+      <span class={`${prefixCls}-status-text`}>{text}</span>
+    )
+    const transitionProps = getTransitionProps(children.length ? `${prefixCls}-zoom` : '')
+
+    return (<span class={badgeCls}>
+      {children}
+      <transition {...transitionProps}>
+        {scrollNumber}
+      </transition>
+      {statusText}
+    </span>)
   },
 }
+
 </script>
diff --git a/components/badge/ScrollNumber.vue b/components/badge/ScrollNumber.vue
index b81832e98..4375ee5fe 100644
--- a/components/badge/ScrollNumber.vue
+++ b/components/badge/ScrollNumber.vue
@@ -1,5 +1,8 @@
 <script>
+import PropTypes from '../_util/vue-types'
 import BaseMixin from '../_util/BaseMixin'
+import { getStyle } from '../_util/props-util'
+import omit from 'omit.js'
 
 function getNumberArray (num) {
   return num
@@ -8,55 +11,54 @@ function getNumberArray (num) {
       .reverse()
       .map(i => Number(i)) : []
 }
+
+const ScrollNumberProps = {
+  prefixCls: PropTypes.string.def('ant-scroll-number'),
+  count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def(null),
+  component: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+}
+
 export default {
-  name: 'ScrollNumber',
-  props: {
-    className: Object,
-    prefixCls: String,
-    count: [Number, String],
-    titleNumber: [Number, String],
-    styleNumber: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
   mixins: [BaseMixin],
+  props: ScrollNumberProps,
   data () {
-    const { count } = this
     return {
       animateStarted: true,
-      lastCount: 0,
-      stateCount: count,
+      sCount: this.count,
     }
   },
   watch: {
-    count (newValue, oldValue) {
-      // 复原数字初始位置
-      this.setState({
-        animateStarted: true,
-        lastCount: oldValue,
-      }, () => {
+    count (val) {
+      if (this.sCount !== val) {
+        this.lastCount = this.sCount
+        // 复原数字初始位置
+        this.setState({
+          animateStarted: true,
+        }, () => {
         // 等待数字位置复原完毕
         // 开始设置完整的数字
-        setTimeout(() => {
-          this.setState({
-            animateStarted: false,
-            stateCount: newValue,
-          })
-        }, 30)
-      })
+          setTimeout(() => {
+            this.setState({
+              animateStarted: false,
+              sCount: val,
+            }, () => {
+              this.$emit('animated')
+            })
+          }, 5)
+        })
+      }
     },
   },
   methods: {
     getPositionByNum (num, i) {
-      const { animateStarted, lastCount, stateCount } = this
-      if (animateStarted) {
+      if (this.animateStarted) {
         return 10 + num
       }
-      const currentDigit = getNumberArray(stateCount)[i]
-      const lastDigit = getNumberArray(lastCount)[i]
+      const currentDigit = getNumberArray(this.sCount)[i]
+      const lastDigit = getNumberArray(this.lastCount)[i]
       // 同方向则在同一侧切换数字
-      if (stateCount > lastCount) {
+      if (this.sCount > this.lastCount) {
         if (currentDigit >= lastDigit) {
           return 10 + num
         }
@@ -68,60 +70,69 @@ export default {
       return num
     },
     renderNumberList (position) {
-      const childrenArr = new Array(30).fill(1)
-      const childrenHtml = childrenArr.map((item, i) => {
+      const childrenToReturn = []
+      for (let i = 0; i < 30; i++) {
         const currentClassName = (position === i) ? 'current' : ''
-        return <p key={i.toString()} class={currentClassName}>{i % 10}</p>
-      })
-      return childrenHtml
-    },
-    renderCurrentNumber (num, i) {
-      const { animateStarted, prefixCls } = this
-      const position = this.getPositionByNum(num, i)
-      let removeTransition = animateStarted ||
-        (getNumberArray(this.lastCount)[i] === undefined)
-      if (!removeTransition) {
-        removeTransition = ''
+        childrenToReturn.push(<p key={i.toString()} class={currentClassName}>{i % 10}</p>)
       }
-      const styleSpan = {
-        transition: `${removeTransition}` && 'none',
+      return childrenToReturn
+    },
+
+    renderCurrentNumber (num, i) {
+      const position = this.getPositionByNum(num, i)
+      const removeTransition = this.animateStarted || getNumberArray(this.lastCount)[i] === undefined
+      const style = {
+        transition: removeTransition ? 'none' : undefined,
         msTransform: `translateY(${-position * 100}%)`,
         WebkitTransform: `translateY(${-position * 100}%)`,
         transform: `translateY(${-position * 100}%)`,
       }
       return (
-        <span
-          key={i}
-          class={`${prefixCls}-only`}
-          style = {styleSpan}
-        >
-          {
-            this.renderNumberList(position)
-          }
+        <span class={`${this.prefixCls}-only`} style={style} key={i}>
+          {this.renderNumberList(position)}
         </span>
       )
     },
+
     renderNumberElement () {
-      const { stateCount } = this
-      if (!stateCount || isNaN(Number(stateCount))) {
-        return stateCount
+      const { sCount } = this
+      if (!sCount || isNaN(sCount)) {
+        return sCount
       }
-      return getNumberArray(stateCount)
+      return getNumberArray(sCount)
         .map((num, i) => this.renderCurrentNumber(num, i)).reverse()
     },
   },
+
   render () {
-    const { prefixCls, className, titleNumber, styleNumber } = this
+    const { prefixCls, title, component: Tag = 'sup' } = this
+    const style = getStyle(this, true)
+    // fix https://fb.me/react-unknown-prop
+    const restProps = omit(this.$props, [
+      'count',
+      'component',
+      'prefixCls',
+    ])
+    const newProps = {
+      props: {
+        ...restProps,
+        title,
+      },
+      class: prefixCls,
+      style,
+    }
+    // allow specify the border
+    // mock border-color by box-shadow for compatible with old usage:
+    // <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
+    if (style && style.borderColor) {
+      newProps.style.boxShadow = `0 0 0 1px ${style.borderColor} inset`
+    }
     return (
-      <sup
-        class={[prefixCls, className]}
-        title={titleNumber}
-        style={styleNumber}>
-        {
-          this.renderNumberElement()
-        }
-      </sup>
+      <Tag {...newProps}>
+        { this.renderNumberElement()}
+      </Tag>
     )
   },
 }
+
 </script>
diff --git a/components/badge/demo/basic.md b/components/badge/demo/basic.md
new file mode 100644
index 000000000..f14ddd221
--- /dev/null
+++ b/components/badge/demo/basic.md
@@ -0,0 +1,23 @@
+<cn>
+#### 基本
+简单的徽章展示，当 `count` 为 `0` 时，默认不显示，但是可以使用 `showZero` 修改为显示。
+</cn>
+
+<us>
+#### basic
+Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
+</us>
+
+```html
+<template>
+  <div>
+    <a-badge count="5">
+      <a href="#" class="head-example"></a>
+    </a-badge>
+    <a-badge count="0" showZero>
+      <a href="#" class="head-example"></a>
+    </a-badge>
+  </div>
+</template>
+```
+
diff --git a/components/badge/demo/change.md b/components/badge/demo/change.md
new file mode 100644
index 000000000..a113e5ab7
--- /dev/null
+++ b/components/badge/demo/change.md
@@ -0,0 +1,57 @@
+<cn>
+#### 动态
+  展示动态变化的效果。
+</cn>
+
+<us>
+#### Dynamic
+  The count will be animated as it changes.
+</us>
+
+```html
+<template>
+  <div>
+    <div>
+      <a-badge :count="count">
+        <a href="#" class="head-example" />
+      </a-badge>
+      <a-button-group>
+        <a-button @click="decline">
+          <a-icon type="minus" />
+        </a-button>
+        <a-button @click="increase">
+          <a-icon type="plus" />
+        </a-button>
+      </a-button-group>
+    </div>
+    <div style="margin-top: 10px">
+      <a-badge :dot="show">
+        <a href="#" class="head-example" />
+      </a-badge>
+      <a-switch v-model="show" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data(){
+    return {
+      count: 5,
+      show: true,
+    }
+  },
+  methods: {
+    decline () {
+      let count = this.count - 1
+      if (count < 0) {
+        count = 0
+      }
+      this.count = count
+    },
+    increase () {
+      this.count++
+    },
+  }
+}
+</script>
+```
diff --git a/components/badge/demo/dot.md b/components/badge/demo/dot.md
new file mode 100644
index 000000000..31d082c66
--- /dev/null
+++ b/components/badge/demo/dot.md
@@ -0,0 +1,30 @@
+<cn>
+#### 讨嫌的小红点
+没有具体的数字。
+</cn>
+
+<us>
+#### Red badge
+This will simply display a red badge, without a specific count.
+</us>
+
+```html
+<template>
+<div id="components-badge-demo-dot">
+  <a-badge dot>
+    <a-icon type="notification" />
+  </a-badge>
+  <a-badge dot>
+    <a href="#">Link something</a>
+  </a-badge>
+</div>
+</template>
+<style>
+#components-badge-demo-dot .anticon-notification {
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  font-size: 16px;
+}
+</style>
+```
diff --git a/components/badge/demo/index.vue b/components/badge/demo/index.vue
index 6aeb8d7ca..7b47ace61 100644
--- a/components/badge/demo/index.vue
+++ b/components/badge/demo/index.vue
@@ -1,134 +1,59 @@
-<template>
-  <div>
-    基本：
-    <div>
-      <a-badge count=5>
-        <a href="#" class="head-example" />
-      </a-badge>
-      <a-badge count=0 showZero>
-        <a href="#" class="head-example" />
-      </a-badge>
-    </div>
-    <br>
-    独立使用：
-    <div>
-      <a-badge count=25 />
-      <a-badge count=4 :styles="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}" />
-      <a-badge count=109 :styles= "{backgroundColor: '#52c41a'} " />
-    </div>
-    <br>
-    封顶数字：
-    <div style="margin-top: 10px">
-      <a-badge count=99>
-        <a href="#" class="head-example" />
-      </a-badge>
-      <a-badge count=100>
-        <a href="#" class="head-example" />
-      </a-badge>
-      <a-badge count=99 overflowCount=10>
-        <a href="#" class="head-example" />
-      </a-badge>
-      <a-badge count=1000 overflowCount=999>
-        <a href="#" class="head-example" />
-      </a-badge>
-    </div>
-    <br>
-     讨嫌的小红点：
-    <div style="margin-top: 10px">
-      <a-badge dot>
-        <a-icon type="notification" />
-      </a-badge>
-      <a-badge dot>
-        <a href="#">Link something</a>
-      </a-badge>
-    </div>
-    <br>
-    状态点：
-    <div>
-      <a-badge status="success" />
-      <a-badge status="error" />
-      <a-badge status="default" />
-      <a-badge status="processing" />
-      <a-badge :status="currentStatus" />
-      <a-button @click="changeStatus">改processing</a-button>
-      <br />
-      <a-badge status="success" text="Success" />
-      <br />
-      <a-badge status="error" text="Error" />
-      <br />
-      <a-badge status="default" text="Default" />
-      <br />
-      <a-badge status="processing" text="Processing" />
-      <br />
-      <a-badge status="warning" text="Warning" />
-    </div>
-    <br />
-    动态：
-    <div>
-      <a-badge :count="count">
-        <a href="#" class="head-example" />
-      </a-badge>
-      <a-button @click="changeMinsValue()">
-        <a-icon type="minus" />
-      </a-button>
-      <a-button @click="changePlusValue(1)">
-        <a-icon type="plus" />
-      </a-button>
-      <br/>
-      <a-badge :dot="isShow">
-        <a href="#" class="head-example" />
-      </a-badge>
-      <a-button @click="changeShow()">toggle</a-button>
-    </div>
-    <br />
-  </div>
-</template>
 <script>
-let i = 0
-export default {
-  data () {
-    return {
-      currentStatus: 'warning',
-      count: 3,
-      isShow: true,
-    }
-  },
-  methods: {
-    changeStatus () {
-      this.currentStatus = 'processing'
+  import Basic from './basic.md'
+  import NoWapper from './no-wrapper'
+  import Dot from './dot'
+  import Change from './change'
+  import Overflow from './overflow'
+  import Status from './status'
+
+  import CN from './../index.zh-CN.md'
+  import US from './../index.en_US.md'
+
+  const md = {
+    cn: `# Badge徽标数
+         图标右上角的圆形徽标数字。
+         ## 何时使用
+         一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
+         ## 代码演示
+        `,
+    us: `# Badge
+         Small numerical value or status descriptor for UI elements.
+         ## When To Use
+         Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.
+         ## Examples
+        `,
+  }
+
+  export default {
+    render () {
+      return (
+        <div id='components-badge-demo'>
+          <md cn={md.cn} us={md.us} />
+          <Basic />
+          <NoWapper />
+          <Overflow />
+          <Dot />
+          <Status />
+          <Change />
+          <api>
+            <CN slot='cn' />
+            <US />
+          </api>
+        </div>
+      )
     },
-    changeMinsValue () {
-      i++
-      console.dir(i)
-      let count = this.count - 1
-      if (count < 0) {
-        count = 0
-      }
-      this.count = count
-    },
-    changePlusValue () {
-      // setInterval(() => {
-      //   const count = this.count + 1
-      //   this.count = count
-      // }, 300)
-      const count = this.count + 1
-      this.count = count
-    },
-    changeShow () {
-      this.isShow = !this.isShow
-    },
-  },
-}
+  }
 </script>
-<style scoped>
-  .head-example {
-    width: 42px;
-    height: 42px;
-    border-radius: 4px;
-    background: #eee;
-    display: inline-block;
-  }
-  .ant-badge{
-    margin-right: 20px;
-  }
+
+<style>
+#components-badge-demo .ant-badge:not(.ant-badge-status) {
+  margin-right: 20px;
+}
+#components-badge-demo .head-example {
+  width: 42px;
+  height: 42px;
+  border-radius: 4px;
+  background: #eee;
+  display: inline-block;
+}
 </style>
diff --git a/components/badge/demo/link.md b/components/badge/demo/link.md
new file mode 100644
index 000000000..efb8c3ae6
--- /dev/null
+++ b/components/badge/demo/link.md
@@ -0,0 +1,19 @@
+<cn>
+#### 可点击
+  用 a 标签进行包裹即可。
+</cn>
+
+<us>
+#### Clickable
+  The badge can be wrapped with `a` tag to make it linkable.
+</us>
+
+```html
+<template>
+  <a href="#">
+    <a-badge count="5">
+      <span class="head-example" />
+    </a-badge>
+  </a>
+</template>
+```
diff --git a/components/badge/demo/no-wrapper.md b/components/badge/demo/no-wrapper.md
new file mode 100644
index 000000000..0f8735328
--- /dev/null
+++ b/components/badge/demo/no-wrapper.md
@@ -0,0 +1,20 @@
+<cn>
+#### 独立使用
+不包裹任何元素即是独立使用，可自定样式展现。
+在右上角的 badge 则限定为红色。
+</cn>
+
+<us>
+#### Standalone
+Used in standalone when children is empty.
+</us>
+
+```html
+<template>
+  <div>
+    <a-badge count="25" />
+    <a-badge count="4" :numberStyle="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}" />
+    <a-badge count="109" :numberStyle= "{backgroundColor: '#52c41a'} " />
+  </div>
+</template>
+```
diff --git a/components/badge/demo/overflow.md b/components/badge/demo/overflow.md
new file mode 100644
index 000000000..0a23162b9
--- /dev/null
+++ b/components/badge/demo/overflow.md
@@ -0,0 +1,28 @@
+<cn>
+#### 封顶数字
+超过 `overflowCount` 的会显示为 `${overflowCount}+`，默认的 `overflowCount` 为 `99`。
+</cn>
+
+<us>
+#### Overflow Count
+`${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.
+</us>
+
+```html
+<template>
+  <div>
+    <a-badge :count="99">
+      <a href="#" class="head-example"></a>
+    </a-badge>
+    <a-badge :count="100">
+      <a href="#" class="head-example"></a>
+    </a-badge>
+    <a-badge :count="99" :overflowCount="10">
+      <a href="#" class="head-example"></a>
+    </a-badge>
+    <a-badge :count="1000" :overflowCount="999">
+      <a href="#" class="head-example"></a>
+    </a-badge>
+  </div>
+</template>
+```
diff --git a/components/badge/demo/status.md b/components/badge/demo/status.md
new file mode 100644
index 000000000..9ec4f91cc
--- /dev/null
+++ b/components/badge/demo/status.md
@@ -0,0 +1,31 @@
+<cn>
+#### 状态点
+  用于表示状态的小圆点。
+</cn>
+
+<us>
+#### Status
+  Standalone badge with status.
+</us>
+
+```html
+<template>
+  <div>
+    <a-badge status="success" />
+    <a-badge status="error" />
+    <a-badge status="default" />
+    <a-badge status="processing" />
+    <a-badge status="warning" />
+    <br />
+    <a-badge status="success" text="Success" />
+    <br />
+    <a-badge status="error" text="Error" />
+    <br />
+    <a-badge status="default" text="Default" />
+    <br />
+    <a-badge status="processing" text="Processing" />
+    <br />
+    <a-badge status="warning" text="warning" />
+  </div>
+</template>
+```
diff --git a/components/badge/index.en_US.md b/components/badge/index.en_US.md
new file mode 100644
index 000000000..bc2adf5e0
--- /dev/null
+++ b/components/badge/index.en_US.md
@@ -0,0 +1,22 @@
+## API
+
+````html
+<a-badge :count="5">
+  <a href="#" class="head-example" />
+</a-badge>
+````
+
+```html
+<a-badge :count="5" />
+````
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| count | Number to show in badge | number\|string |  |
+| dot | Whether to display a red dot instead of `count` | boolean | `false` |
+| offset | set offset of the badge dot, like [x, y] | [number, number] | - |
+| overflowCount | Max count to show | number | 99 |
+| showZero | Whether to show badge when `count` is zero | boolean | `false` |
+| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` |
+| text | If `status` is set, `text` sets the display text of the status `dot` | string | `''` |
+| numberStyle | sets the display style of the status `dot` | object | '' |
diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md
new file mode 100644
index 000000000..ef80e4898
--- /dev/null
+++ b/components/badge/index.zh-CN.md
@@ -0,0 +1,23 @@
+## API
+
+
+````html
+<a-badge :count="5">
+  <a href="#" class="head-example" />
+</a-badge>
+````
+
+```html
+<a-badge :count="5" />
+````
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number\|string  |  |
+| dot | 不展示数字，只有一个小红点 | boolean | false |
+| offset | 设置状态点的位置偏移，格式为 [x, y] | [number, number] | - |
+| overflowCount | 展示封顶的数字值 | number | 99 |
+| showZero | 当数值为 0 时，是否展示 Badge | boolean | false |
+| status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
+| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | string | '' |
+| numberStyle | 设置状态点的样式 | object | '' |
diff --git a/components/breadcrumb/demo/basic.md b/components/breadcrumb/demo/basic.md
new file mode 100644
index 000000000..62adb984c
--- /dev/null
+++ b/components/breadcrumb/demo/basic.md
@@ -0,0 +1,33 @@
+<cn>
+  #### 基本
+  最简单的用法
+</cn>
+
+<us>
+  #### Basic usage 
+  The simplest use
+</us>
+
+```html
+<template>
+  <Breadcrumb>
+    <BreadcrumbItem>Home</BreadcrumbItem>
+    <BreadcrumbItem><a href="">Application Center</a></BreadcrumbItem>
+    <BreadcrumbItem><a href="">Application List</a></BreadcrumbItem>
+    <BreadcrumbItem>An Application</BreadcrumbItem>
+  </Breadcrumb>
+</template>
+
+<script>
+import '../style'
+import { Icon, Breadcrumb } from 'antd/index'
+export default {
+  components: {
+    Icon,
+    Breadcrumb,
+    BreadcrumbItem: Breadcrumb.Item,
+  },
+}
+</script>
+
+```
diff --git a/components/breadcrumb/demo/basic.vue b/components/breadcrumb/demo/basic.vue
deleted file mode 100644
index c2fd827c7..000000000
--- a/components/breadcrumb/demo/basic.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-<div>
-<md>
-## 基本
-</md>
-<Breadcrumb>
-  <BreadcrumbItem>Home</BreadcrumbItem>
-  <BreadcrumbItem><a href="">Application Center</a></BreadcrumbItem>
-  <BreadcrumbItem><a href="">Application List</a></BreadcrumbItem>
-  <BreadcrumbItem>An Application</BreadcrumbItem>
-</Breadcrumb>
-</div>
-</template>
-
-<script>
-import '../style'
-import { Icon, Breadcrumb } from 'antd/index'
-export default {
-  components: {
-    Icon,
-    Breadcrumb,
-    BreadcrumbItem: Breadcrumb.Item,
-  },
-}
-</script>
diff --git a/components/breadcrumb/demo/index.vue b/components/breadcrumb/demo/index.vue
index d1efc5566..61e91449a 100644
--- a/components/breadcrumb/demo/index.vue
+++ b/components/breadcrumb/demo/index.vue
@@ -1,21 +1,45 @@
-<template>
-  <div>
-    <Basic />
-    <br>
-    <withIcon />
-    <br>
-    <separator />
-  </div>
-</template>
 <script>
-import Basic from './basic'
-import withIcon from './withIcon'
-import separator from './separator'
-export default {
-  components: {
-    Basic,
-    withIcon,
-    separator,
-  },
-}
+  import Basic from './basic.md'
+  import WithIcon from './withIcon.md'
+  import Separator from './separator.md'
+
+  import US from './../index.en-US.md'
+  import CN from './../index.zh-CN.md'
+
+  const md = {
+    cn: `# Breadcrumb面包屑
+           显示当前页面在系统层级结构中的位置，并能向上返回。
+         ## 何时使用
+         - 当系统拥有超过两级以上的层级结构时；
+         - 当需要告知用户『你在哪里』时；
+         -  当需要向上导航的功能时。
+         ## 代码演示
+        `,
+    us: `# Breadcrumb
+         A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.
+         ## When to use
+         - When the system has more than two layers in a hierarchy.
+         - When you need to inform the user of where they are.
+         - When the user may need to navigate back to a higher level.
+         - When the application has multi-layer architecture.
+         ## examples
+        `,
+  }
+
+  export default {
+    render () {
+      return (
+        <div>
+          <md cn={md.cn} us={md.us} />
+          <Basic />
+          <WithIcon />
+          <Separator />
+          <api>
+            <CN slot='cn' />
+            <US />
+          </api>
+        </div>
+      )
+    },
+  }
 </script>
diff --git a/components/breadcrumb/demo/separator.vue b/components/breadcrumb/demo/separator.md
similarity index 67%
rename from components/breadcrumb/demo/separator.vue
rename to components/breadcrumb/demo/separator.md
index 87323cbc4..f4a8cbba9 100644
--- a/components/breadcrumb/demo/separator.vue
+++ b/components/breadcrumb/demo/separator.md
@@ -1,15 +1,21 @@
+<cn>
+  #### 分隔符
+  使用` separator=">" `可以自定义分隔符
+</cn>
+
+<us>
+  #### Configuring the Separator
+  The separator can be customized by setting the separator preperty: separator=">"
+</us>
+
+```html
 <template>
-<div>
-<md>
-## 自定义分隔符
-</md>
 <Breadcrumb separator=">">
   <BreadcrumbItem>Home</BreadcrumbItem>
   <BreadcrumbItem href="">Application Center</BreadcrumbItem>
   <BreadcrumbItem href="">Application List</BreadcrumbItem>
   <BreadcrumbItem>An Application</BreadcrumbItem>
 </Breadcrumb>
-</div>
 </template>
 
 <script>
@@ -23,3 +29,5 @@ export default {
   },
 }
 </script>
+
+```
diff --git a/components/breadcrumb/demo/withIcon.vue b/components/breadcrumb/demo/withIcon.md
similarity index 75%
rename from components/breadcrumb/demo/withIcon.vue
rename to components/breadcrumb/demo/withIcon.md
index f83d665e9..a24888ed1 100644
--- a/components/breadcrumb/demo/withIcon.vue
+++ b/components/breadcrumb/demo/withIcon.md
@@ -1,8 +1,15 @@
+<cn>
+  #### 带有图标的
+  图标放在文字前面
+</cn>
+
+<us>
+ #### With an Icon
+ The icon should be placed in front of the text
+</us>
+
+```html
 <template>
-<div>
-<md>
-## 带有图标
-</md>
 <Breadcrumb>
   <BreadcrumbItem href="">
     <Icon type="home" />
@@ -15,7 +22,6 @@
     Application
   </BreadcrumbItem>
 </Breadcrumb>
-</div>
 </template>
 
 <script>
@@ -29,3 +35,5 @@ export default {
   },
 }
 </script>
+
+```
diff --git a/components/breadcrumb/index.en-US.md b/components/breadcrumb/index.en-US.md
new file mode 100644
index 000000000..0ed0297fa
--- /dev/null
+++ b/components/breadcrumb/index.en-US.md
@@ -0,0 +1,35 @@
+## API
+
+| Property | Description | Type | Optional | Default |
+| -------- | ----------- | ---- | -------- | ------- |
+| itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode |  | - |
+| params | Routing parameters | object |  | - |
+| routes | The routing stack information of router | object\[] |  | - |
+| separator | Custom separator | string\|ReactNode |  | `/` |
+
+> `linkRender` and `nameRender` were removed after `antd@2.0`, please use `itemRender` instead.
+
+### Use with browserHistory
+
+The link of Breadcrumb item targets `#` by default, you can use `itemRender` to make a `browserHistory` Link.
+
+```vue
+import { Link } from 'react-router';
+
+const routes = [{
+  path: 'index',
+  breadcrumbName: 'home'
+}, {
+  path: 'first',
+  breadcrumbName: 'first'
+}, {
+  path: 'second',
+  breadcrumbName: 'second'
+}];
+function itemRender(route, params, routes, paths) {
+  const last = routes.indexOf(route) === routes.length - 1;
+  return last ? <span>{route.breadcrumbName}</span> : <Link to={paths.join('/')}>{route.breadcrumbName}</Link>;
+}
+
+return <Breadcrumb itemRender={itemRender} routes={routes} />;
+```
diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md
new file mode 100644
index 000000000..649557606
--- /dev/null
+++ b/components/breadcrumb/index.zh-CN.md
@@ -0,0 +1,33 @@
+## API
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- |
+| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode |  | - |
+| params | 路由的参数 | object |  | - |
+| routes | router 的路由栈信息 | object\[] |  | - |
+| separator | 分隔符自定义 | string\|slot |  | '/' |
+
+### 和 browserHistory 配合
+
+和 vue-router 一起使用时，默认生成的 url 路径是带有 `#` 的，如果和 browserHistory 一起使用的话，你可以使用 `itemRender` 属性定义面包屑链接。
+
+````html
+import { Link } from 'react-router';
+
+const routes = [{
+  path: 'index',
+  breadcrumbName: '首页'
+}, {
+  path: 'first',
+  breadcrumbName: '一级面包屑'
+}, {
+  path: 'second',
+  breadcrumbName: '当前页面'
+}];
+function itemRender(route, params, routes, paths) {
+  const last = routes.indexOf(route) === routes.length - 1;
+  return last ? <span>{route.breadcrumbName}</span> : <Link to={paths.join('/')}>{route.breadcrumbName}</Link>;
+}
+
+return <Breadcrumb itemRender={itemRender} routes={routes}/>;
+````
diff --git a/components/button/demo/ghost.md b/components/button/demo/ghost.md
index 25d9a2662..eccced014 100644
--- a/components/button/demo/ghost.md
+++ b/components/button/demo/ghost.md
@@ -7,6 +7,7 @@
 #### Ghost Button
 `ghost` property will make button's background transparent, it is common used in colored background.
 </us>
+
 ```html
 <template>
   <div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
diff --git a/components/card/demo/basic.md b/components/card/demo/basic.md
new file mode 100644
index 000000000..714f72388
--- /dev/null
+++ b/components/card/demo/basic.md
@@ -0,0 +1,20 @@
+<cn>
+#### 典型卡片
+包含标题、内容、操作区域。
+</cn>
+
+<us>
+#### Basic card
+A basic card containing a title, content and an extra corner content.
+</us>
+
+```html
+<template>
+  <a-card title="Card Title">
+    <a href="#" slot="extra">more</a>
+    <p>card content</p>
+    <p>card content</p>
+    <p>card content</p>
+  </a-card>
+</template>
+```
diff --git a/components/card/demo/colRowCard.md b/components/card/demo/colRowCard.md
new file mode 100644
index 000000000..5dfcf082c
--- /dev/null
+++ b/components/card/demo/colRowCard.md
@@ -0,0 +1,33 @@
+<cn>
+  #### 栅格卡片
+  在系统概览页面常常和栅格进行配合。
+</cn>
+
+<us>
+  #### Card in column
+  Cards usually cooperate with grid column layout in overview page.
+</us>
+
+```html
+<template>
+  <div style="background-color: #ececec; padding: 20px;">
+    <a-row :gutter="16">
+      <a-col :span="8">
+        <a-card title="Card title" :bordered=false>
+          <p>card content</p>
+        </a-card>
+      </a-col>
+      <a-col :span="8">
+        <a-card title="Card title" :bordered=false>
+          <p>card content</p>
+        </a-card> 
+      </a-col>
+      <a-col :span="8">
+        <a-card title="Card title" :bordered=false>
+          <p>card content</p>
+        </a-card>   
+      </a-col>
+    </a-row>
+  </div>
+</template>
+```
diff --git a/components/card/demo/colRowCard.vue b/components/card/demo/colRowCard.vue
index 399e4ce63..ebeb6253b 100644
--- a/components/card/demo/colRowCard.vue
+++ b/components/card/demo/colRowCard.vue
@@ -4,29 +4,17 @@
 ## 栅格卡片
 </md>
 <div style="background: #ECECEC; padding: 30px">
-  <Row :gutter="16">
-    <Col :span="8">
-      <Card title="Card title" :bordered="false">Card content</Card>
-    </Col>
-    <Col :span="8">
-      <Card title="Card title" :bordered="false">Card content</Card>
-    </Col>
-    <Col :span="8">
-      <Card title="Card title" :bordered="false">Card content</Card>
-    </Col>
-  </Row>
+  <a-row :gutter="16">
+    <a-col :span="8">
+      <a-card title="Card title" :bordered="false">Card content</a-card>
+    </a-col>
+    <a-col :span="8">
+      <a-card title="Card title" :bordered="false">Card content</a-card>
+    </a-col>
+    <a-col :span="8">
+      <a-card title="Card title" :bordered="false">Card content</a-card>
+    </a-col>
+  </a-row>
 </div>
 </div>
 </template>
-
-<script>
-import '../style'
-import { Card, Col, Row } from 'antd'
-export default {
-  components: {
-    Card,
-    Col,
-    Row,
-  },
-}
-</script>
diff --git a/components/card/demo/concise.md b/components/card/demo/concise.md
new file mode 100644
index 000000000..0ee3c79d7
--- /dev/null
+++ b/components/card/demo/concise.md
@@ -0,0 +1,19 @@
+<cn>
+  #### 简洁卡片
+  只包含内容区域
+</cn>
+
+<us>
+  #### Simple card
+  A simple card only containing a content area.
+</us>
+
+```html
+<template>
+  <a-card style="width:300px">
+    <p>Card content</p>
+    <p>Card content</p>
+    <p>Card content</p>
+  </a-card>
+</template>
+```
diff --git a/components/card/demo/grid.md b/components/card/demo/grid.md
new file mode 100644
index 000000000..8a7c6c82c
--- /dev/null
+++ b/components/card/demo/grid.md
@@ -0,0 +1,37 @@
+[>_<]:
+    这个卡片没起作用还报错！一堆的那种！！！
+
+<cn>
+####  网格型内嵌卡片
+一种常见的卡片内容区隔模式。
+</cn>
+
+<us>
+#### Grid card
+Grid style card content.
+</us>
+
+```html
+<template>
+<Card title="Card Title">
+  <CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
+  <CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
+  <CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
+  <CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
+  <CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
+  <CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
+  <CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
+</Card>
+</template>
+
+<script>
+import '../style'
+import { Card } from 'antd'
+export default {
+  components: {
+    Card,
+    CardGrid: Card.Grid,
+  },
+}
+</script>
+```
diff --git a/components/card/demo/index.vue b/components/card/demo/index.vue
index 313281dd6..c34007f8a 100644
--- a/components/card/demo/index.vue
+++ b/components/card/demo/index.vue
@@ -1,46 +1,53 @@
-<template>
-  <div>
-    <Basic />
-    <br>
-    <NoBorder />
-    <br>
-    <Concise />
-    <br>
-    <ColRowCard />
-    <br>
-    <Loading />
-    <br>
-    <Grid />
-    <br>
-    <Inline />
-    <br>
-    <TabsCard />
-    <br>
-    <MoreConfigs />
-    <br>
-  </div>
-</template>
 <script>
-import Basic from './basic'
-import NoBorder from './noBorder'
-import Concise from './concise'
-import ColRowCard from './colRowCard'
-import Loading from './loading'
-import Grid from './grid'
-import Inline from './inline'
-import TabsCard from './tabsCard'
-import MoreConfigs from './moreConfigs'
+import Basic from './basic.md'
+import NoBorder from './noBorder.md'
+import Concise from './concise.md'
+import ColRowCard from './colRowCard.md'
+import Loading from './loading.md'
+import Grid from './grid.md'
+import Inline from './inline.md'
+import TabsCard from './tabsCard.md'
+import MoreConfigs from './moreConfigs.md'
+
+import CN from './../index.zh-CN.md'
+import US from './../index.en-US.md'
+
+import '../style'
+
+const md = {
+  cn: `# Card 卡片
+         通用卡片容器
+       ## 何时使用
+         最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
+       ## 代码演示
+        `,
+  us: `# Card
+         Simple rectangular container.
+       ##When To Use
+         A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.
+       ##Examples
+        `
+}
 export default {
-  components: {
-    Basic,
-    NoBorder,
-    Concise,
-    ColRowCard,
-    Loading,
-    Grid,
-    Inline,
-    TabsCard,
-    MoreConfigs,
+  render() {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us} />
+        <Basic />
+        <NoBorder />
+        <Concise />
+        <ColRowCard />
+        <Loading />
+        <Grid />
+        <Inline />
+        <TabsCard />
+        <MoreConfigs />
+        <api>
+          <CN slot='cn' />
+          <US />
+        </api>
+      </div>
+    )
   },
 }
 </script>
diff --git a/components/card/demo/inline.md b/components/card/demo/inline.md
new file mode 100644
index 000000000..c2f005800
--- /dev/null
+++ b/components/card/demo/inline.md
@@ -0,0 +1,27 @@
+<cn>
+  #### 内部卡片
+  可以放在普通卡片内部，展示多层级结构的信息
+</cn>
+
+<us>
+  #### Inner card
+  It can be placed inside the ordinary card to display the information of the multilevel structure
+</us>
+
+```html
+<template>
+  <a-card title="Card title">
+    <p style="fontSize: 14px;color: rgba(0, 0, 0, 0.85); marginBottom: 16px;fontWeight: 500"
+    >Group title</p>
+    <a-card title="Inner card title">
+      <a href="#" slot="extra">More</a>
+      Inner Card content
+    </a-card>
+    <a-card title="Inner card title">
+      <a href="#" slot="extra">More</a>
+      Inner Card content
+    </a-card>
+  </a-card>
+</template>
+
+``` 
diff --git a/components/card/demo/loading.md b/components/card/demo/loading.md
new file mode 100644
index 000000000..67a061aad
--- /dev/null
+++ b/components/card/demo/loading.md
@@ -0,0 +1,18 @@
+<cn>
+  #### 预加载的卡片
+  数据读入前会有文本块样式
+</cn>
+<us>
+  #### Loading card
+  Shows a loading indirector while the contents of the card is being featched
+</us>
+
+```html
+<template>
+  <a-card loading title="Card title" style="width: 34%;">
+    whatever content
+  </a-card>
+</template>
+```
+
+
diff --git a/components/card/demo/moreConfigs.md b/components/card/demo/moreConfigs.md
new file mode 100644
index 000000000..5e04c05be
--- /dev/null
+++ b/components/card/demo/moreConfigs.md
@@ -0,0 +1,47 @@
+<cn>
+  #### 更灵活的内容展示
+  可以利用 `Card.Meta` 支持更灵活的内容
+</cn>
+
+<us>
+  #### Customized content
+  You can use `Card.Meta` to support more flexible content.
+</us>
+
+```html
+<template>
+<Card
+  hoverable
+  style="width: 300px"
+>
+  <img
+    alt="example"
+    src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
+    slot="cover"
+  />
+  <ul class="ant-card-actions" slot="actions">
+    <li style="width: 33.3333%;"><Icon type="setting" /></li>
+    <li style="width: 33.3333%;"><Icon type="edit" /></li>
+    <li style="width: 33.3333%;"> <Icon type="ellipsis" /></li>
+  </ul>
+  <Meta
+    title="Card title"
+    description="This is the description">
+    <Avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+  </Meta>
+</Card>
+</template>
+
+<script>
+import '../style'
+import { Card, Icon, Avatar } from 'antd'
+export default {
+  components: {
+    Card,
+    Icon,
+    Avatar,
+    Meta: Card.Meta,
+  },
+}
+</script>
+```
diff --git a/components/card/demo/noBorder.md b/components/card/demo/noBorder.md
new file mode 100644
index 000000000..6ca04fe46
--- /dev/null
+++ b/components/card/demo/noBorder.md
@@ -0,0 +1,30 @@
+<cn>
+  #### 无边框
+  在灰色背景上使用无边框的卡片
+</cn>
+<us>
+  #### No border
+  A borderless card on a gray background.
+</us>
+
+```html
+<template>
+<div style="background:#ECECEC; padding:30px">
+  <Card title="Card title" :bordered="false" style="width: 300px">
+    <p>Card content</p>
+    <p>Card content</p>
+    <p>Card content</p>
+  </Card>
+</div>
+</template>
+
+<script>
+import '../style'
+import { Card } from 'antd'
+export default {
+  components: {
+    Card,
+  },
+}
+</script>
+```
diff --git a/components/card/demo/tabsCard.md b/components/card/demo/tabsCard.md
new file mode 100644
index 000000000..49dce21b5
--- /dev/null
+++ b/components/card/demo/tabsCard.md
@@ -0,0 +1,83 @@
+<cn>
+  #### 带页签的卡片
+  可承载更多内容
+</cn>
+
+<us>
+  #### With tabs
+  More content can be hosted
+</us>
+
+```html
+<template>
+<div>
+  <div>
+    <Card
+      style="width:100%"
+      title="Card title"
+      :tabList="tabList"
+      @tabChange="key => onTabChange(key, 'key')"
+    >
+      <a href="#" slot="extra">More</a>
+      {{contentList[key]}}
+    </Card>
+    <br /><br />
+    <Card
+      style="width:100%"
+      :tabList="tabListNoTitle"
+      @tabChange="key => onTabChange(key, 'noTitleKey')"
+    >
+      <div v-html="contentListNoTitle[noTitleKey]"></div>
+    </Card>
+  </div>
+</template>
+
+<script>
+import '../style'
+import { Card } from 'antd'
+export default {
+  data () {
+    return {
+      tabList: [{
+        key: 'tab1',
+        tab: 'tab1',
+      }, {
+        key: 'tab2',
+        tab: 'tab2',
+      }],
+      contentList: {
+        tab1: 'content1',
+        tab2: 'content2',
+      },
+      tabListNoTitle: [{
+        key: 'article',
+        tab: 'article',
+      }, {
+        key: 'app',
+        tab: 'app',
+      }, {
+        key: 'project',
+        tab: 'project',
+      }],
+      contentListNoTitle: {
+        article: '<p>article content</p>',
+        app: '<p>app content</p>',
+        project: '<p>project content</p>',
+      },
+      key: 'tab1',
+      noTitleKey: 'article',
+    }
+  },
+  methods: {
+    onTabChange (key, type) {
+      console.log(key, type)
+      this[type] = key
+    },
+  },
+  components: {
+    Card,
+  },
+}
+</script>
+
+```
diff --git a/components/card/index.en-US.md b/components/card/index.en-US.md
new file mode 100644
index 000000000..d7271a6c2
--- /dev/null
+++ b/components/card/index.en-US.md
@@ -0,0 +1,34 @@
+## API
+
+### Card
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| actions | The action list, shows at the bottom of the Card. | slot | - |
+| bodyStyle | Inline style to apply to the card content | object | - |
+| bordered | Toggles rendering of the border around the card | boolean | `true` |
+| cover | Card cover | ReactNode | - |
+| extra | Content to render in the top-right corner of the card | string\|ReactNode | - |
+| hoverable | Lift up when hovering card | boolean | false |
+| loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false |
+| tabList | List of TabPane's head. | Array<{key: string, tab: ReactNode}> | - |
+| title | Card title | string\|ReactNode | - |
+| type | Card style type, can be set to `inner` or not set | string | - |
+| onTabChange | Callback when tab is switched | (key) => void | - |
+
+### Card.Grid
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| className | className of container | string | - |
+| style | style object of container | object | - |
+
+### Card.Meta
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| avatar | avatar or icon | ReactNode | - |
+| className | className of container | string | - |
+| description | description content | ReactNode | - |
+| style | style object of container | object | - |
+| title | title content | ReactNode | - |
diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md
new file mode 100644
index 000000000..35bf37488
--- /dev/null
+++ b/components/card/index.zh-CN.md
@@ -0,0 +1,35 @@
+
+## API
+
+### Card
+
+| 参数      | 说明 | 类型 | 默认值 |
+| ---       | --- | --- | --- |
+| actions   | 卡片操作组，位置在卡片底部 |slot | - |
+| bodyStyle | 内容区域自定义样式 | object | - |
+| bordered  | 是否有边框 | boolean | true |
+| cover     | 卡片封面 | ReactNode | - |
+| extra     | 卡片右上角的操作区域 | string\|slot | - |
+| hoverable | 鼠标移过时可浮起 | boolean | false |
+| loading   | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false |
+| tabList   | 页签标题列表 | Array<{key: string, tab: ReactNode}> | - |
+| title     | 卡片标题 | string\|ReactNode | - |
+| type      | 卡片类型，可设置为 `inner` 或 不设置 | string | - |
+| onTabChange | 页签切换的回调 | (key) => void | - |
+
+### Card.Grid
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| className | 网格容器类名 | string | - |
+| style | 定义网格容器类名的样式 | object | - |
+
+### Card.Meta
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| avatar   | 头像/图标 | ReactNode | - |
+| className | 容器类名 | string | - |
+| description | 描述内容 | ReactNode | - |
+| style | 定义容器类名的样式 | object | - |
+| title | 标题内容 | ReactNode | - |
diff --git a/components/checkbox/demo/basic.md b/components/checkbox/demo/basic.md
new file mode 100644
index 000000000..4a4948e6e
--- /dev/null
+++ b/components/checkbox/demo/basic.md
@@ -0,0 +1,24 @@
+<cn>
+#### 基本用法
+简单的checkbox
+</cn>
+
+<us>
+#### Basic
+Basic usage of checkbox
+</us>
+
+```html
+<template>
+  <a-checkbox @change="onChange">Checkbox</a-checkbox>
+</template>
+<script>
+export default {
+  methods: {
+    onChange (e) {
+      console.log(`checked = ${e.target.checked}`)
+    },
+  },
+}
+</script>
+```
diff --git a/components/checkbox/demo/basic.vue b/components/checkbox/demo/basic.vue
deleted file mode 100644
index f360e66ef..000000000
--- a/components/checkbox/demo/basic.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div>
-    <a-checkbox @change="onChange">Checkbox</a-checkbox>
-  </div>
-</template>
-<script>
-import { Checkbox } from 'antd'
-export default {
-  methods: {
-    onChange (e) {
-      console.log(`checked = ${e.target.checked}`)
-    },
-  },
-  components: {
-    Checkbox,
-  },
-}
-</script>
diff --git a/components/checkbox/demo/check-all.vue b/components/checkbox/demo/check-all.md
similarity index 83%
rename from components/checkbox/demo/check-all.vue
rename to components/checkbox/demo/check-all.md
index b1a3f09d3..bac267a36 100644
--- a/components/checkbox/demo/check-all.vue
+++ b/components/checkbox/demo/check-all.md
@@ -1,3 +1,14 @@
+<cn>
+#### 全选
+在实现全选效果时，你可能会用到`indeterminate`属性
+</cn>
+
+<us>
+#### Check all
+The `indeterminate` property can help you to achieve a 'check all' effect.
+</us>
+
+```html
 <template>
   <div>
     <div :style="{ borderBottom: '1px solid #E9E9E9' }">
@@ -14,7 +25,6 @@
   </div>
 </template>
 <script>
-import { Checkbox } from 'antd'
 const plainOptions = ['Apple', 'Pear', 'Orange']
 const defaultCheckedList = ['Apple', 'Orange']
 export default {
@@ -39,9 +49,7 @@ export default {
       })
     },
   },
-  components: {
-    Checkbox,
-    CheckboxGroup: Checkbox.Group,
-  },
 }
 </script>
+
+```
diff --git a/components/checkbox/demo/controller.vue b/components/checkbox/demo/controller.md
similarity index 89%
rename from components/checkbox/demo/controller.vue
rename to components/checkbox/demo/controller.md
index 72e38acf2..310916efd 100644
--- a/components/checkbox/demo/controller.vue
+++ b/components/checkbox/demo/controller.md
@@ -1,3 +1,14 @@
+<cn>
+#### 受控的checkbox
+联动checkbox
+</cn>
+
+<us>
+#### Controlled Checkbox
+Communicated with other components
+</us>
+
+```html
 <template>
   <div>
     <p :style="{ marginBottom: '20px' }">
@@ -29,7 +40,6 @@
   </div>
 </template>
 <script>
-import { Checkbox, Button } from 'antd'
 export default {
   data () {
     return {
@@ -54,9 +64,6 @@ export default {
       this.checked = e.target.checked
     },
   },
-  components: {
-    Checkbox,
-
-  },
 }
 </script>
+```
diff --git a/components/checkbox/demo/disabled.vue b/components/checkbox/demo/disabled.md
similarity index 58%
rename from components/checkbox/demo/disabled.vue
rename to components/checkbox/demo/disabled.md
index fac1e9399..e20f8b52a 100644
--- a/components/checkbox/demo/disabled.vue
+++ b/components/checkbox/demo/disabled.md
@@ -1,3 +1,14 @@
+<cn>
+#### 不可用
+checkbox 不可用
+</cn>
+
+<us>
+#### Disabled
+Disabled checkbox
+</us>
+
+```html
 <template>
   <div>
     <a-checkbox :defaultChecked="false" disabled />
@@ -5,11 +16,4 @@
     <a-checkbox defaultChecked disabled />
   </div>
 </template>
-<script>
-import { Checkbox } from 'antd'
-export default {
-  components: {
-    Checkbox,
-  },
-}
-</script>
+```
diff --git a/components/checkbox/demo/group.vue b/components/checkbox/demo/group.md
similarity index 87%
rename from components/checkbox/demo/group.vue
rename to components/checkbox/demo/group.md
index b7cfcc6a3..eb6c696af 100644
--- a/components/checkbox/demo/group.vue
+++ b/components/checkbox/demo/group.md
@@ -1,3 +1,14 @@
+<cn>
+#### Checkbox组
+方便的从数组生成checkbox
+</cn>
+
+<us>
+#### Checkbox group
+Generate a group of checkboxes from an array
+</us>
+
+```html
 <template>
   <div>
     <a-checkbox-group :options="plainOptions" v-model="value" @change="onChange" />
@@ -10,7 +21,6 @@
   </div>
 </template>
 <script>
-import { Checkbox } from 'antd'
 const plainOptions = ['Apple', 'Pear', 'Orange']
 const options = [
   { label: 'Apple', value: 'Apple' },
@@ -37,8 +47,6 @@ export default {
       console.log('value = ', this.value)
     },
   },
-  components: {
-    Checkbox,
-  },
 }
 </script>
+```
diff --git a/components/checkbox/demo/index.vue b/components/checkbox/demo/index.vue
index eea51bd1d..80fb85fbd 100644
--- a/components/checkbox/demo/index.vue
+++ b/components/checkbox/demo/index.vue
@@ -1,35 +1,47 @@
-<template>
-  <div>
-    <h1>Basic</h1>
-    <Basic />
-    <h1>CheckAll</h1>
-    <CheckAll />
-    <h1>Controller</h1>
-    <Controller />
-    <h1>Disabled</h1>
-    <Disabled />
-    <h1>Group</h1>
-    <Group />
-    <h1>Layout</h1>
-    <Layout />
-  </div>
-</template>
 <script>
-import Basic from './basic'
-import CheckAll from './check-all'
-import Controller from './controller'
-import Disabled from './disabled'
+  import Basic from './basic'
+  import CheckAll from './check-all'
+  import Controller from './controller'
+  import Disabled from './disabled'
+  import Group from './group'
+  import Layout from './layout'
+  import CN from './../index.zh-CN'
+  import US from './../index.en-US'
 
-import Group from './group'
-import Layout from './layout'
-export default {
-  components: {
-    Basic,
-    CheckAll,
-    Disabled,
-    Controller,
-    Group,
-    Layout,
-  },
-}
+  const md = {
+    cn: `# Checkbox多选框
+           多选框
+         ## 何时使用
+         - 在一组可选项中进行多项选择时；
+         - 单独使用可以表示两种状态之间的切换，和 switch 类似。区别在于切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。
+         ## 代码演示
+        `,
+    us: `# Checkbox
+           Checkbox
+         ## When to use
+         - Used for selecting multiple values from several options.
+         - If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.
+         ## Examples
+        `,
+  }
+
+  export default {
+    render () {
+      return (
+        <div>
+          <md cn={md.cn} us={md.us} />
+          <Basic />
+          <CheckAll />
+          <Disabled />
+          <Controller />
+          <Group />
+          <Layout />
+          <api>
+            <CN slot='cn' />
+            <US />
+          </api>
+        </div>
+      )
+    },
+  }
 </script>
diff --git a/components/checkbox/demo/layout.md b/components/checkbox/demo/layout.md
new file mode 100644
index 000000000..7068674fb
--- /dev/null
+++ b/components/checkbox/demo/layout.md
@@ -0,0 +1,32 @@
+<cn>
+#### 布局
+Checkbox.Group内嵌Checkbox并与Grid组件一起使用，可以实现灵活的布局
+</cn>
+
+<us>
+#### Use with grid
+We can use Checkbox and Grid Checkbox.group, to implement complex layout
+</us>
+
+```html
+<template>
+  <a-checkbox-group @change="onChange">
+    <a-row>
+      <a-col :span="8"><a-checkbox value="A">A</a-checkbox></a-col>
+      <a-col :span="8"><a-checkbox value="B">B</a-checkbox></a-col>
+      <a-col :span="8"><a-checkbox value="C">C</a-checkbox></a-col>
+      <a-col :span="8"><a-checkbox value="D">D</a-checkbox></a-col>
+      <a-col :span="8"><a-checkbox value="E">E</a-checkbox></a-col>
+    </a-row>
+  </a-checkbox-group>
+</template>
+<script>
+export default {
+  methods: {
+    onChange (checkedValues) {
+      console.log('checked = ', checkedValues)
+    },
+  },
+}
+</script>
+```
diff --git a/components/checkbox/demo/layout.vue b/components/checkbox/demo/layout.vue
deleted file mode 100644
index ebc74eef0..000000000
--- a/components/checkbox/demo/layout.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <a-checkbox-group @change="onChange">
-    <AntRow>
-      <AntCol :span="8"><a-checkbox value="A">A</a-checkbox></AntCol>
-      <AntCol :span="8"><a-checkbox value="B">B</a-checkbox></AntCol>
-      <AntCol :span="8"><a-checkbox value="C">C</a-checkbox></AntCol>
-      <AntCol :span="8"><a-checkbox value="D">D</a-checkbox></AntCol>
-      <AntCol :span="8"><a-checkbox value="E">E</a-checkbox></AntCol>
-    </AntRow>
-  </a-checkbox-group>
-</template>
-<script>
-import { Checkbox, Row, Col } from 'antd'
-export default {
-  methods: {
-    onChange (checkedValues) {
-      console.log('checked = ', checkedValues)
-    },
-  },
-  components: {
-    Checkbox,
-    AntRow: Row,
-    AntCol: Col,
-    CheckboxGroup: Checkbox.Group,
-  },
-}
-</script>
diff --git a/components/checkbox/index.en-US.md b/components/checkbox/index.en-US.md
new file mode 100644
index 000000000..863c4d935
--- /dev/null
+++ b/components/checkbox/index.en-US.md
@@ -0,0 +1,30 @@
+## API
+
+### Checkbox
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| autoFocus | get focus when component mounted | boolean | false |
+| checked | Specifies whether the checkbox is selected. | boolean | false |
+| defaultChecked | Specifies the initial state: whether or not the checkbox is selected. | boolean | false |
+| disabled | Disable checkbox | boolean | false |
+| onChange | The callback function that is triggered when the state changes. | Function(e:Event) | - |
+
+### Checkbox Group
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| defaultValue | Default selected value | string\[] | \[] |
+| disabled | Disable all checkboxes | boolean | false |
+| options | Specifies options | string\[] | \[] |
+| value | Used for setting the currently selected value. | string\[] | \[] |
+| onChange | The callback function that is triggered when the state changes. | Function(checkedValue) | - |
+
+## Methods
+
+### Checkbox
+
+| Name | Description |
+| ---- | ----------- |
+| blur() | remove focus |
+| focus() | get focus |
diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md
new file mode 100644
index 000000000..03e2d4aed
--- /dev/null
+++ b/components/checkbox/index.zh-CN.md
@@ -0,0 +1,29 @@
+## API
+
+### Checkbox
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| autoFocus | 自动获取焦点 | boolean | false |
+| checked | 指定当前是否选中 | boolean | false |
+| defaultChecked | 初始是否选中 | boolean | false |
+| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false |
+| onChange | 变化时回调函数 | Function(e:Event) | - |
+
+### Checkbox Group
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| defaultValue | 默认选中的选项 | string\[] | \[] |
+| options | 指定可选项 | string\[] | \[] |
+| value | 指定选中的选项 | string\[] | \[] |
+| onChange | 变化时回调函数 | Function(checkedValue) | - |
+
+## 方法
+
+### Checkbox
+
+| 名称 | 描述 |
+| --- | --- |
+| blur() | 移除焦点 |
+| focus() | 获取焦点 |
diff --git a/components/dropdown/src/Dropdown.vue b/components/dropdown/src/Dropdown.vue
index 4c3bddd86..61f99503b 100644
--- a/components/dropdown/src/Dropdown.vue
+++ b/components/dropdown/src/Dropdown.vue
@@ -89,7 +89,7 @@ export default {
         const overlayNode = this.getPopupDomNode()
         const rootNode = this.$el
         if (rootNode && overlayNode && rootNode.offsetWidth > overlayNode.offsetWidth) {
-          overlayNode.style.width = `${rootNode.offsetWidth}px`
+          overlayNode.style.minWidth = `${rootNode.offsetWidth}px`
           if (this.$refs.trigger &&
             this.$refs.trigger._component &&
             this.$refs.trigger._component.alignInstance) {
diff --git a/components/grid/Col.vue b/components/grid/Col.vue
index b35e35882..d3584f389 100644
--- a/components/grid/Col.vue
+++ b/components/grid/Col.vue
@@ -1,83 +1,72 @@
 <script>
-  //  Equal or Larger Than 0
-  function elt0 (value) {
-    return value >= 0
-  }
-  //  equal to 0(default) or more
-  const DEFAULT_0_OR_MORE = {
-    'default': 0,
-    validator: elt0,
-  }
+import PropTypes from '../_util/vue-types'
 
-  export default {
-    name: 'Ant-Col',
-    props: {
-      prefixCls: {
-        'default': 'ant-col',
-        type: String,
-      },
-      span: Number,
-      order: DEFAULT_0_OR_MORE,
-      offset: DEFAULT_0_OR_MORE,
-      push: DEFAULT_0_OR_MORE,
-      pull: DEFAULT_0_OR_MORE,
-      xs: [Number, Object],
-      sm: [Number, Object],
-      md: [Number, Object],
-      lg: [Number, Object],
-      xl: [Number, Object],
-    },
-    inject: {
-      parentRow: { 'default': undefined },
-    },
-    computed: {
-      classes () {
-        const { prefixCls, span, order, offset, push, pull } = this
-        let sizeClassObj = {};
-        ['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => {
-          let sizeProps = {}
-          if (typeof this[size] === 'number') {
-            sizeProps.span = this[size]
-          } else if (typeof this[size] === 'object') {
-            sizeProps = this[size] || {}
-          }
+const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 
-          sizeClassObj = {
-            ...sizeClassObj,
-            [`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
-            [`${prefixCls}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
-            [`${prefixCls}-${size}-offset-${sizeProps.offset}`]: sizeProps.offset || sizeProps.offset === 0,
-            [`${prefixCls}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
-            [`${prefixCls}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
-          }
-        })
-        return {
-          [`${prefixCls}`]: true,
-          [`${prefixCls}-${span}`]: span !== undefined,
-          [`${prefixCls}-order-${order}`]: order,
-          [`${prefixCls}-offset-${offset}`]: offset,
-          [`${prefixCls}-push-${push}`]: push,
-          [`${prefixCls}-pull-${pull}`]: pull,
-          ...sizeClassObj,
-        }
-      },
-      gutter () {
-        const parent = this.parentRow
-        return parent ? +parent.gutter : 0
-      },
-    },
-    render (h) {
-      const style = {}
-      if (this.gutter) {
-        style.paddingLeft = this.gutter / 2 + 'px'
-        style.paddingRight = style.paddingLeft
+export const ColSize = PropTypes.shape({
+  span: stringOrNumber,
+  order: stringOrNumber,
+  offset: stringOrNumber,
+  push: stringOrNumber,
+  pull: stringOrNumber,
+}).loose
+
+const objectOrNumber = PropTypes.oneOfType([PropTypes.number, ColSize])
+
+export const ColProps = {
+  span: objectOrNumber,
+  order: objectOrNumber,
+  offset: objectOrNumber,
+  push: objectOrNumber,
+  pull: objectOrNumber,
+  xs: PropTypes.oneOfType([PropTypes.number, ColSize]),
+  sm: PropTypes.oneOfType([PropTypes.number, ColSize]),
+  md: PropTypes.oneOfType([PropTypes.number, ColSize]),
+  lg: PropTypes.oneOfType([PropTypes.number, ColSize]),
+  xl: PropTypes.oneOfType([PropTypes.number, ColSize]),
+  xxl: PropTypes.oneOfType([PropTypes.number, ColSize]),
+  prefixCls: PropTypes.string,
+}
+
+export default {
+  props: ColProps,
+  name: 'Col',
+  render () {
+    const { span, order, offset, push, pull, prefixCls = 'ant-col', $slots, $attrs, $listeners } = this
+    let sizeClassObj = {};
+    ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
+      let sizeProps = {}
+      if (typeof this[size] === 'number') {
+        sizeProps.span = this[size]
+      } else if (typeof this[size] === 'object') {
+        sizeProps = this[size] || {}
       }
-      // why only unnamed slots
-      return h('div', {
-        'class': this.classes,
-        style,
-      }, this.$slots['default'])
-    },
-  }
+
+      sizeClassObj = {
+        ...sizeClassObj,
+        [`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
+        [`${prefixCls}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
+        [`${prefixCls}-${size}-offset-${sizeProps.offset}`]: sizeProps.offset || sizeProps.offset === 0,
+        [`${prefixCls}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
+        [`${prefixCls}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
+      }
+    })
+    const classes = {
+      [`${prefixCls}-${span}`]: span !== undefined,
+      [`${prefixCls}-order-${order}`]: order,
+      [`${prefixCls}-offset-${offset}`]: offset,
+      [`${prefixCls}-push-${push}`]: push,
+      [`${prefixCls}-pull-${pull}`]: pull,
+      ...sizeClassObj,
+    }
+    const divProps = {
+      on: $listeners,
+      attrs: $attrs,
+      class: classes,
+    }
+    return <div {...divProps}>{$slots.default}</div>
+  },
+}
+
 </script>
 
diff --git a/components/grid/Row.vue b/components/grid/Row.vue
index df1ee6d7a..e2f485a09 100644
--- a/components/grid/Row.vue
+++ b/components/grid/Row.vue
@@ -1,84 +1,151 @@
-<template>
-  <div :class="classes" :style="modifiedStyle">
-    <slot  />
-  </div>
-</template>
 <script>
-  export default {
-    name: 'Ant-Row',
-    props: {
-      prefixCls: {
-        'default': 'ant-row',
-        type: String,
+import PropTypes from '../_util/vue-types'
+import BaseMixin from '../_util/BaseMixin'
+import { cloneElement } from '../_util/vnode'
+import { isEmptyElement, getStyle, getOptionProps } from '../_util/props-util'
+// matchMedia polyfill for
+// https://github.com/WickyNilliams/enquire.js/issues/82
+let enquire = null
+if (typeof window !== 'undefined') {
+  const matchMediaPolyfill = (mediaQuery) => {
+    return {
+      media: mediaQuery,
+      matches: false,
+      addListener () {
       },
-      type: {
-        validator (value) {
-          //  flex can't work before IE11
-          if (document.all && document.compatMode) {
-            console.error('you cannot use flex in the old browser')
-            return false
-          }
-          return ['flex', ''].includes(value)
-        },
+      removeListener () {
       },
-      gutter: {
-        'default': 0,
-        validator: k => k >= 0,
-      },
-      align: {
-        'default': 'top',
-        validator (value) {
-          return ['top', 'middle', 'bottom'].includes(value)
-        },
-      },
-      justify: {
-        'default': 'start',
-        validator (value) {
-          return ['start', 'end', 'center', 'space-around', 'space-between'].includes(value)
-        },
-      },
-    },
-    data () {
-      const half = this.gutter / 2
-      return {
-        modifiedStyle: {
-          'margin-left': -half + 'px',
-          'margin-right': -half + 'px',
-        },
-      }
-    },
-    provide() {
-      return {
-        parentRow: this,
-      }
-    },
-    computed: {
-      classes () {
-        const { prefixCls, type, align, justify } = this
-        return {
-          [`${prefixCls}`]: true,
-          [`${prefixCls}-${type}`]: type,
-          [`${prefixCls}-${type}-${justify}`]: type && justify,
-          [`${prefixCls}-${type}-${align}`]: type && align,
-        }
-      },
-    },
-    methods: {
-      handleClick (event) {
-        if (this.clicked) {
-          return
-        }
-        this.clicked = true
-        clearTimeout(this.timeout)
-        this.timeout = setTimeout(() => (this.clicked = false), 500)
-        this.$emit('click', event)
-      },
-    },
-    beforeDestroy () {
-      if (this.timeout) {
-        clearTimeout(this.timeout)
-      }
-    },
+    }
   }
+  window.matchMedia = window.matchMedia || matchMediaPolyfill
+  enquire = require('enquire.js')
+}
+
+const BreakpointMap = PropTypes.shape({
+  xs: PropTypes.string,
+  sm: PropTypes.string,
+  md: PropTypes.string,
+  lg: PropTypes.string,
+  xl: PropTypes.string,
+  xxl: PropTypes.strin,
+}).loose
+
+const RowProps = {
+  gutter: PropTypes.oneOfType([PropTypes.number, BreakpointMap]),
+  type: PropTypes.oneOf(['flex']),
+  align: PropTypes.oneOf(['top', 'middle', 'bottom']),
+  justify: PropTypes.oneOf(['start', 'end', 'center', 'space-around', 'space-between']),
+  prefixCls: PropTypes.string,
+}
+
+const responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs']
+
+const responsiveMap = {
+  xs: '(max-width: 575px)',
+  sm: '(min-width: 576px)',
+  md: '(min-width: 768px)',
+  lg: '(min-width: 992px)',
+  xl: '(min-width: 1200px)',
+  xxl: '(min-width: 1600px)',
+}
+
+export default {
+  name: 'Row',
+  mixins: [BaseMixin],
+  props: {
+    ...RowProps,
+    gutter: PropTypes.oneOfType([PropTypes.number, BreakpointMap]).def(0),
+  },
+  data () {
+    return {
+      screens: {},
+    }
+  },
+
+  mounted () {
+    this.$nextTick(() => {
+      Object.keys(responsiveMap)
+        .map((screen) => enquire.register(responsiveMap[screen], {
+          match: () => {
+            if (typeof this.gutter !== 'object') {
+              return
+            }
+            this.setState((prevState) => ({
+              screens: {
+                ...prevState.screens,
+                [screen]: true,
+              },
+            }))
+          },
+          unmatch: () => {
+            if (typeof this.gutter !== 'object') {
+              return
+            }
+            this.setState((prevState) => ({
+              screens: {
+                ...prevState.screens,
+                [screen]: false,
+              },
+            }))
+          },
+          // Keep a empty destory to avoid triggering unmatch when unregister
+          destroy () {},
+        },
+        ))
+    })
+  },
+  beforeDestroy () {
+    Object.keys(responsiveMap)
+      .map((screen) => enquire.unregister(responsiveMap[screen]))
+  },
+  methods: {
+    getGutter () {
+      const { gutter } = this
+      if (typeof gutter === 'object') {
+        for (let i = 0; i <= responsiveArray.length; i++) {
+          const breakpoint = responsiveArray[i]
+          if (this.state.screens[breakpoint] && gutter[breakpoint] !== undefined) {
+            return gutter[breakpoint]
+          }
+        }
+      }
+      return gutter
+    },
+  },
+
+  render () {
+    const {
+      type, justify, align,
+      prefixCls = 'ant-row', $slots,
+    } = this
+    const gutter = this.getGutter()
+    const classes = {
+      [prefixCls]: !type,
+      [`${prefixCls}-${type}`]: type,
+      [`${prefixCls}-${type}-${justify}`]: type && justify,
+      [`${prefixCls}-${type}-${align}`]: type && align,
+    }
+    const rowStyle = gutter > 0 ? {
+      marginLeft: `${gutter / -2}px`,
+      marginRight: `${gutter / -2}px`,
+    } : {}
+    const cols = ($slots.default || []).map((col) => {
+      if (isEmptyElement(col)) {
+        return null
+      }
+      if (getOptionProps(col) && gutter > 0) {
+        return cloneElement(col, {
+          style: {
+            paddingLeft: `${gutter / 2}px`,
+            paddingRight: `${gutter / 2}px`,
+            ...getStyle(col, true),
+          },
+        })
+      }
+      return col
+    })
+    return <div class={classes} style={rowStyle}>{cols}</div>
+  },
+}
 </script>
 
diff --git a/components/grid/demo/align.vue b/components/grid/demo/align.vue
deleted file mode 100644
index 403634e5c..000000000
--- a/components/grid/demo/align.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <div class="grid">
-    <ant-row type="flex" justify="center" align="top">
-      <ant-col :span="4" class="color1"><DemoBox :value="100">col-4</DemoBox></ant-col>
-      <ant-col :span="4" class="color2"><DemoBox :value="50">col-4</DemoBox></ant-col>
-      <ant-col :span="4" class="color1"><DemoBox :value="120">col-4</DemoBox></ant-col>
-      <ant-col :span="4" class="color2"><DemoBox :value="80">col-4</DemoBox></ant-col>
-    </ant-row>
-
-    <p>Align Center</p>
-    <ant-row type="flex" justify="space-around" align="middle">
-      <ant-col :span="4" class="color1"><DemoBox :value="100">col-4</DemoBox></ant-col>
-      <ant-col :span="4" class="color2"><DemoBox :value="50">col-4</DemoBox></ant-col>
-      <ant-col :span="4" class="color1"><DemoBox :value="120">col-4</DemoBox></ant-col>
-      <ant-col :span="4" class="color2"><DemoBox :value="80">col-4</DemoBox></ant-col>
-    </ant-row>
-
-    <p>Align Bottom</p>
-    <ant-row type="flex" justify="space-between" align="bottom">
-      <ant-col :span="4" class="color1"><DemoBox :value="100">col-4</DemoBox></ant-col>
-      <ant-col :span="4" class="color2"><DemoBox :value="50">col-4</DemoBox></ant-col>
-      <ant-col :span="4" class="color1"><DemoBox :value="120">col-4</DemoBox></ant-col>
-      <ant-col :span="4" class="color2"><DemoBox :value="80">col-4</DemoBox></ant-col>
-    </ant-row>
-  </div>
-</template>
-<script>
-  import Vue from 'vue'
-  import { Grid } from 'antd'
-  const { Row, Col } = Grid
-  const DemoBox = Vue.component('DemoBox', {
-    props: ['value'],
-    template: `<p :style="{height: value + 'px'}">{{value}}</p>`,
-  })
-  export default {
-    components: {
-      AntRow: Row,
-      AntCol: Col,
-      DemoBox,
-    },
-  }
-
-
-</script>
-<style lang="less">
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .color1 {
-    background: rgb(0, 191, 255);
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-  .height-100 {
-    height: 100px;
-  }
-</style>
diff --git a/components/grid/demo/basic.md b/components/grid/demo/basic.md
new file mode 100644
index 000000000..57ab4a5d8
--- /dev/null
+++ b/components/grid/demo/basic.md
@@ -0,0 +1,35 @@
+<cn>
+#### 基础栅格
+从堆叠到水平排列。
+使用单一的一组 `Row` 和 `Col` 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 `Row` 内。
+</cn>
+
+<us>
+#### Basic Grid
+From the stack to the horizontal arrangement.
+You can create a basic grid system by using a single set of `Row` and `Col` grid assembly, all of the columns (Col) must be placed in `Row`.
+</us>
+
+```html
+<template>
+  <div>
+    <a-row>
+      <a-col :span="12">col-12</a-col>
+      <a-col :span="12">col-12</a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="8">col-8</a-col>
+      <a-col :span="8">col-8</a-col>
+      <a-col :span="8">col-8</a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="6">col-6</a-col>
+      <a-col :span="6">col-6</a-col>
+      <a-col :span="6">col-6</a-col>
+      <a-col :span="6">col-6</a-col>
+    </a-row>
+  </div>
+</template>
+```
+
+
diff --git a/components/grid/demo/basic.vue b/components/grid/demo/basic.vue
deleted file mode 100644
index dd6b80617..000000000
--- a/components/grid/demo/basic.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <div class="basic">
-    <ant-row>
-      <ant-col class="color1" :span="24" >100%</ant-col>
-    </ant-row>
-    <ant-row>
-      <ant-col class="color1" :span="6" >25%</ant-col>
-      <ant-col class="color1" :span="6" :offset="6" >25%</ant-col>
-    </ant-row>
-    <ant-row>
-      <ant-col class="color1" :span="8" >33.33%</ant-col>
-      <ant-col class="color1" :span="8" :offset="8" >33.33%</ant-col>
-    </ant-row>
-    <ant-row>
-      <ant-col class="color1" :span="12" >50%</ant-col>
-    </ant-row>
-    <ant-row>
-      <ant-col class="color1" :span="18" >66.66%</ant-col>
-    </ant-row>
-  </div>
-</template>
-<script>
-  import { Grid } from 'antd'
-  const { Row, Col } = Grid
-  export default {
-    components: {
-      AntRow: Row,
-      AntCol: Col
-    },
-  }
-</script>
-<style lang="less" scoped>
-  .basic {
-    background: linear-gradient(90deg,#f5f5f5 4.16666667%,transparent 0,transparent 8.33333333%,#f5f5f5 0,#f5f5f5 12.5%,transparent 0,transparent 16.66666667%,#f5f5f5 0,#f5f5f5 20.83333333%,transparent 0,transparent 25%,#f5f5f5 0,#f5f5f5 29.16666667%,transparent 0,transparent 33.33333333%,#f5f5f5 0,#f5f5f5 37.5%,transparent 0,transparent 41.66666667%,#f5f5f5 0,#f5f5f5 45.83333333%,transparent 0,transparent 50%,#f5f5f5 0,#f5f5f5 54.16666667%,transparent 0,transparent 58.33333333%,#f5f5f5 0,#f5f5f5 62.5%,transparent 0,transparent 66.66666667%,#f5f5f5 0,#f5f5f5 70.83333333%,transparent 0,transparent 75%,#f5f5f5 0,#f5f5f5 79.16666667%,transparent 0,transparent 83.33333333%,#f5f5f5 0,#f5f5f5 87.5%,transparent 0,transparent 91.66666667%,#f5f5f5 0,#f5f5f5 95.83333333%,transparent 0);
-  }
-  .basic div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .show-block {
-    margin: 20px 0;
-  }
-  .color1 {
-    background: rgba(0, 191, 255, 0.52);
-    color: white;
-  }
-</style>
diff --git a/components/grid/demo/complex.vue b/components/grid/demo/complex.vue
deleted file mode 100644
index 490bbb4c7..000000000
--- a/components/grid/demo/complex.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div class="grid">
-    <ant-row>
-      <ant-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="color1">Col</ant-col>
-      <ant-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="color2">Col</ant-col>
-      <ant-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="color1">Col</ant-col>
-    </ant-row>
-  </div>
-</template>
-<script>
-  import { Grid } from 'antd'
-  const { Row, Col } = Grid
-  export default {
-    components: {
-      AntRow: Row,
-      AntCol: Col
-    },
-  }
-</script>
-<style lang="less">
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .color1 {
-    background: rgb(0, 191, 255);
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-</style>
diff --git a/components/grid/demo/flex-align.md b/components/grid/demo/flex-align.md
new file mode 100644
index 000000000..3e4ad1c75
--- /dev/null
+++ b/components/grid/demo/flex-align.md
@@ -0,0 +1,41 @@
+<cn>
+#### Flex 对齐
+Flex 子元素垂直对齐。
+</cn>
+
+<us>
+#### Flex Alignment
+Flex child elements vertically aligned.
+</us>
+
+```html
+<template>
+  <div>
+    <p>Align Top</p>
+    <a-row type="flex" justify="center" align="top">
+      <a-col :span="4"><p class="height-100">col-4</p></a-col>
+      <a-col :span="4"><p class="height-50">col-4</p></a-col>
+      <a-col :span="4"><p class="height-120">col-4</p></a-col>
+      <a-col :span="4"><p class="height-80">col-4</p></a-col>
+    </a-row>
+
+    <p>Align Center</p>
+    <a-row type="flex" justify="space-around" align="middle">
+      <a-col :span="4"><p class="height-100">col-4</p></a-col>
+      <a-col :span="4"><p class="height-50">col-4</p></a-col>
+      <a-col :span="4"><p class="height-120">col-4</p></a-col>
+      <a-col :span="4"><p class="height-80">col-4</p></a-col>
+    </a-row>
+
+    <p>Align Bottom</p>
+    <a-row type="flex" justify="space-between" align="bottom">
+      <a-col :span="4"><p class="height-100">col-4</p></a-col>
+      <a-col :span="4"><p class="height-50">col-4</p></a-col>
+      <a-col :span="4"><p class="height-120">col-4</p></a-col>
+      <a-col :span="4"><p class="height-80">col-4</p></a-col>
+    </a-row>
+  </div>
+</template>
+```
+
+
diff --git a/components/grid/demo/flex-order.md b/components/grid/demo/flex-order.md
new file mode 100644
index 000000000..370d163c1
--- /dev/null
+++ b/components/grid/demo/flex-order.md
@@ -0,0 +1,25 @@
+<cn>
+#### Flex 排序
+从堆叠到水平排列。
+通过 Flex 布局的 Order 来改变元素的排序。
+</cn>
+
+<us>
+#### Flex Order
+To change the element sort by Flex layout order.
+</us>
+
+```html
+<template>
+  <div>
+    <a-row type="flex">
+      <a-col :span="6" :order="4">1 col-order-4</a-col>
+      <a-col :span="6" :order="3">2 col-order-3</a-col>
+      <a-col :span="6" :order="2">3 col-order-2</a-col>
+      <a-col :span="6" :order="1">4 col-order-1</a-col>
+    </a-row>
+  </div>
+</template>
+```
+
+
diff --git a/components/grid/demo/flex-order.vue b/components/grid/demo/flex-order.vue
deleted file mode 100644
index 2f680b396..000000000
--- a/components/grid/demo/flex-order.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div class="grid">
-    <ant-row type="flex">
-      <ant-col :span="6" :order="4" class="color1">1 col-order-4</ant-col>
-      <ant-col :span="6" :order="3" class="color2">2 col-order-3</ant-col>
-      <ant-col :span="6" :order="2" class="color1">3 col-order-2</ant-col>
-      <ant-col :span="6" :order="1" class="color2">4 col-order-1</ant-col>
-    </ant-row>
-  </div>
-</template>
-<script>
-  import { Grid } from 'antd'
-  const { Row, Col } = Grid
-  export default {
-    components: {
-      AntRow: Row,
-      AntCol: Col
-    },
-  }
-</script>
-<style lang="less">
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .color1 {
-    background: rgb(0, 191, 255);
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-</style>
diff --git a/components/grid/demo/flex.md b/components/grid/demo/flex.md
new file mode 100644
index 000000000..d786a08e1
--- /dev/null
+++ b/components/grid/demo/flex.md
@@ -0,0 +1,58 @@
+<cn>
+#### Flex 布局
+Flex 布局基础。
+使用 `row-flex` 定义 `flex` 布局，其子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。
+</cn>
+
+<us>
+#### Flex Layout
+Use `row-flex` define `flex` layout, its child elements depending on the value of the `start`,` center`, `end`,` space-between`, `space-around`, which are defined in its parent node layout mode.
+</us>
+
+```html
+<template>
+  <div>
+    <p>sub-element align left</p>
+    <a-row type="flex" justify="start">
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+    </a-row>
+
+    <p>sub-element align center</p>
+    <a-row type="flex" justify="center">
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+    </a-row>
+
+    <p>sub-element align right</p>
+    <a-row type="flex" justify="end">
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+    </a-row>
+
+    <p>sub-element monospaced arrangement</p>
+    <a-row type="flex" justify="space-between">
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+    </a-row>
+
+    <p>sub-element align full</p>
+    <a-row type="flex" justify="space-around">
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+      <a-col :span="4">col-4</a-col>
+    </a-row>
+  </div>
+</template>
+```
+
+
diff --git a/components/grid/demo/flex.vue b/components/grid/demo/flex.vue
deleted file mode 100644
index d7deb1566..000000000
--- a/components/grid/demo/flex.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <div class="grid">
-    <p>sub-element align left</p>
-    <ant-row type="flex" justify="start">
-      <ant-col :span="4" class="color1">col-4</ant-col>
-      <ant-col :span="4" class="color2">col-4</ant-col>
-      <ant-col :span="4" class="color1">col-4</ant-col>
-      <ant-col :span="4" class="color2">col-4</ant-col>
-    </ant-row>
-
-    <p>sub-element align center</p>
-    <ant-row type="flex" justify="center">
-      <ant-col :span="4" class="color1">col-4</ant-col>
-      <ant-col :span="4" class="color2">col-4</ant-col>
-      <ant-col :span="4" class="color1">col-4</ant-col>
-      <ant-col :span="4" class="color2">col-4</ant-col>
-    </ant-row>
-
-    <p>sub-element align right</p>
-    <ant-row type="flex" justify="end">
-      <ant-col :span="4" class="color1">col-4</ant-col>
-      <ant-col :span="4" class="color2">col-4</ant-col>
-      <ant-col :span="4" class="color1">col-4</ant-col>
-      <ant-col :span="4" class="color2">col-4</ant-col>
-    </ant-row>
-
-    <p>sub-element monospaced arrangement</p>
-    <ant-row type="flex" justify="space-between">
-      <ant-col :span="4" class="color1">col-4</ant-col>
-      <ant-col :span="4" class="color2">col-4</ant-col>
-      <ant-col :span="4" class="color1">col-4</ant-col>
-      <ant-col :span="4" class="color2">col-4</ant-col>
-    </ant-row>
-
-    <p>sub-element align full</p>
-    <ant-row type="flex" justify="space-around">
-      <ant-col :span="4" class="color1">col-4</ant-col>
-      <ant-col :span="4" class="color2">col-4</ant-col>
-      <ant-col :span="4" class="color1">col-4</ant-col>
-      <ant-col :span="4" class="color2">col-4</ant-col>
-    </ant-row>
-  </div>
-</template>
-<script>
-  import { Grid } from 'antd'
-  const { Row, Col } = Grid
-  export default {
-    components: {
-      AntRow: Row,
-      AntCol: Col
-    },
-  }
-</script>
-<style lang="less">
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .color1 {
-    background: rgb(0, 191, 255);
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-</style>
diff --git a/components/grid/demo/flexible.vue b/components/grid/demo/flexible.vue
deleted file mode 100644
index 96a5c6a01..000000000
--- a/components/grid/demo/flexible.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div class="grid">
-    <ant-row>
-      <ant-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10" class="color1">Col</ant-col>
-      <ant-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4" class="color2">Col</ant-col>
-      <ant-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10" class="color1">Col</ant-col>
-    </ant-row>
-  </div>
-</template>
-<script>
-  import { Grid } from 'antd'
-  const { Row, Col } = Grid
-  export default {
-    components: {
-      AntRow: Row,
-      AntCol: Col
-    },
-  }
-</script>
-<style lang="less">
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .color1 {
-    background: rgb(0, 191, 255);
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-</style>
diff --git a/components/grid/demo/gutter.md b/components/grid/demo/gutter.md
new file mode 100644
index 000000000..fe1254d3d
--- /dev/null
+++ b/components/grid/demo/gutter.md
@@ -0,0 +1,44 @@
+<cn>
+#### 区块间隔
+栅格常常需要和间隔进行配合，你可以使用 `Row` 的 `gutter` 属性，我们推荐使用 `(16+8n)px` 作为栅格间隔。(n 是自然数)
+如果要支持响应式，可以写成 `{ xs: 8, sm: 16, md: 24, lg: 32 }`。
+</cn>
+
+<us>
+#### Grid Gutter
+You can use the `gutter` property of `Row` as grid spacing, we recommend set it to `(16 + 8n) px`. (`n` stands for natural number.)
+You can set it to a object like `{ xs: 8, sm: 16, md: 24, lg: 32 }` for responsive design.
+</us>
+
+```html
+<template>
+  <div class="gutter-example">
+    <a-row :gutter="16">
+      <a-col class="gutter-row" :span="6">
+        <div class="gutter-box">col-6</div>
+      </a-col>
+      <a-col class="gutter-row" :span="6">
+        <div class="gutter-box">col-6</div>
+      </a-col>
+      <a-col class="gutter-row" :span="6">
+        <div class="gutter-box">col-6</div>
+      </a-col>
+      <a-col class="gutter-row" :span="6">
+        <div class="gutter-box">col-6</div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+<style>
+.gutter-example .ant-row > div {
+  background: transparent;
+  border: 0;
+}
+.gutter-box {
+  background: #00A0E9;
+  padding: 5px 0;
+}
+</style>
+```
+
+
diff --git a/components/grid/demo/gutter.vue b/components/grid/demo/gutter.vue
deleted file mode 100644
index b9ce3d289..000000000
--- a/components/grid/demo/gutter.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div class="grid" style="overflow: hidden;">
-    <ant-row :gutter="24">
-      <ant-col :span="6"><div class="color2">col-6</div></ant-col>
-      <ant-col :span="6"><div class="color2">col-6</div></ant-col>
-      <ant-col :span="6"><div class="color2">col-6</div></ant-col>
-      <ant-col :span="6"><div class="color2">col-6</div></ant-col>
-    </ant-row>
-  </div>
-</template>
-<script>
-  import { Grid } from 'antd'
-  const { Row, Col } = Grid
-  export default {
-    components: {
-      AntRow: Row,
-      AntCol: Col
-    },
-  }
-</script>
-<style lang="less">
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .color1 {
-    background: rgb(0, 191, 255);
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-</style>
diff --git a/components/grid/demo/index.vue b/components/grid/demo/index.vue
index 9d25299d3..bca5e182b 100644
--- a/components/grid/demo/index.vue
+++ b/components/grid/demo/index.vue
@@ -1,75 +1,137 @@
-<template>
-  <div class="topLevel">
-    <h1>基础布局</h1>
-    <basic/>
-    <h1>恩。基础</h1>
-    <layout/>
-    <h1>区块间隔</h1>
-    <gutter/>
-    <h1>偏移</h1>
-    <offset/>
-    <h1>栅格排序</h1>
-    <pull/>
-    <h1>FLEX</h1>
-    <flex/>
-    <h1>对齐</h1>
-    <align/>
-    <h1>Flex排序</h1>
-    <flex-order/>
-    <h1>响应式设计</h1>
-    <flexible/>
-    <h1>复杂一点</h1>
-    <complex/>
-  </div>
-</template>
 <script>
-import { Grid } from 'antd'
-const { Row, Col } = Grid
-import Basic from './basic.vue'
-import Layout from './layout.vue'
-import Gutter from './gutter.vue'
-import Offset from './offset.vue'
-import Pull from './pull.vue'
-import Flex from './flex.vue'
-import Align from './align.vue'
-import FlexOrder from './flex-order.vue'
-import Flexible from './flexible.vue'
-import Complex from './complex.vue'
+import Basic from './basic'
+import FlexAlign from './flex-align'
+import FlexOrder from './flex-order'
+import Flex from './flex'
+import Gutter from './gutter'
+import Offset from './offset'
+import ResponsiveMore from './responsive-more'
+import Responsive from './responsive'
+import Sort from './sort'
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+const md = {
+  cn: `# Grid 栅格
+          24 栅格系统。
+          ## 设计理念
+          `,
+  us: `# Grid
+24 Grids System。
+## Design concept`,
+}
+const md2 = {
+  cn: `
+  在多数业务情况下，Ant Design需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。
+划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。
+## 概述
+布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：
+- 通过\`row\`在水平方向建立一组\`column\`（简写col）
+- 你的内容应当放置于\`col\`内，并且，只有\`col\`可以作为\`row\`的直接元素
+- 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用\`.col-8\`来创建
+- 如果一个\`row\`中的\`col\`总和超过 24，那么多余的\`col\`会作为一个整体另起一行排列
+## Flex 布局
+我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。
+Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但排版则不拘泥于栅格。
+          ## 代码演示
+  `,
+  us: `
+  In most business situations, Ant Design needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 aliquots.
+
+We name the divided area 'box'. We suggest four boxes for horizontal arrangement at most, one at least. Boxes are proportional to the entire screen as shown in the picture above. To ensure a high level of visual comfort, we customize the typography inside of the box based on the box unit.
+
+## Outline
+
+In the grid system, we define the frame outside the information area based on \`row\` and \`column\`, to ensure that every area can have stable arrangement.
+
+Following is a brief look at how it works:
+
+- Establish a set of \`column\` in the horizontal space defined by \`row\` (abbreviated col)
+- Your content elements should be placed directly in the \`col\`, and only \`col\` should be placed directly in \`row\`
+- The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by \`.col-8\` (\`span=8\`).
+- If the sum of \`col\` spans in a \`row\` are more than 24, then the overflowing \`col\` as a whole will start a new line arrangement.
+
+## Flex layout
+Our grid systems support Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using \`order\`.
+Flex layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout.
+  `,
+}
 export default {
-  components: {
-    AntRow: Row,
-    AntCol: Col,
-    Basic,
-    Layout,
-    Gutter,
-    Offset,
-    Pull,
-    Flex,
-    Align,
-    FlexOrder,
-    Flexible,
-    Complex,
+  category: 'Components',
+  subtitle: '栅格',
+  type: 'Layout',
+  cols: 1,
+  title: 'Grid',
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        <div class='grid-demo'>
+          <div class='ant-row demo-row'>
+            <div class='ant-col-24 demo-col demo-col-1'>
+    100%
+            </div>
+          </div>
+          <div class='ant-row demo-row'>
+            <div class='ant-col-6 demo-col demo-col-2'>
+    25%
+            </div>
+            <div class='ant-col-6 demo-col demo-col-3'>
+    25%
+            </div>
+            <div class='ant-col-6 demo-col demo-col-2'>
+    25%
+            </div>
+            <div class='ant-col-6 demo-col demo-col-3'>
+    25%
+            </div>
+          </div>
+          <div class='ant-row demo-row'>
+            <div class='ant-col-8 demo-col demo-col-4'>
+    33.33%
+            </div>
+            <div class='ant-col-8 demo-col demo-col-5'>
+    33.33%
+            </div>
+            <div class='ant-col-8 demo-col demo-col-4'>
+    33.33%
+            </div>
+          </div>
+          <div class='ant-row demo-row'>
+            <div class='ant-col-12 demo-col demo-col-1'>
+    50%
+            </div>
+            <div class='ant-col-12 demo-col demo-col-3'>
+    50%
+            </div>
+          </div>
+          <div class='ant-row demo-row'>
+            <div class='ant-col-16 demo-col demo-col-4'>
+    66.66%
+            </div>
+            <div class='ant-col-8 demo-col demo-col-5'>
+    33.33%
+            </div>
+          </div>
+        </div>
+        <md cn={md2.cn} us={md2.us}/>
+        <div id='components-grid-demo-all'>
+          <Basic/>
+          <FlexAlign/>
+          <FlexOrder/>
+          <Flex/>
+          <Gutter/>
+          <Offset/>
+          <ResponsiveMore/>
+          <Responsive/>
+          <Sort/>
+        </div>
+        <api>
+          <CN slot='cn' />
+          <US/>
+        </api>
+      </div>
+    )
   },
 }
 </script>
-<style lang="less">
-  .topLevel .ant-row{
-    margin: 10px 0;
-  }
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .show-block {
-    margin: 20px 0;
-  }
-  .color1 {
-    background: #00bfff;
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-</style>
+
diff --git a/components/grid/demo/layout.vue b/components/grid/demo/layout.vue
deleted file mode 100644
index 58ca44de9..000000000
--- a/components/grid/demo/layout.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div class="grid">
-    <ant-row>
-      <ant-col class="color1" :span="12" >col-12</ant-col>
-      <ant-col class="color2" :span="12" >col-12</ant-col>
-    </ant-row>
-    <ant-row>
-      <ant-col class="color1" :span="8" >col-8</ant-col>
-      <ant-col class="color2" :span="8" >col-8</ant-col>
-      <ant-col class="color1" :span="8" >col-8</ant-col>
-    </ant-row>
-    <ant-row>
-      <ant-col class="color1" :span="6" >col-6</ant-col>
-      <ant-col class="color2" :span="6" >col-6</ant-col>
-      <ant-col class="color1" :span="6" >col-6</ant-col>
-      <ant-col class="color2" :span="6" >col-6</ant-col>
-    </ant-row>
-  </div>
-</template>
-<script>
-  import { Grid } from 'antd'
-  const { Row, Col } = Grid
-  export default {
-    components: {
-      AntRow: Row,
-      AntCol: Col
-    },
-  }
-</script>
-<style lang="less">
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .color1 {
-    background: rgb(0, 191, 255);
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-</style>
diff --git a/components/grid/demo/offset.md b/components/grid/demo/offset.md
new file mode 100644
index 000000000..db4514f01
--- /dev/null
+++ b/components/grid/demo/offset.md
@@ -0,0 +1,30 @@
+<cn>
+#### 左右偏移
+列偏移。
+使用 `offset` 可以将列向右侧偏。例如，`:offset="4"` 将元素向右侧偏移了 4 个列（column）的宽度。
+</cn>
+
+<us>
+#### a-column offset
+`Offset` can set the column to the right side. For example, using `offset = {4}` can set the element shifted to the right four columns width.
+</us>
+
+```html
+<template>
+  <div>
+    <a-row>
+      <a-col :span="8">col-8</a-col>
+      <a-col :span="8" :offset="8">col-8</a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="6" :offset="6">col-6 col-offset-6</a-col>
+      <a-col :span="6" :offset="6">col-6 col-offset-6</a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="12" :offset="6">col-12 col-offset-6</a-col>
+    </a-row>
+  </div>
+</template>
+```
+
+
diff --git a/components/grid/demo/offset.vue b/components/grid/demo/offset.vue
deleted file mode 100644
index 293141411..000000000
--- a/components/grid/demo/offset.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <div class="grid">
-    <ant-row>
-      <ant-col :span="8" class="color1">col-8</ant-col>
-      <ant-col :span="8" :offset="8" class="color2">col-8</ant-col>
-    </ant-row>
-    <ant-row>
-      <ant-col :span="6" :offset="6" class="color1">col-6 col-offset-6</ant-col>
-      <ant-col :span="6" :offset="6" class="color2">col-6 col-offset-6</ant-col>
-    </ant-row>
-    <ant-row>
-      <ant-col :span="12" :offset="6" class="color1">col-12 col-offset-6</ant-col>
-    </ant-row>
-  </div>
-</template>
-<script>
-  import { Grid } from 'antd'
-  const { Row, Col } = Grid
-  export default {
-    components: {
-      AntRow: Row,
-      AntCol: Col
-    },
-  }
-</script>
-<style lang="less">
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .color1 {
-    background: rgb(0, 191, 255);
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-</style>
diff --git a/components/grid/demo/pull.vue b/components/grid/demo/pull.vue
deleted file mode 100644
index 1b249d074..000000000
--- a/components/grid/demo/pull.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <div class="grid">
-    <ant-row>
-      <ant-col :span="18" :push="6" class="color1">col-18 col-push-6</ant-col>
-      <ant-col :span="6" :pull="18" class="color2">col-6 col-pull-18</ant-col>
-    </ant-row>
-  </div>
-</template>
-<script>
-  import { Grid } from 'antd'
-  const { Row, Col } = Grid
-  export default {
-    components: {
-      AntRow: Row,
-      AntCol: Col
-    },
-  }
-</script>
-<style lang="less">
-  .grid div {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 40px;
-  }
-  .color1 {
-    background: rgb(0, 191, 255);
-    color: white;
-  }
-  .color2 {
-    background: #0e77ca;
-    color: white;
-  }
-</style>
diff --git a/components/grid/demo/responsive-more.md b/components/grid/demo/responsive-more.md
new file mode 100644
index 000000000..e3b524079
--- /dev/null
+++ b/components/grid/demo/responsive-more.md
@@ -0,0 +1,23 @@
+<cn>
+#### 其他属性的响应式
+`span` `pull` `push` `offset` `order` 属性可以通过内嵌到 `xs` `sm` `md` `lg` `xl` `xxl` 属性中来使用。
+其中 `:xs="6"` 相当于 `:xs="{ span: 6 }"`。
+</cn>
+
+<us>
+#### More responsive
+`span` `pull` `push` `offset` `order` property can be embedded into `xs` `sm` `md` `lg` `xl` properties to use,
+where `:xs="6"` is equivalent to `:xs="{span: 6}"`.
+</us>
+
+```html
+<template>
+  <a-row>
+    <a-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</a-col>
+    <a-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</a-col>
+    <a-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</a-col>
+  </a-row>
+</template>
+```
+
+
diff --git a/components/grid/demo/responsive.md b/components/grid/demo/responsive.md
new file mode 100644
index 000000000..2c0f075d1
--- /dev/null
+++ b/components/grid/demo/responsive.md
@@ -0,0 +1,21 @@
+<cn>
+#### 响应式布局
+参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设五个响应尺寸：`xs` `sm` `md` `lg` `xl`  `xxl`。
+</cn>
+
+<us>
+#### 响应式布局
+Referring to the Bootstrap [responsive design] (http://getbootstrap.com/css/#grid-media-queries), here preset five dimensions: `xs` `sm` `md` `lg` `xl`.
+</us>
+
+```html
+<template>
+  <a-row>
+    <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</a-col>
+    <a-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">Col</a-col>
+    <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</a-col>
+  </a-row>
+</template>
+```
+
+
diff --git a/components/grid/demo/sort.md b/components/grid/demo/sort.md
new file mode 100644
index 000000000..fbdd70a8c
--- /dev/null
+++ b/components/grid/demo/sort.md
@@ -0,0 +1,23 @@
+<cn>
+#### 栅格排序
+列排序。
+通过使用 `push` 和 `pull` 类就可以很容易的改变列（column）的顺序。
+</cn>
+
+<us>
+#### Grid sort
+By using `push` and` pull` class you can easily change column order.
+</us>
+
+```html
+<template>
+  <div>
+    <a-row>
+      <a-col :span="18" :push="6">col-18 col-push-6</a-col>
+      <a-col :span="6" :pull="18">col-6 col-pull-18</a-col>
+    </a-row>
+  </div>
+</template>
+```
+
+
diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md
new file mode 100644
index 000000000..ee923db71
--- /dev/null
+++ b/components/grid/index.en-US.md
@@ -0,0 +1,28 @@
+## API
+
+### Row
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| align | the vertical alignment of the flex layout: `top` `middle` `bottom` | string | `top` |
+| gutter | spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24}` | number/object | 0 |
+| justify | horizontal arrangement of the flex layout: `start` `end` `center` `space-around` `space-between` | string | `start` |
+| type | layout mode, optional `flex`, [browser support](http://caniuse.com/#search=flex) | string |  |
+
+### Col
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| offset | the number of cells to offset Col from the left | number | 0 |
+| order | raster order, used in `flex` layout mode | number | 0 |
+| pull | the number of cells that raster is moved to the left | number | 0 |
+| push | the number of cells that raster is moved to the right | number | 0 |
+| span | raster number of cells to occupy, 0 corresponds to `display: none` | number | none |
+| xs | `<576px` and also default setting, could be a `span` value or an object containing above props | number\|object | - |
+| sm | `≥576px`, could be a `span` value or an object containing above props | number\|object | - |
+| md | `≥768px`, could be a `span` value or an object containing above props | number\|object | - |
+| lg | `≥992px`, could be a `span` value or an object containing above props | number\|object | - |
+| xl | `≥1200px`, could be a `span` value or an object containing above props | number\|object | - |
+| xxl | `≥1600px`, could be a `span` value or an object containing above props | number\|object | - |
+
+The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)(not including `occasionally part`).
diff --git a/components/grid/index.js b/components/grid/index.js
index cd65231b0..c5913e63c 100644
--- a/components/grid/index.js
+++ b/components/grid/index.js
@@ -1,6 +1,7 @@
-import Row from './Row.vue'
-import Col from './Col.vue'
+import Row from './Row'
+import Col from './Col'
 
-export default {
-  Col, Row,
+export {
+  Row,
+  Col,
 }
diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md
new file mode 100644
index 000000000..a139e98fd
--- /dev/null
+++ b/components/grid/index.zh-CN.md
@@ -0,0 +1,28 @@
+## API
+
+### Row
+
+| 成员 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| align | flex 布局下的垂直对齐方式：`top` `middle` `bottom` | string | `top` |
+| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number/object | 0 |
+| justify | flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between` | string | `start` |
+| type | 布局模式，可选 `flex`，[现代浏览器](http://caniuse.com/#search=flex) 下有效 | string |  |
+
+### Col
+
+| 成员 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 |
+| order | 栅格顺序，`flex` 布局模式下有效 | number | 0 |
+| pull | 栅格向左移动格数 | number | 0 |
+| push | 栅格向右移动格数 | number | 0 |
+| span | 栅格占位格数，为 0 时相当于 `display: none` | number | - |
+| xs | `<576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+| sm | `≥576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+| md | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+| lg | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+| xl | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+| xxl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+
+响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。
diff --git a/components/index.js b/components/index.js
index 61e55c926..7787567d5 100644
--- a/components/index.js
+++ b/components/index.js
@@ -13,7 +13,11 @@ const RadioGroup = Radio.Group
 const RadioButton = Radio.Button
 export { Radio, RadioGroup, RadioButton }
 
-export { default as Grid } from './grid'
+import { Row, Col } from './grid'
+export {
+  Row,
+  Col,
+}
 
 export { default as Rate } from './rate'
 
@@ -21,10 +25,6 @@ export { default as Tooltip } from './tooltip'
 
 export { default as Pagination } from './pagination'
 
-export { default as Row } from './grid/Row'
-
-export { default as Col } from './grid/Col'
-
 export { default as Tag } from './tag'
 
 export { default as Avatar } from './avatar'
@@ -88,24 +88,12 @@ export { default as Affix } from './affix'
 export { default as Cascader } from './cascader'
 export { default as BackTop } from './back-top'
 export { default as Modal } from './modal'
-import {
-  info,
-  success,
-  error,
-  warning,
-  warn,
-  confirm,
-} from './modal'
+export { default as Alert } from './alert'
+export { default as TimePicker } from './time-picker'
 
 const api = {
   notification,
   message,
-  modalInfo: info,
-  modalSuccess: success,
-  modalError: error,
-  modalWarning: warning,
-  modalWarn: warn,
-  modalConfirm: confirm,
 }
 export { api }
 
diff --git a/components/locale-provider/default.js b/components/locale-provider/default.js
index 5d8c10b1c..d0224bed9 100644
--- a/components/locale-provider/default.js
+++ b/components/locale-provider/default.js
@@ -1,13 +1,13 @@
-// import Pagination from 'rc-pagination/lib/locale/en_US'
+import Pagination from '../vc-pagination/locale/en_US'
 // import DatePicker from '../date-picker/locale/en_US'
-// import TimePicker from '../time-picker/locale/en_US'
+import TimePicker from '../time-picker/locale/en_US'
 // import Calendar from '../calendar/locale/en_US'
 
 export default {
   locale: 'en',
-  // Pagination,
+  Pagination,
   // DatePicker,
-  // TimePicker,
+  TimePicker,
   // Calendar,
   Table: {
     filterTitle: 'Filter menu',
diff --git a/components/locale-provider/zh_CN.js b/components/locale-provider/zh_CN.js
index 4fb6613c5..148e02e6c 100644
--- a/components/locale-provider/zh_CN.js
+++ b/components/locale-provider/zh_CN.js
@@ -1,13 +1,13 @@
-// import Pagination from 'rc-pagination/lib/locale/zh_CN'
+import Pagination from '../vc-pagination/locale/zh_CN'
 // import DatePicker from '../date-picker/locale/zh_CN'
-// import TimePicker from '../time-picker/locale/zh_CN'
+import TimePicker from '../time-picker/locale/zh_CN'
 // import Calendar from '../calendar/locale/zh_CN'
 
 export default {
   locale: 'zh-cn',
-  // Pagination,
+  Pagination,
   // DatePicker,
-  // TimePicker,
+  TimePicker,
   // Calendar,
   Table: {
     filterTitle: '筛选',
diff --git a/components/modal/Modal.vue b/components/modal/Modal.vue
index 81ff819d2..99893ae9d 100644
--- a/components/modal/Modal.vue
+++ b/components/modal/Modal.vue
@@ -63,6 +63,10 @@ export default {
     visible: false,
     okType: 'primary',
   }),
+  model: {
+    prop: 'visible',
+    event: 'change',
+  },
   // static info: ModalFunc;
   // static success: ModalFunc;
   // static error: ModalFunc;
@@ -72,6 +76,7 @@ export default {
   methods: {
     handleCancel (e) {
       this.$emit('cancel', e)
+      this.$emit('change', false)
     },
 
     handleOk (e) {
@@ -131,7 +136,7 @@ export default {
       props: {
         ...this.$props,
         title,
-        footer: typeof footer === undefined ? defaultFooter : footer,
+        footer: footer === undefined ? defaultFooter : footer,
         visible: visible,
         mousePosition,
       },
diff --git a/components/modal/confirm.js b/components/modal/confirm.js
index 23365b493..a4781d986 100644
--- a/components/modal/confirm.js
+++ b/components/modal/confirm.js
@@ -2,7 +2,10 @@ import Vue from 'vue'
 import ConfirmDialog from './ConfirmDialog'
 export default function confirm (config) {
   const div = document.createElement('div')
+  const el = document.createElement('div')
+  div.appendChild(el)
   document.body.appendChild(div)
+
   let confirmDialogInstance = null
   function close (...args) {
     destroy(...args)
@@ -23,7 +26,7 @@ export default function confirm (config) {
 
   function render (props) {
     return new Vue({
-      el: div,
+      el: el,
       render () {
         return <ConfirmDialog {...props} />
       },
diff --git a/components/modal/demo/async.md b/components/modal/demo/async.md
new file mode 100644
index 000000000..b35ef6e5b
--- /dev/null
+++ b/components/modal/demo/async.md
@@ -0,0 +1,57 @@
+
+<cn>
+#### 异步关闭
+点击确定后异步关闭对话框，例如提交表单。
+</cn>
+
+<us>
+#### Asynchronously close
+Asynchronously close a modal dialog when a user clicked OK button, for example,
+you can use this pattern when you submit a form.
+</us>
+
+```html
+<template>
+  <div>
+    <a-button type="primary" @click="showModal">Open</a-button>
+    <a-modal
+      title="Title"
+      :visible="visible"
+      @ok="handleOk"
+      :confirmLoading="confirmLoading"
+      @cancel="handleCancel"
+    >
+      <p>{{ModalText}}</p>
+    </a-modal>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      ModalText: 'Content of the modal',
+      visible: false,
+      confirmLoading: false,
+    }
+  },
+  methods: {
+    showModal() {
+      this.visible = true
+    },
+    handleOk(e) {
+      this.ModalText = 'The modal will be closed after two seconds';
+      this.confirmLoading = true;
+      setTimeout(() => {
+        this.visible = false;
+        this.confirmLoading = false;
+      }, 2000);
+    },
+    handleCancel(e) {
+      console.log('Clicked cancel button');
+      this.visible = false
+    },
+  }
+}
+</script>
+```
+
diff --git a/components/modal/demo/basic.md b/components/modal/demo/basic.md
index f955e32db..e041be603 100644
--- a/components/modal/demo/basic.md
+++ b/components/modal/demo/basic.md
@@ -15,9 +15,8 @@ Basic modal.
     <a-button type="primary" @click="showModal">Open</a-button>
     <a-modal
       title="Basic Modal"
-      :visible="visible"
+      v-model="visible"
       @ok="handleOk"
-      @cancel="handleCancel"
     >
       <p>Some contents...</p>
       <p>Some contents...</p>
@@ -40,10 +39,6 @@ export default {
       console.log(e);
       this.visible = false
     },
-    handleCancel(e) {
-      console.log(e);
-      this.visible = false
-    },
   }
 }
 </script>
diff --git a/components/modal/demo/confirm-promise.md b/components/modal/demo/confirm-promise.md
new file mode 100644
index 000000000..24106f6b5
--- /dev/null
+++ b/components/modal/demo/confirm-promise.md
@@ -0,0 +1,40 @@
+
+<cn>
+#### 确认对话框
+使用 `confirm()` 可以快捷地弹出确认框。onCancel/onOk 返回 promise 可以延迟关闭
+</cn>
+
+<us>
+#### Confirmation modal dialog
+To use `confirm()` to popup confirmation modal dialog. Let onCancel/onOk function return a promise object to
+delay closing the dialog.
+</us>
+
+```html
+<template>
+  <a-button @click="showConfirm">
+    Confirm
+  </a-button>
+</template>
+<script>
+import { Modal } from 'antd'
+const confirm = Modal.confirm
+export default {
+  methods: {
+    showConfirm() {
+      confirm({
+        title: 'Do you want to delete these items?',
+        content: 'When clicked the OK button, this dialog will be closed after 1 second',
+        onOk() {
+          return new Promise((resolve, reject) => {
+            setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
+          }).catch(() => console.log('Oops errors!'));
+        },
+        onCancel() {},
+      });
+    },
+  }
+}
+</script>
+```
+
diff --git a/components/modal/demo/confirm.md b/components/modal/demo/confirm.md
index b5db87850..839f3f4bc 100644
--- a/components/modal/demo/confirm.md
+++ b/components/modal/demo/confirm.md
@@ -21,10 +21,12 @@ To use `confirm()` to popup a confirmation modal dialog.
   </div>
 </template>
 <script>
+import { Modal } from 'antd'
+const confirm = Modal.confirm
 export default {
   methods: {
     showConfirm() {
-      this.$modalConfirm({
+      confirm({
         title: 'Do you Want to delete these items?',
         content: 'Some descriptions',
         onOk() {
@@ -33,11 +35,12 @@ export default {
         onCancel() {
           console.log('Cancel');
         },
+        class: 'test',
       });
     },
 
     showDeleteConfirm() {
-      this.$modalConfirm({
+      confirm({
         title: 'Are you sure delete this task?',
         content: 'Some descriptions',
         okText: 'Yes',
diff --git a/components/modal/demo/footer.md b/components/modal/demo/footer.md
new file mode 100644
index 000000000..c4d5b697b
--- /dev/null
+++ b/components/modal/demo/footer.md
@@ -0,0 +1,67 @@
+
+<cn>
+#### 自定义页脚
+更复杂的例子，自定义了页脚的按钮，点击提交后进入 loading 状态，完成后关闭。
+不需要默认确定取消按钮时，你可以把 `footer` 设为 `null`。
+</cn>
+
+<us>
+#### Customized Footer
+A more complex example which define a customized footer button bar,
+the dialog will change to loading state after clicking submit button, when the loading is over,
+the modal dialog will be closed.
+You could set `footer` to `null` if you don't need default footer buttons.
+</us>
+
+```html
+<template>
+  <div>
+    <a-button type="primary" @click="showModal">
+      Open
+    </a-button>
+    <a-modal
+      v-model="visible"
+      title="Title"
+      onOk="handleOk"
+    >
+      <template slot="footer">
+        <a-button key="back" @click="handleCancel">Return</a-button>
+        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
+          Submit
+        </a-button>
+      </template>
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+    </a-modal>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      visible: false,
+    }
+  },
+  methods: {
+    showModal() {
+      this.visible = true;
+    },
+    handleOk(e) {
+      this.loading = true;
+      setTimeout(() => {
+        this.visible = false;
+        this.loading = false;
+      }, 3000);
+    },
+    handleCancel(e) {
+      this.visible = false;
+    },
+  }
+}
+</script>
+```
+
diff --git a/components/modal/demo/index.vue b/components/modal/demo/index.vue
new file mode 100644
index 000000000..a7895bdaa
--- /dev/null
+++ b/components/modal/demo/index.vue
@@ -0,0 +1,63 @@
+<script>
+import Async from './async'
+import Basic from './basic'
+import ConfirmPromise from './confirm-promise'
+import Confirm from './confirm'
+import Footer from './footer'
+import Info from './info'
+import Locale from './locale'
+import Manual from './manual'
+import Position from './position'
+
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+const md = {
+  cn: `# Modal 对话框
+          模态对话框。
+## 何时使用
+需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 \`Modal\` 在当前页面正中打开一个浮层，承载相应的操作。
+另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 \`antd.Modal.confirm()\` 等方法。
+          ## 代码演示`,
+  us: `# Modal
+          Modal dialogs.
+## When To Use
+When requiring users to interact with the application, but without jumping to a new page and interrupting
+the user's workflow, you can use \`Modal\` to create a new floating layer over the current page to get user
+feedback or display information.
+Additionally, if you need show a simple confirmation dialog, you can use \`antd.Modal.confirm()\`,
+and so on.
+`,
+}
+export default {
+  type: 'Feedback',
+  category: 'Components',
+  subtitle: '对话框',
+  title: 'Modal',
+  render () {
+    return (
+      <div id='components-modal-demo'>
+        <md cn={md.cn} us={md.us}/>
+        <Async/>
+        <Basic/>
+        <ConfirmPromise/>
+        <Confirm/>
+        <Footer/>
+        <Info/>
+        <Locale/>
+        <Manual/>
+        <Position/>
+        <api>
+          <CN slot='cn' />
+          <US/>
+        </api>
+      </div>
+    )
+  },
+}
+</script>
+
+<style>
+#components-modal-demo .ant-btn {
+  margin-right: 8px;
+}
+</style>
diff --git a/components/modal/demo/info.md b/components/modal/demo/info.md
new file mode 100644
index 000000000..bcfba8058
--- /dev/null
+++ b/components/modal/demo/info.md
@@ -0,0 +1,66 @@
+
+<cn>
+#### 信息提示
+各种类型的信息提示，只提供一个按钮用于关闭。
+</cn>
+
+<us>
+#### Information modal dialog
+In the various types of information modal dialog, only one button to close dialog is provided.
+</us>
+
+```html
+<template>
+  <div>
+    <a-button @click="info">Info</a-button>
+    <a-button @click="success">Success</a-button>
+    <a-button @click="error">Error</a-button>
+    <a-button @click="warning">Warning</a-button>
+  </div>
+</template>
+<script>
+import { Modal } from 'antd'
+export default {
+  methods: {
+    info() {
+      const h = this.$createElement
+      Modal.info({
+        title: 'This is a notification message',
+        content: h('div',{}, [
+          h('p', 'some messages...some messages...'),
+          h('p', 'some messages...some messages...'),
+        ]),
+        onOk() {},
+      });
+    },
+
+    success() {
+      Modal.success({
+        title: 'This is a success message',
+        content: (  // JSX support
+          <div>
+            <p>some messages...some messages...</p>
+            <p>some messages...some messages...</p>
+          </div>
+        ),
+      });
+    },
+
+    error() {
+      Modal.error({
+        title: 'This is an error message',
+        content: 'some messages...some messages...',
+      });
+    },
+
+    warning() {
+      Modal.warning({
+        title: 'This is a warning message',
+        content: 'some messages...some messages...',
+      });
+    },
+  }
+}
+</script>
+```
+
diff --git a/components/modal/demo/locale.md b/components/modal/demo/locale.md
new file mode 100644
index 000000000..ba3d40512
--- /dev/null
+++ b/components/modal/demo/locale.md
@@ -0,0 +1,60 @@
+
+<cn>
+#### 国际化
+设置 `okText` 与 `cancelText` 以自定义按钮文字。
+</cn>
+
+<us>
+#### Internationalization
+To customize the text of the buttons, you need to set `okText` and `cancelText` props.
+</us>
+
+```html
+<template>
+  <div>
+    <a-button type="primary" @click="showModal">Modal</a-button>
+    <a-modal
+      title="Modal"
+      v-model="visible"
+      @ok="hideModal"
+      okText="确认"
+      cancelText="取消"
+    >
+      <p>Bla bla ...</p>
+      <p>Bla bla ...</p>
+      <p>Bla bla ...</p>
+    </a-modal>
+    <br />
+    <br />
+    <a-button @click="confirm">Confirm</a-button>
+  </div>
+</template>
+<script>
+import { Modal } from 'antd'
+const confirm = Modal.confirm
+export default {
+  data() {
+    return {
+      visible: false,
+    }
+  },
+  methods: {
+    showModal() {
+      this.visible = true
+    },
+    hideModal() {
+      this.visible = false
+    },
+    confirm() {
+      confirm({
+        title: 'Confirm',
+        content: 'Bla bla ...',
+        okText: '确认',
+        cancelText: '取消',
+      });
+    }
+  }
+}
+</script>
+```
+
diff --git a/components/modal/demo/manual.md b/components/modal/demo/manual.md
new file mode 100644
index 000000000..e8b2f3d2d
--- /dev/null
+++ b/components/modal/demo/manual.md
@@ -0,0 +1,31 @@
+
+<cn>
+#### 手动移除
+手动关闭modal。
+</cn>
+
+<us>
+#### Manual to destroy
+Manually destroying a modal.
+</us>
+
+```html
+<template>
+  <a-button @click="success">Success</a-button>
+</template>
+<script>
+import { Modal } from 'antd'
+export default {
+  methods: {
+    success() {
+      const modal = Modal.success({
+        title: 'This is a notification message',
+        content: 'This modal will be destroyed after 1 second',
+      });
+      setTimeout(() => modal.destroy(), 1000);
+    }
+  }
+}
+</script>
+```
+
diff --git a/components/modal/demo/position.md b/components/modal/demo/position.md
new file mode 100644
index 000000000..1d868906b
--- /dev/null
+++ b/components/modal/demo/position.md
@@ -0,0 +1,92 @@
+
+<cn>
+#### 自定义位置
+使用 `style.top` 或配合其他样式来设置对话框位置。
+</cn>
+
+<us>
+#### To customize the position of modal
+You can use `style.top` or other styles to set position of modal dialog.
+</us>
+
+```html
+<template>
+  <div>
+    <a-button type="primary" @click="() => setModal1Visible(true)">Display a modal dialog at 20px to Top</a-button>
+    <a-modal
+      title="20px to Top"
+      style="top: 20px;"
+      :visible="modal1Visible"
+      @ok="() => setModal1Visible(false)"
+      @cancel="() => setModal1Visible(false)"
+    >
+      <p>some contents...</p>
+      <p>some contents...</p>
+      <p>some contents...</p>
+    </a-modal>
+    <br /><br />
+    <a-button type="primary" @click="() => modal2Visible = true">Vertically centered modal dialog</a-button>
+    <a-modal
+      title="Vertically centered modal dialog"
+      wrapClassName="vertical-center-modal"
+      v-model="modal2Visible"
+      @ok="() => modal2Visible = false"
+    >
+      <p>some contents...</p>
+      <p>some contents...</p>
+      <p>some contents...</p>
+    </a-modal>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      modal1Visible: false,
+      modal2Visible: false,
+    }
+  },
+  methods: {
+    setModal1Visible(modal1Visible) {
+      this.modal1Visible = modal1Visible;
+    },
+  }
+}
+</script>
+<style>
+/* use css to set position of modal */
+.vertical-center-modal {
+  text-align: center;
+  white-space: nowrap;
+}
+
+.vertical-center-modal:before {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+  width: 0;
+}
+
+.vertical-center-modal .ant-modal {
+  display: inline-block;
+  vertical-align: middle;
+  top: 0;
+  text-align: left;
+}
+
+/*
+// Use flex which not working in IE
+.vertical-center-modal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vertical-center-modal .ant-modal {
+  top: 0;
+}
+*/
+</style>
+```
+
diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md
new file mode 100644
index 000000000..92323c5cf
--- /dev/null
+++ b/components/modal/index.en-US.md
@@ -0,0 +1,69 @@
+
+## API
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| afterClose | Specify a function that will be called when modal is closed completely. | function | - |
+| bodyStyle | Body style for modal body element. Such as height, padding etc. | object | {} |
+| cancelText | Text of the Cancel button | string\|slot | `Cancel` |
+| closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | true |
+| confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false |
+| destroyOnClose | Whether to unmount child compenents on onClose | boolean | false |
+| footer | Footer content, set as `:footer="null"` when you don't need default buttons | string\|slot | OK and Cancel buttons |
+| getContainer | Return the mount node for Modal | (instance): HTMLElement | () => document.body |
+| mask | Whether show mask or not. | Boolean | true |
+| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean | true |
+| maskStyle | Style for modal's mask element. | object | {} |
+| okText | Text of the OK button | string\|slot | `OK` |
+| okType | Button `type` of the OK button | string | `primary` |
+| style | Style of floating layer, typically used at least for adjusting the position. | object | - |
+| title | The modal dialog's title | string\|slot | - |
+| visible | Whether the modal dialog is visible or not | boolean | false |
+| width | Width of the modal dialog | string\|number | 520 |
+| wrapClassName | The class name of the container of the modal dialog | string | - |
+| zIndex | The `z-index` of the Modal | Number | 1000 |
+
+### events
+| Events Name | Description | Arguments |
+| --- | --- | --- |
+| cancel | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button | function(e) |
+| ok | Specify a function that will be called when a user clicks the OK button | function(e) |
+
+#### Note
+
+> The state of Modal will be preserved at it's component lifecycle by default, if you wish to open it with a brand new state everytime, set `destroyOnClose` on it.
+
+### Modal.method()
+
+There are five ways to display the information based on the content's nature:
+
+- `Modal.info`
+- `Modal.success`
+- `Modal.error`
+- `Modal.warning`
+- `Modal.confirm`
+
+The items listed above are all functions, expecting a settings object as parameter.
+The properties of the object are follows:
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| cancelText | Text of the Cancel button | string | `Cancel` |
+| class | class of container | string | - |
+| content | Content | string\|vNode | - |
+| iconType | Icon `type` of the Icon component | string | `question-circle` |
+| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | Boolean | `false` |
+| okText | Text of the OK button | string | `OK` |
+| okType | Button `type` of the OK button | string | `primary` |
+| title | Title | string\|vNode | - |
+| width | Width of the modal dialog | string\|number | 416 |
+| zIndex | The `z-index` of the Modal | Number | 1000 |
+| onCancel | Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | - |
+| onOk | Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | - |
+
+All the `Modal.method`s will return a reference, and then we can close the modal dialog by the reference.
+
+```jsx
+const ref = Modal.info();
+ref.destroy();
+```
diff --git a/components/modal/index.js b/components/modal/index.js
index 032891f54..759838756 100644
--- a/components/modal/index.js
+++ b/components/modal/index.js
@@ -53,14 +53,11 @@ const confirm = function (props) {
   }
   return modalConfirm(config)
 }
-
-export {
-  info,
-  success,
-  error,
-  warning,
-  warn,
-  confirm,
-}
+Modal.info = info
+Modal.success = success
+Modal.error = error
+Modal.warning = warning
+Modal.warn = warn
+Modal.confirm = confirm
 
 export default Modal
diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md
new file mode 100644
index 000000000..cb68f3e33
--- /dev/null
+++ b/components/modal/index.zh-CN.md
@@ -0,0 +1,67 @@
+## API
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| afterClose | Modal 完全关闭后的回调 | function | 无 |
+| bodyStyle | Modal body 样式 | object | {} |
+| cancelText | 取消按钮文字 | string\| slot | 取消 |
+| closable | 是否显示右上角的关闭按钮 | boolean | true |
+| confirmLoading | 确定按钮 loading | boolean | 无 |
+| destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false |
+| footer | 底部内容，当不需要默认底部按钮时，可以设为 `:footer="null"` | string\|slot | 确定取消按钮 |
+| getContainer | 指定 Modal 挂载的 HTML 节点 | (instance): HTMLElement | () => document.body |
+| mask | 是否展示遮罩 | Boolean | true |
+| maskClosable | 点击蒙层是否允许关闭 | boolean | true |
+| maskStyle | 遮罩样式 | object | {} |
+| okText | 确认按钮文字 | string\|slot | 确定 |
+| okType | 确认按钮类型 | string | primary |
+| style | 可用于设置浮层的样式，调整浮层位置等 | object | - |
+| title | 标题 | string\|slot | 无 |
+| visible(v-model) | 对话框是否可见 | boolean | 无 |
+| width | 宽度 | string\|number | 520 |
+| wrapClassName | 对话框外层容器的类名 | string | - |
+| zIndex | 设置 Modal 的 `z-index` | Number | 1000 |
+
+### 事件
+| 事件名称 | 说明 | 回调参数 |
+| --- | --- | --- |
+| cancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) |
+| ok | 点击确定回调 | function(e) |
+
+#### 注意
+
+> `<Modal />` 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置 `destroyOnClose`。
+
+### Modal.method()
+
+包括：
+
+- `Modal.info`
+- `Modal.success`
+- `Modal.error`
+- `Modal.warning`
+- `Modal.confirm`
+
+以上均为一个函数，参数为 object，具体属性如下：
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| cancelText | 取消按钮文字 | string | 取消 |
+| class | 容器类名 | string | - |
+| content | 内容 | string\|vNode | 无 |
+| iconType | 图标 Icon 类型 | string | question-circle |
+| maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` |
+| okText | 确认按钮文字 | string | 确定 |
+| okType | 确认按钮类型 | string | primary |
+| title | 标题 | string\|vNode | 无 |
+| width | 宽度 | string\|number | 416 |
+| zIndex | 设置 Modal 的 `z-index` | Number | 1000 |
+| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 |
+| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 |
+
+以上函数调用后，会返回一个引用，可以通过该引用关闭弹窗。
+
+```jsx
+const ref = Modal.info();
+ref.destroy();
+```
diff --git a/components/style.js b/components/style.js
index 82f50e0d0..954a968c3 100644
--- a/components/style.js
+++ b/components/style.js
@@ -28,3 +28,5 @@ import './affix/style'
 import './cascader/style'
 import './back-top/style'
 import './modal/style'
+import './alert/style'
+import './time-picker/style'
diff --git a/components/tag/demo/control.vue b/components/tag/demo/control.vue
index eff2c24f3..1f81d908a 100644
--- a/components/tag/demo/control.vue
+++ b/components/tag/demo/control.vue
@@ -10,12 +10,12 @@
         {{tag}}
       </Tag>
     </template>
-    <Input
+    <a-input
       v-if="inputVisible"
       ref="input"
       type="text"
       size="small"
-      :style="{ width: 78 }"
+      :style="{ width: '78px' }"
       :value="inputValue"
       @change="handleInputChange"
       @blur="handleInputConfirm"
diff --git a/components/time-picker/demo/12hours.md b/components/time-picker/demo/12hours.md
new file mode 100644
index 000000000..7a72f876a
--- /dev/null
+++ b/components/time-picker/demo/12hours.md
@@ -0,0 +1,28 @@
+<cn>
+#### 12 小时制
+12 小时制的时间选择器，默认的 format 为 `h:mm:ss a`。
+</cn>
+
+<us>
+#### 12 hours
+TimePicker of 12 hours format, with default format `h:mm:ss a`.
+</us>
+
+```html
+<template>
+  <div>
+    <a-time-picker use12Hours @change="onChange" />
+    <a-time-picker use12Hours format="h:mm:ss A" @change="onChange" />
+    <a-time-picker use12Hours format="h:mm a" @change="onChange" />
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    onChange(time, timeString){
+      console.log(time, timeString);
+    }
+  },
+}
+</script>
+```
diff --git a/components/time-picker/demo/addon.md b/components/time-picker/demo/addon.md
new file mode 100644
index 000000000..2f744d775
--- /dev/null
+++ b/components/time-picker/demo/addon.md
@@ -0,0 +1,43 @@
+<cn>
+#### 附加内容
+在 TimePicker 选择框底部显示自定义的内容。
+</cn>
+
+<us>
+#### Addon
+Render addon contents to timepicker panel's bottom.
+</us>
+
+```html
+<template>
+  <div>
+    <a-time-picker @openChange="handleOpenChange" :open="open">
+      <a-button slot="addon" size="small" type="primary" @click="handleClose">Ok</a-button>
+    </a-time-picker>
+    <a-time-picker :open.sync="open2">
+      <a-button slot="addon" size="small" type="primary" @click="handleClose">Ok</a-button>
+    </a-time-picker>
+  </div>
+</template>
+<script>
+import moment from 'moment';
+export default {
+  data() {
+    return {
+      open: false,
+      open2: false,
+    }
+  },
+  methods: {
+    handleOpenChange(open){
+      console.log('open', open);
+      this.open = open
+    },
+    handleClose(){
+      this.open = false
+      this.open2 = false
+    }
+  },
+}
+</script>
+```
diff --git a/components/time-picker/demo/basic.md b/components/time-picker/demo/basic.md
new file mode 100644
index 000000000..643040b57
--- /dev/null
+++ b/components/time-picker/demo/basic.md
@@ -0,0 +1,26 @@
+<cn>
+#### 基本
+点击 TimePicker，然后可以在浮层中选择或者输入某一时间。
+</cn>
+
+<us>
+#### Basic
+Click `TimePicker`, and then we could select or input a time in panel.
+</us>
+
+```html
+<template>
+  <a-time-picker @change="onChange" :defaultOpenValue="moment('00:00:00', 'HH:mm:ss')" />
+</template>
+<script>
+import moment from 'moment';
+export default {
+  methods: {
+    moment,
+    onChange(time, timeString){
+      console.log(time, timeString);
+    }
+  },
+}
+</script>
+```
diff --git a/components/time-picker/demo/disabled.md b/components/time-picker/demo/disabled.md
new file mode 100644
index 000000000..6cf2a43c4
--- /dev/null
+++ b/components/time-picker/demo/disabled.md
@@ -0,0 +1,23 @@
+<cn>
+#### 禁用
+禁用时间选择。
+</cn>
+
+<us>
+#### disabled
+A disabled state of the `TimePicker`.
+</us>
+
+```html
+<template>
+  <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" disabled />
+</template>
+<script>
+import moment from 'moment';
+export default {
+  methods: {
+    moment,
+  }
+}
+</script>
+```
diff --git a/components/time-picker/demo/hide-column.md b/components/time-picker/demo/hide-column.md
new file mode 100644
index 000000000..415e2d833
--- /dev/null
+++ b/components/time-picker/demo/hide-column.md
@@ -0,0 +1,23 @@
+<cn>
+#### 选择时分
+TimePicker 浮层中的列会随着 `format` 变化，当略去 `format` 中的某部分时，浮层中对应的列也会消失。
+</cn>
+
+<us>
+#### Hour and minute
+While part of `format` is omitted, the corresponding column in panel will disappear, too.
+</us>
+
+```html
+<template>
+  <a-time-picker :defaultValue="moment('12:08', 'HH:mm')" format="HH:mm" />
+</template>
+<script>
+import moment from 'moment';
+export default {
+  methods: {
+    moment,
+  },
+}
+</script>
+```
diff --git a/components/time-picker/demo/index.vue b/components/time-picker/demo/index.vue
new file mode 100644
index 000000000..9298d36e9
--- /dev/null
+++ b/components/time-picker/demo/index.vue
@@ -0,0 +1,52 @@
+<script>
+import Hours from './12hours'
+import Addon from './addon'
+import Basic from './basic'
+import Disabled from './disabled'
+import HideColumn from './hide-column'
+import IntervalOptions from './interval-options'
+import Size from './size'
+import Value from './value'
+
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+const md = {
+  cn: `# TimePicker 时间选择框
+          输入或选择时间的控件。
+## 何时使用
+当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。
+          ## 代码演示`,
+  us: `# TimePicker
+          To select/input a time.
+## When To Use
+By clicking the input box, you can select a time from a popup panel.`,
+}
+export default {
+  category: 'Components',
+  subtitle: '时间选择框',
+  type: 'Data Entry',
+  title: 'TimePicker',
+  render () {
+    return (
+      <div id='components-timepicker-demo'>
+        <md cn={md.cn} us={md.us}/>
+        <Hours/>
+        <Addon/>
+        <Basic/>
+        <Disabled/>
+        <HideColumn/>
+        <IntervalOptions/>
+        <Size/>
+        <Value/>
+        <api>
+          <CN slot='cn' />
+          <US/>
+        </api>
+      </div>
+    )
+  },
+}
+</script>
+<style>
+#components-timepicker-demo .ant-time-picker { margin: 0 8px 12px 0; }
+</style>
diff --git a/components/time-picker/demo/interval-options.md b/components/time-picker/demo/interval-options.md
new file mode 100644
index 000000000..0add82dd7
--- /dev/null
+++ b/components/time-picker/demo/interval-options.md
@@ -0,0 +1,15 @@
+<cn>
+#### 步长选项
+可以使用 `hourStep` `minuteStep` `secondStep` 按步长展示可选的时分秒。
+</cn>
+
+<us>
+#### interval option
+Show stepped options by `hourStep` `minuteStep` `secondStep`.
+</us>
+
+```html
+<template>
+  <a-time-picker :minuteStep="15" :secondStep="10" />
+</template>
+```
diff --git a/components/time-picker/demo/size.md b/components/time-picker/demo/size.md
new file mode 100644
index 000000000..9569b03a4
--- /dev/null
+++ b/components/time-picker/demo/size.md
@@ -0,0 +1,27 @@
+<cn>
+#### 三种大小
+三种大小的输入框，大的用在表单中，中的为默认。
+</cn>
+
+<us>
+#### Three Sizes
+The input box comes in three sizes. large is used in the form, while the medium size is the default.
+</us>
+
+```html
+<template>
+  <div>
+    <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" size="large" />
+    <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" />
+    <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" size="small" />
+  </div>
+</template>
+<script>
+import moment from 'moment';
+export default {
+  methods: {
+    moment,
+  },
+}
+</script>
+```
diff --git a/components/time-picker/demo/value.md b/components/time-picker/demo/value.md
new file mode 100644
index 000000000..f6578cb62
--- /dev/null
+++ b/components/time-picker/demo/value.md
@@ -0,0 +1,43 @@
+<cn>
+#### 受控组件
+value 和 onChange 需要配合使用。也可以直接使用v-model。
+</cn>
+
+<us>
+#### Under Control
+`value` and `@change` should be used together or use v-model.
+</us>
+
+```html
+<template>
+  <div>
+    <p>use value and @change</p>
+    <a-time-picker @change="onChange" :value="value" />
+    <br/>
+    <br/>
+    <p>v-model</p>
+    <a-time-picker v-model="value" />
+    <br/>
+    <br/>
+    <p>Do not change</p>
+    <a-time-picker :value="value2" />
+  </div>
+</template>
+<script>
+import moment from 'moment';
+export default {
+  data(){
+    return {
+      value: null,
+      value2: moment(),
+    }
+  },
+  methods: {
+    onChange(time,){
+      console.log(time);
+      this.value = time;
+    }
+  },
+}
+</script>
+```
diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md
new file mode 100644
index 000000000..436066709
--- /dev/null
+++ b/components/time-picker/index.en-US.md
@@ -0,0 +1,39 @@
+## API
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| addon | some addon to timepicker panel bottom | slot | - |
+| allowEmpty | allow clearing text | boolean | true |
+| autoFocus | get focus when component mounted | boolean | false |
+| clearText | clear tooltip of icon | string | clear |
+| defaultOpenValue | default open panel value, used to set utcOffset,locale if value/defaultValue absent | [moment](http://momentjs.com/) | moment() |
+| defaultValue | to set default time | [moment](http://momentjs.com/) | - |
+| disabled | determine whether the TimePicker is disabled | boolean | false |
+| disabledHours | to specify the hours that cannot be selected | function() | - |
+| disabledMinutes | to specify the minutes that cannot be selected | function(selectedHour) | - |
+| disabledSeconds | to specify the seconds that cannot be selected | function(selectedHour, selectedMinute) | - |
+| format | to set the time format | string | "HH:mm:ss" |
+| getPopupContainer | to set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - |
+| hideDisabledOptions | hide the options that can not be selected | boolean | false |
+| hourStep | interval between hours in picker | number | 1 |
+| minuteStep | interval between minutes in picker | number | 1 |
+| open(.sync) | whether to popup panel | boolean | false |
+| placeholder | display when there's no value | string | "Select a time" |
+| popupClassName | className of panel | string | '' |
+| secondStep | interval between seconds in picker | number | 1 |
+| use12Hours | display as 12 hours format, with default format `h:mm:ss a` | boolean | false |
+| value(v-model) | to set time | [moment](http://momentjs.com/) | - |
+
+### events
+| Events Name | Description | Arguments |
+| --- | --- | --- |
+| change | a callback function, can be executed when the selected time is changing | function(time: moment, timeString: string): void |
+| openChange | a callback function which will be called while panel opening/closing | (open: boolean): void |
+
+## Methods
+
+| Name | Description |
+| ---- | ----------- |
+| blur() | remove focus |
+| focus() | get focus |
+
diff --git a/components/time-picker/index.vue b/components/time-picker/index.vue
new file mode 100644
index 000000000..acdf41474
--- /dev/null
+++ b/components/time-picker/index.vue
@@ -0,0 +1,166 @@
+<script>
+import * as moment from 'moment'
+import VcTimePicker from '../vc-time-picker'
+import LocaleReceiver from '../locale-provider/LocaleReceiver'
+import defaultLocale from './locale/en_US'
+import BaseMixin from '../_util/BaseMixin'
+import PropTypes from '../_util/vue-types'
+import { initDefaultProps, hasProp, getOptionProps, getComponentFromProp } from '../_util/props-util'
+
+export function generateShowHourMinuteSecond (format) {
+  // Ref: http://momentjs.com/docs/#/parsing/string-format/
+  return {
+    showHour: (
+      format.indexOf('H') > -1 ||
+        format.indexOf('h') > -1 ||
+        format.indexOf('k') > -1
+    ),
+    showMinute: format.indexOf('m') > -1,
+    showSecond: format.indexOf('s') > -1,
+  }
+}
+
+export const TimePickerProps = {
+  size: PropTypes.oneOf(['large', 'default', 'small']),
+  value: PropTypes.object,
+  defaultValue: PropTypes.object,
+  open: PropTypes.bool,
+  format: PropTypes.string,
+  disabled: PropTypes.bool,
+  placeholder: PropTypes.string,
+  prefixCls: PropTypes.string,
+  hideDisabledOptions: PropTypes.bool,
+  disabledHours: PropTypes.func,
+  disabledMinutes: PropTypes.func,
+  disabledSeconds: PropTypes.func,
+  getPopupContainer: PropTypes.func,
+  use12Hours: PropTypes.bool,
+  focusOnOpen: PropTypes.bool,
+  hourStep: PropTypes.number,
+  minuteStep: PropTypes.number,
+  secondStep: PropTypes.number,
+  allowEmpty: PropTypes.bool,
+  clearText: PropTypes.string,
+  defaultOpenValue: PropTypes.object,
+  popupClassName: PropTypes.string,
+  align: PropTypes.object,
+  placement: PropTypes.any,
+  transitionName: PropTypes.string,
+}
+
+export default {
+  mixins: [BaseMixin],
+  props: initDefaultProps(TimePickerProps, {
+    prefixCls: 'ant-time-picker',
+    align: {
+      offset: [0, -2],
+    },
+    disabled: false,
+    disabledHours: undefined,
+    disabledMinutes: undefined,
+    disabledSeconds: undefined,
+    hideDisabledOptions: false,
+    placement: 'bottomLeft',
+    transitionName: 'slide-up',
+    focusOnOpen: true,
+  }),
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  data () {
+    const value = this.value || this.defaultValue
+    if (value && !moment.isMoment(value)) {
+      throw new Error(
+        'The value/defaultValue of TimePicker must be a moment object, ',
+      )
+    }
+    return {
+      sValue: value,
+    }
+  },
+  watch: {
+    value (val) {
+      this.setState({ sValue: val })
+    },
+  },
+  methods: {
+    handleChange (value) {
+      if (!hasProp(this, 'value')) {
+        this.setState({ sValue: value })
+      }
+      const { format = 'HH:mm:ss' } = this
+      this.$emit('change', value, (value && value.format(format)) || '')
+    },
+
+    handleOpenClose ({ open }) {
+      this.$emit('openChange', open)
+      this.$emit('update:open', open)
+    },
+
+    focus () {
+      this.$refs.timePicker.focus()
+    },
+
+    blur () {
+      this.$refs.timePicker.blur()
+    },
+
+    getDefaultFormat () {
+      const { format, use12Hours } = this
+      if (format) {
+        return format
+      } else if (use12Hours) {
+        return 'h:mm:ss a'
+      }
+      return 'HH:mm:ss'
+    },
+
+    renderTimePicker (locale) {
+      const props = getOptionProps(this)
+      delete props.defaultValue
+
+      const format = this.getDefaultFormat()
+      const className = {
+        [`${props.prefixCls}-${props.size}`]: !!props.size,
+      }
+      const tempAddon = getComponentFromProp(this, 'addon')
+      const timeProps = {
+        props: {
+          ...generateShowHourMinuteSecond(format),
+          ...props,
+          format,
+          value: this.sValue,
+          placeholder: props.placeholder === undefined ? locale.placeholder : props.placeholder,
+        },
+        class: className,
+        ref: 'timePicker',
+        on: {
+          change: this.handleChange,
+          open: this.handleOpenClose,
+          close: this.handleOpenClose,
+        },
+      }
+      return (
+        <VcTimePicker {...timeProps}>
+          {tempAddon ? <template slot='addon'>
+            <div class={`${props.prefixCls}-panel-addon`}>
+              {tempAddon}
+            </div>
+          </template> : null}
+        </VcTimePicker>
+      )
+    },
+  },
+
+  render () {
+    return (
+      <LocaleReceiver
+        componentName='TimePicker'
+        defaultLocale={defaultLocale}
+        children={this.renderTimePicker}
+      />
+    )
+  },
+}
+</script>
\ No newline at end of file
diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md
new file mode 100644
index 000000000..d25057dc4
--- /dev/null
+++ b/components/time-picker/index.zh-CN.md
@@ -0,0 +1,39 @@
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| addon | 选择框底部显示自定义的内容 | slot | 无 |
+| allowEmpty | 是否展示清除按钮 | boolean | true |
+| autoFocus | 自动获取焦点 | boolean | false |
+| clearText | 清除按钮的提示文案 | string | clear |
+| defaultOpenValue | 当 defaultValue/value 不存在时，可以设置面板打开时默认选中的值 | [moment](http://momentjs.com/) | moment() |
+| defaultValue | 默认时间 | [moment](http://momentjs.com/) | 无 |
+| disabled | 禁用全部操作 | boolean | false |
+| disabledHours | 禁止选择部分小时选项 | function() | 无 |
+| disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | 无 |
+| disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | 无 |
+| format | 展示的时间格式 | string | "HH:mm:ss" |
+| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
+| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |
+| hourStep | 小时选项间隔 | number | 1 |
+| minuteStep | 分钟选项间隔 | number | 1 |
+| open(.sync) | 面板是否打开 | boolean | false |
+| placeholder | 没有值的时候显示的内容 | string | "请选择时间" |
+| popupClassName | 弹出层类名 | string | '' |
+| secondStep | 秒选项间隔 | number | 1 |
+| use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false |
+| value(v-model) | 当前时间 | [moment](http://momentjs.com/) | 无 |
+
+### 事件
+| 事件名称 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 时间发生变化的回调 | function(time: moment, timeString: string): void |
+| openChange | 面板打开/关闭时的回调 | (open: boolean): void |
+
+## 方法
+
+| 名称 | 描述 |
+| --- | --- |
+| blur() | 移除焦点 |
+| focus() | 获取焦点 |
diff --git a/components/time-picker/locale/ar_EG.js b/components/time-picker/locale/ar_EG.js
new file mode 100644
index 000000000..cf6d7575b
--- /dev/null
+++ b/components/time-picker/locale/ar_EG.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'اختيار الوقت',
+}
+
+export default locale
diff --git a/components/time-picker/locale/bg_BG.js b/components/time-picker/locale/bg_BG.js
new file mode 100644
index 000000000..cf69fa433
--- /dev/null
+++ b/components/time-picker/locale/bg_BG.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Избор на час',
+}
+
+export default locale
diff --git a/components/time-picker/locale/ca_ES.js b/components/time-picker/locale/ca_ES.js
new file mode 100644
index 000000000..3333a9ab7
--- /dev/null
+++ b/components/time-picker/locale/ca_ES.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Seleccionar hora',
+}
+
+export default locale
diff --git a/components/time-picker/locale/cs_CZ.js b/components/time-picker/locale/cs_CZ.js
new file mode 100644
index 000000000..0f9049c33
--- /dev/null
+++ b/components/time-picker/locale/cs_CZ.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Vybrat čas',
+}
+
+export default locale
diff --git a/components/time-picker/locale/de_DE.js b/components/time-picker/locale/de_DE.js
new file mode 100644
index 000000000..c784b34da
--- /dev/null
+++ b/components/time-picker/locale/de_DE.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Zeit auswählen',
+}
+
+export default locale
diff --git a/components/time-picker/locale/el_GR.js b/components/time-picker/locale/el_GR.js
new file mode 100644
index 000000000..31df2e549
--- /dev/null
+++ b/components/time-picker/locale/el_GR.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Επιλέξτε ώρα',
+}
+
+export default locale
diff --git a/components/time-picker/locale/en_GB.js b/components/time-picker/locale/en_GB.js
new file mode 100644
index 000000000..02b92d52a
--- /dev/null
+++ b/components/time-picker/locale/en_GB.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Select time',
+}
+
+export default locale
diff --git a/components/time-picker/locale/en_US.js b/components/time-picker/locale/en_US.js
new file mode 100644
index 000000000..02b92d52a
--- /dev/null
+++ b/components/time-picker/locale/en_US.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Select time',
+}
+
+export default locale
diff --git a/components/time-picker/locale/es_ES.js b/components/time-picker/locale/es_ES.js
new file mode 100644
index 000000000..3333a9ab7
--- /dev/null
+++ b/components/time-picker/locale/es_ES.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Seleccionar hora',
+}
+
+export default locale
diff --git a/components/time-picker/locale/et_EE.js b/components/time-picker/locale/et_EE.js
new file mode 100644
index 000000000..04b9cbc85
--- /dev/null
+++ b/components/time-picker/locale/et_EE.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Vali aeg',
+}
+
+export default locale
diff --git a/components/time-picker/locale/fa_IR.js b/components/time-picker/locale/fa_IR.js
new file mode 100644
index 000000000..82c5a5783
--- /dev/null
+++ b/components/time-picker/locale/fa_IR.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'انتخاب زمان',
+}
+
+export default locale
diff --git a/components/time-picker/locale/fi_FI.js b/components/time-picker/locale/fi_FI.js
new file mode 100644
index 000000000..e296072d0
--- /dev/null
+++ b/components/time-picker/locale/fi_FI.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Valitse aika',
+}
+
+export default locale
diff --git a/components/time-picker/locale/fr_BE.js b/components/time-picker/locale/fr_BE.js
new file mode 100644
index 000000000..76c4c75b0
--- /dev/null
+++ b/components/time-picker/locale/fr_BE.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Sélectionner l\'heure',
+}
+
+export default locale
diff --git a/components/time-picker/locale/fr_FR.js b/components/time-picker/locale/fr_FR.js
new file mode 100644
index 000000000..76c4c75b0
--- /dev/null
+++ b/components/time-picker/locale/fr_FR.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Sélectionner l\'heure',
+}
+
+export default locale
diff --git a/components/time-picker/locale/is_IS.js b/components/time-picker/locale/is_IS.js
new file mode 100644
index 000000000..5542ec5c6
--- /dev/null
+++ b/components/time-picker/locale/is_IS.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Velja tíma',
+}
+
+export default locale
diff --git a/components/time-picker/locale/it_IT.js b/components/time-picker/locale/it_IT.js
new file mode 100644
index 000000000..eecb1aed7
--- /dev/null
+++ b/components/time-picker/locale/it_IT.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Selezionare il tempo',
+}
+
+export default locale
diff --git a/components/time-picker/locale/ja_JP.js b/components/time-picker/locale/ja_JP.js
new file mode 100644
index 000000000..0f00617ea
--- /dev/null
+++ b/components/time-picker/locale/ja_JP.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: '時刻を選択',
+}
+
+export default locale
diff --git a/components/time-picker/locale/ko_KR.js b/components/time-picker/locale/ko_KR.js
new file mode 100644
index 000000000..9354fbd3d
--- /dev/null
+++ b/components/time-picker/locale/ko_KR.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: '날짜 선택',
+}
+
+export default locale
diff --git a/components/time-picker/locale/ku_IQ.js b/components/time-picker/locale/ku_IQ.js
new file mode 100755
index 000000000..fc1d17455
--- /dev/null
+++ b/components/time-picker/locale/ku_IQ.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Demê hilbijêre',
+}
+
+export default locale
diff --git a/components/time-picker/locale/nb_NO.js b/components/time-picker/locale/nb_NO.js
new file mode 100644
index 000000000..8309eb2f3
--- /dev/null
+++ b/components/time-picker/locale/nb_NO.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Velg tid',
+}
+
+export default locale
diff --git a/components/time-picker/locale/nl_BE.js b/components/time-picker/locale/nl_BE.js
new file mode 100644
index 000000000..5a89f5331
--- /dev/null
+++ b/components/time-picker/locale/nl_BE.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Selecteer tijd',
+}
+
+export default locale
diff --git a/components/time-picker/locale/nl_NL.js b/components/time-picker/locale/nl_NL.js
new file mode 100644
index 000000000..5a89f5331
--- /dev/null
+++ b/components/time-picker/locale/nl_NL.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Selecteer tijd',
+}
+
+export default locale
diff --git a/components/time-picker/locale/pl_PL.js b/components/time-picker/locale/pl_PL.js
new file mode 100644
index 000000000..a38a35c95
--- /dev/null
+++ b/components/time-picker/locale/pl_PL.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Wybierz godzinę',
+}
+
+export default locale
diff --git a/components/time-picker/locale/pt_BR.js b/components/time-picker/locale/pt_BR.js
new file mode 100644
index 000000000..d1722b879
--- /dev/null
+++ b/components/time-picker/locale/pt_BR.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Hora',
+}
+
+export default locale
diff --git a/components/time-picker/locale/pt_PT.js b/components/time-picker/locale/pt_PT.js
new file mode 100644
index 000000000..d1722b879
--- /dev/null
+++ b/components/time-picker/locale/pt_PT.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Hora',
+}
+
+export default locale
diff --git a/components/time-picker/locale/ru_RU.js b/components/time-picker/locale/ru_RU.js
new file mode 100644
index 000000000..f4395aea8
--- /dev/null
+++ b/components/time-picker/locale/ru_RU.js
@@ -0,0 +1,8 @@
+/**
+ * Created by Andrey Gayvoronsky on 13/04/16.
+ */
+const locale = {
+  placeholder: 'Выберите время',
+}
+
+export default locale
diff --git a/components/time-picker/locale/sk_SK.js b/components/time-picker/locale/sk_SK.js
new file mode 100644
index 000000000..1a7cb3804
--- /dev/null
+++ b/components/time-picker/locale/sk_SK.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Vybrať čas',
+}
+
+export default locale
diff --git a/components/time-picker/locale/sr_RS.js b/components/time-picker/locale/sr_RS.js
new file mode 100644
index 000000000..202655005
--- /dev/null
+++ b/components/time-picker/locale/sr_RS.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Izaberite vreme',
+}
+
+export default locale
diff --git a/components/time-picker/locale/sv_SE.js b/components/time-picker/locale/sv_SE.js
new file mode 100644
index 000000000..0d892a93a
--- /dev/null
+++ b/components/time-picker/locale/sv_SE.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Välj tid',
+}
+
+export default locale
diff --git a/components/time-picker/locale/th_TH.js b/components/time-picker/locale/th_TH.js
new file mode 100644
index 000000000..6d8628976
--- /dev/null
+++ b/components/time-picker/locale/th_TH.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'เลือกเวลา',
+}
+
+export default locale
diff --git a/components/time-picker/locale/tr_TR.js b/components/time-picker/locale/tr_TR.js
new file mode 100644
index 000000000..3cb3d7e15
--- /dev/null
+++ b/components/time-picker/locale/tr_TR.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Zaman Seç',
+}
+
+export default locale
diff --git a/components/time-picker/locale/uk_UA.js b/components/time-picker/locale/uk_UA.js
new file mode 100644
index 000000000..4f379c553
--- /dev/null
+++ b/components/time-picker/locale/uk_UA.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Оберіть час',
+}
+
+export default locale
diff --git a/components/time-picker/locale/vi_VN.js b/components/time-picker/locale/vi_VN.js
new file mode 100644
index 000000000..225ef167f
--- /dev/null
+++ b/components/time-picker/locale/vi_VN.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Chọn thời gian',
+}
+
+export default locale
diff --git a/components/time-picker/locale/zh_CN.js b/components/time-picker/locale/zh_CN.js
new file mode 100644
index 000000000..1b83292e3
--- /dev/null
+++ b/components/time-picker/locale/zh_CN.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: '请选择时间',
+}
+
+export default locale
diff --git a/components/time-picker/locale/zh_TW.js b/components/time-picker/locale/zh_TW.js
new file mode 100644
index 000000000..0d415a019
--- /dev/null
+++ b/components/time-picker/locale/zh_TW.js
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: '請選擇時間',
+}
+
+export default locale
diff --git a/components/time-picker/style/index.js b/components/time-picker/style/index.js
new file mode 100644
index 000000000..992a50794
--- /dev/null
+++ b/components/time-picker/style/index.js
@@ -0,0 +1,5 @@
+import '../../style/index.less'
+import './index.less'
+
+// style dependencies
+import '../../input/style'
diff --git a/components/time-picker/style/index.less b/components/time-picker/style/index.less
new file mode 100644
index 000000000..0d7f8c591
--- /dev/null
+++ b/components/time-picker/style/index.less
@@ -0,0 +1,234 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+@import "../../input/style/mixin";
+
+@timepicker-prefix-cls: ~"@{ant-prefix}-time-picker";
+@timepicker-item-height: 32px;
+
+.@{timepicker-prefix-cls}-panel {
+  .reset-component;
+  z-index: @zindex-picker;
+  position: absolute;
+
+  &-inner {
+    position: relative;
+    outline: none;
+    list-style: none;
+    font-size: @font-size-base;
+    text-align: left;
+    background-color: @component-background;
+    border-radius: @border-radius-base;
+    box-shadow: @box-shadow-base;
+    background-clip: padding-box;
+    overflow: hidden;
+    left: -2px;
+  }
+
+  &-input {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    width: 100%;
+    cursor: auto;
+    outline: 0;
+
+    .placeholder;
+
+    &-wrap {
+      box-sizing: border-box;
+      position: relative;
+      padding: 7px 2px 7px @control-padding-horizontal;
+      border-bottom: @border-width-base @border-style-base @border-color-split;
+    }
+
+    &-invalid {
+      border-color: red;
+    }
+  }
+
+  &-clear-btn {
+    position: absolute;
+    right: 8px;
+    cursor: pointer;
+    overflow: hidden;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    line-height: 20px;
+    top: 7px;
+    margin: 0;
+  }
+
+  &-clear-btn:after {
+    font-size: @font-size-base - 2px;
+    color: @disabled-color;
+    display: inline-block;
+    line-height: 1;
+    width: 20px;
+    transition: color 0.3s ease;
+    .iconfont-font("\e62e");
+  }
+
+  &-clear-btn:hover:after {
+    color: @text-color-secondary;
+  }
+
+  &-narrow &-input-wrap {
+    max-width: @time-picker-panel-column-width * 2;
+  }
+
+  &-select {
+    float: left;
+    font-size: @font-size-base;
+    border-left: @border-width-base @border-style-base @border-color-split;
+    box-sizing: border-box;
+    width: @time-picker-panel-column-width;
+    overflow: hidden;
+    position: relative; // Fix chrome weird render bug
+    max-height: @timepicker-item-height * 6;
+
+    &:hover {
+      overflow-y: auto;
+    }
+
+    &:first-child {
+      border-left: 0;
+      margin-left: 0;
+    }
+
+    &:last-child {
+      border-right: 0;
+    }
+
+    &:only-child {
+      width: 100%;
+    }
+
+    ul {
+      list-style: none;
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0 0 @timepicker-item-height * 5;
+      width: 100%;
+    }
+
+    li {
+      list-style: none;
+      box-sizing: content-box;
+      margin: 0;
+      padding: 0 0 0 @control-padding-horizontal;
+      width: 100%;
+      height: @timepicker-item-height;
+      line-height: @timepicker-item-height;
+      text-align: left;
+      cursor: pointer;
+      user-select: none;
+      transition: background 0.3s;
+    }
+
+    li:hover {
+      background: @item-hover-bg;
+    }
+
+    li&-option-selected {
+      background: @time-picker-selected-bg;
+      font-weight: bold;
+      &:hover {
+        background: @time-picker-selected-bg;
+      }
+    }
+
+    li&-option-disabled {
+      color: @btn-disable-color;
+      &:hover {
+        background: transparent;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  &-combobox {
+    .clearfix;
+  }
+
+  &-addon {
+    padding: 8px;
+    border-top: @border-width-base @border-style-base @border-color-split;
+  }
+
+  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
+  &.slide-up-enter.slide-up-enter-active&-placement-topRight,
+  &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
+  &.slide-up-appear.slide-up-appear-active&-placement-topRight {
+    animation-name: antSlideDownIn;
+  }
+
+  &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
+  &.slide-up-enter.slide-up-enter-active&-placement-bottomRight,
+  &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft,
+  &.slide-up-appear.slide-up-appear-active&-placement-bottomRight {
+    animation-name: antSlideUpIn;
+  }
+
+  &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
+  &.slide-up-leave.slide-up-leave-active&-placement-topRight {
+    animation-name: antSlideDownOut;
+  }
+
+  &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft,
+  &.slide-up-leave.slide-up-leave-active&-placement-bottomRight {
+    animation-name: antSlideUpOut;
+  }
+}
+
+.@{timepicker-prefix-cls} {
+  .reset-component;
+  position: relative;
+  display: inline-block;
+  outline: none;
+  transition: opacity .3s;
+  width: 128px;
+
+  &-input {
+    .input;
+    &[disabled] {
+      .disabled;
+    }
+  }
+
+  &-open {
+    opacity: 0;
+  }
+
+  &-icon {
+    position: absolute;
+    user-select: none;
+    transition: all .3s @ease-in-out;
+    width: 14px;
+    height: 14px;
+    line-height: 14px;
+    right: @control-padding-horizontal - 1px;
+    color: @disabled-color;
+    top: 50%;
+    margin-top: -7px;
+    &:after {
+      content: "\e641";
+      font-family: "anticon";
+      color: @disabled-color;
+      display: block;
+      line-height: 1;
+    }
+  }
+
+  &-large &-input {
+    .input-lg;
+  }
+
+  &-small &-input {
+    .input-sm;
+  }
+
+  &-small &-icon {
+    right: @control-padding-horizontal-sm - 1px;
+  }
+}
diff --git a/components/vc-dialog/DialogWrap.vue b/components/vc-dialog/DialogWrap.vue
index 567b42e55..c917a1230 100644
--- a/components/vc-dialog/DialogWrap.vue
+++ b/components/vc-dialog/DialogWrap.vue
@@ -20,9 +20,10 @@ const DialogWrap = {
     if (this.visible) {
       this.renderComponent({
         afterClose: this.removeContainer,
-        onClose () {
-        },
         visible: false,
+        on: {
+          close () {},
+        },
       })
     } else {
       this.removeContainer()
@@ -31,18 +32,21 @@ const DialogWrap = {
   methods: {
     getComponent (extra = {}) {
       const { $attrs, $listeners, $props, $slots } = this
-
+      const { on, ...otherProps } = extra
       const dialogProps = {
         props: {
           ...$props,
           dialogClass: getClass(this),
           dialogStyle: getStyle(this),
-          ...extra,
+          ...otherProps,
         },
         attrs: $attrs,
         ref: '_component',
         key: 'dialog',
-        on: $listeners,
+        on: {
+          ...$listeners,
+          ...on,
+        },
       }
       return (
         <Dialog {...dialogProps}>{$slots.default}</Dialog>
diff --git a/components/vc-pagination/Pagination.vue b/components/vc-pagination/Pagination.vue
index 6cf4b4fec..e8ea89a8f 100644
--- a/components/vc-pagination/Pagination.vue
+++ b/components/vc-pagination/Pagination.vue
@@ -277,14 +277,16 @@ export default {
           </li>
         )
       }
+      const hasPrev = this.hasPrev()
+      const hasNext = this.hasNext()
       return (
         <ul class={`${prefixCls} ${prefixCls}-simple`}>
           <li
             title={this.showTitle ? locale.prev_page : null}
             onClick={this.prev}
-            tabIndex='0'
+            tabIndex={hasPrev ? 0 : null}
             onKeypress={this.runIfEnterPrev}
-            class={`${this.hasPrev() ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
+            class={`${hasPrev ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
             aria-disabled={!this.hasPrev()}
           >
             {this.itemRender(prevPage, 'prev', <a class={`${prefixCls}-item-link`} />)}
@@ -309,7 +311,7 @@ export default {
             onClick={this.next}
             tabIndex='0'
             onKeypress={this.runIfEnterNext}
-            class={`${this.hasNext() ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
+            class={`${hasNext ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
             aria-disabled={!this.hasNext()}
           >
             {this.itemRender(nextPage, 'next', <a class={`${prefixCls}-item-link`} />)}
@@ -493,7 +495,7 @@ export default {
         <li
           title={this.showTitle ? locale.prev_page : null}
           onClick={this.prev}
-          tabIndex='0'
+          tabIndex={prevDisabled ? null : 0}
           onKeypress={this.runIfEnterPrev}
           class={`${!prevDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
           aria-disabled={prevDisabled}
@@ -504,7 +506,7 @@ export default {
         <li
           title={this.showTitle ? locale.next_page : null}
           onClick={this.next}
-          tabIndex='0'
+          tabIndex={nextDisabled ? null : 0}
           onKeypress={this.runIfEnterNext}
           class={`${!nextDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
           aria-disabled={nextDisabled}
diff --git a/components/vc-select/Select.vue b/components/vc-select/Select.vue
index 681e1e060..91e2b3bf4 100644
--- a/components/vc-select/Select.vue
+++ b/components/vc-select/Select.vue
@@ -377,6 +377,7 @@ export default {
 
     onArrowClick (e) {
       e.stopPropagation()
+      e.preventDefault()
       if (!this.disabled) {
         this.setOpenState(!this.openStatus, !this.openStatus)
       }
diff --git a/components/vc-time-picker/Combobox.vue b/components/vc-time-picker/Combobox.vue
new file mode 100644
index 000000000..f989ead79
--- /dev/null
+++ b/components/vc-time-picker/Combobox.vue
@@ -0,0 +1,194 @@
+<script>
+import PropTypes from '../_util/vue-types'
+import Select from './Select'
+import BaseMixin from '../_util/BaseMixin'
+
+const formatOption = (option, disabledOptions) => {
+  let value = `${option}`
+  if (option < 10) {
+    value = `0${option}`
+  }
+
+  let disabled = false
+  if (disabledOptions && disabledOptions.indexOf(option) >= 0) {
+    disabled = true
+  }
+
+  return {
+    value,
+    disabled,
+  }
+}
+
+const Combobox = {
+  mixins: [BaseMixin],
+  name: 'Combobox',
+  props: {
+    format: PropTypes.string,
+    defaultOpenValue: PropTypes.object,
+    prefixCls: PropTypes.string,
+    value: PropTypes.object,
+    // onChange: PropTypes.func,
+    showHour: PropTypes.bool,
+    showMinute: PropTypes.bool,
+    showSecond: PropTypes.bool,
+    hourOptions: PropTypes.array,
+    minuteOptions: PropTypes.array,
+    secondOptions: PropTypes.array,
+    disabledHours: PropTypes.func,
+    disabledMinutes: PropTypes.func,
+    disabledSeconds: PropTypes.func,
+    // onCurrentSelectPanelChange: PropTypes.func,
+    use12Hours: PropTypes.bool,
+    isAM: PropTypes.bool,
+  },
+  methods: {
+    onItemChange (type, itemValue) {
+      const { defaultOpenValue, use12Hours, isAM } = this
+      const value = (this.value || defaultOpenValue).clone()
+
+      if (type === 'hour') {
+        if (use12Hours) {
+          if (isAM) {
+            value.hour(+itemValue % 12)
+          } else {
+            value.hour((+itemValue % 12) + 12)
+          }
+        } else {
+          value.hour(+itemValue)
+        }
+      } else if (type === 'minute') {
+        value.minute(+itemValue)
+      } else if (type === 'ampm') {
+        const ampm = itemValue.toUpperCase()
+        if (use12Hours) {
+          if (ampm === 'PM' && value.hour() < 12) {
+            value.hour((value.hour() % 12) + 12)
+          }
+
+          if (ampm === 'AM') {
+            if (value.hour() >= 12) {
+              value.hour(value.hour() - 12)
+            }
+          }
+        }
+      } else {
+        value.second(+itemValue)
+      }
+      this.__emit('change', value)
+    },
+
+    onEnterSelectPanel (range) {
+      this.__emit('currentSelectPanelChange', range)
+    },
+
+    getHourSelect (hour) {
+      const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this
+      if (!showHour) {
+        return null
+      }
+      const disabledOptions = disabledHours()
+      let hourOptionsAdj
+      let hourAdj
+      if (use12Hours) {
+        hourOptionsAdj = [12].concat(hourOptions.filter(h => h < 12 && h > 0))
+        hourAdj = (hour % 12) || 12
+      } else {
+        hourOptionsAdj = hourOptions
+        hourAdj = hour
+      }
+
+      return (
+        <Select
+          prefixCls={prefixCls}
+          options={hourOptionsAdj.map(option => formatOption(option, disabledOptions))}
+          selectedIndex={hourOptionsAdj.indexOf(hourAdj)}
+          type='hour'
+          onSelect={this.onItemChange}
+          onMouseenter={this.onEnterSelectPanel.bind(this, 'hour')}
+        />
+      )
+    },
+
+    getMinuteSelect (minute) {
+      const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this
+      if (!showMinute) {
+        return null
+      }
+      const value = this.value || defaultOpenValue
+      const disabledOptions = disabledMinutes(value.hour())
+
+      return (
+        <Select
+          prefixCls={prefixCls}
+          options={minuteOptions.map(option => formatOption(option, disabledOptions))}
+          selectedIndex={minuteOptions.indexOf(minute)}
+          type='minute'
+          onSelect={this.onItemChange}
+          onMouseenter={this.onEnterSelectPanel.bind(this, 'minute')}
+        />
+      )
+    },
+
+    getSecondSelect (second) {
+      const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this
+      if (!showSecond) {
+        return null
+      }
+      const value = this.value || defaultOpenValue
+      const disabledOptions = disabledSeconds(value.hour(), value.minute())
+
+      return (
+        <Select
+          prefixCls={prefixCls}
+          options={secondOptions.map(option => formatOption(option, disabledOptions))}
+          selectedIndex={secondOptions.indexOf(second)}
+          type='second'
+          onSelect={this.onItemChange}
+          onMouseenter={this.onEnterSelectPanel.bind(this, 'second')}
+        />
+      )
+    },
+
+    getAMPMSelect () {
+      const { prefixCls, use12Hours, format, isAM } = this
+      if (!use12Hours) {
+        return null
+      }
+
+      const AMPMOptions = ['am', 'pm'] // If format has A char, then we should uppercase AM/PM
+        .map(c => format.match(/\sA/) ? c.toUpperCase() : c)
+        .map(c => ({ value: c }))
+
+      const selected = isAM ? 0 : 1
+
+      return (
+        <Select
+          prefixCls={prefixCls}
+          options={AMPMOptions}
+          selectedIndex={selected}
+          type='ampm'
+          onSelect={this.onItemChange}
+          onMouseenter={this.onEnterSelectPanel.bind(this, 'ampm')}
+        />
+      )
+    },
+  },
+
+  render () {
+    const { prefixCls, defaultOpenValue } = this
+    const value = this.value || defaultOpenValue
+    return (
+      <div class={`${prefixCls}-combobox`}>
+        {this.getHourSelect(value.hour())}
+        {this.getMinuteSelect(value.minute())}
+        {this.getSecondSelect(value.second())}
+        {this.getAMPMSelect(value.hour())}
+      </div>
+    )
+  },
+}
+
+export default Combobox
+
+</script>
diff --git a/components/vc-time-picker/Header.vue b/components/vc-time-picker/Header.vue
new file mode 100644
index 000000000..39ccd9fe2
--- /dev/null
+++ b/components/vc-time-picker/Header.vue
@@ -0,0 +1,203 @@
+<script>
+import PropTypes from '../_util/vue-types'
+import BaseMixin from '../_util/BaseMixin'
+import moment from 'moment'
+
+const Header = {
+  mixins: [BaseMixin],
+  props: {
+    format: PropTypes.string,
+    prefixCls: PropTypes.string,
+    disabledDate: PropTypes.func,
+    placeholder: PropTypes.string,
+    clearText: PropTypes.string,
+    value: PropTypes.object,
+    inputReadOnly: PropTypes.bool.def(false),
+    hourOptions: PropTypes.array,
+    minuteOptions: PropTypes.array,
+    secondOptions: PropTypes.array,
+    disabledHours: PropTypes.func,
+    disabledMinutes: PropTypes.func,
+    disabledSeconds: PropTypes.func,
+    // onChange: PropTypes.func,
+    // onClear: PropTypes.func,
+    // onEsc: PropTypes.func,
+    allowEmpty: PropTypes.bool,
+    defaultOpenValue: PropTypes.object,
+    currentSelectPanel: PropTypes.string,
+    focusOnOpen: PropTypes.bool,
+    // onKeyDown: PropTypes.func,
+    showStr: PropTypes.bool.def(true),
+  },
+  data () {
+    const { value, format } = this
+    return {
+      str: value && value.format(format) || '',
+      invalid: false,
+    }
+  },
+
+  mounted () {
+    if (this.focusOnOpen) {
+      // Wait one frame for the panel to be positioned before focusing
+      const requestAnimationFrame = (window.requestAnimationFrame || window.setTimeout)
+      requestAnimationFrame(() => {
+        this.$refs.input.focus()
+        this.$refs.input.select()
+      })
+    }
+  },
+  watch: {
+    '$props': {
+      handler: function (nextProps) {
+        const { value, format } = nextProps
+        this.setState({
+          str: value && value.format(format) || '',
+          invalid: false,
+        })
+      },
+      deep: true,
+    },
+  },
+
+  methods: {
+    onInputChange (event) {
+      const str = event.target.value
+      this.showStr = true
+      this.setState({
+        str,
+      })
+      const {
+        format, hourOptions, minuteOptions, secondOptions,
+        disabledHours, disabledMinutes,
+        disabledSeconds, allowEmpty,
+        value: originalValue,
+      } = this
+
+      if (str) {
+        const value = this.getProtoValue().clone()
+        const parsed = moment(str, format, true)
+        if (!parsed.isValid()) {
+          this.setState({
+            invalid: true,
+          })
+          return
+        }
+        value.hour(parsed.hour()).minute(parsed.minute()).second(parsed.second())
+
+        // if time value not allowed, response warning.
+        if (
+          hourOptions.indexOf(value.hour()) < 0 ||
+        minuteOptions.indexOf(value.minute()) < 0 ||
+        secondOptions.indexOf(value.second()) < 0
+        ) {
+          this.setState({
+            invalid: true,
+          })
+          return
+        }
+
+        // if time value is disabled, response warning.
+        const disabledHourOptions = disabledHours()
+        const disabledMinuteOptions = disabledMinutes(value.hour())
+        const disabledSecondOptions = disabledSeconds(value.hour(), value.minute())
+        if (
+          (disabledHourOptions && disabledHourOptions.indexOf(value.hour()) >= 0) ||
+        (disabledMinuteOptions && disabledMinuteOptions.indexOf(value.minute()) >= 0) ||
+        (disabledSecondOptions && disabledSecondOptions.indexOf(value.second()) >= 0)
+        ) {
+          this.setState({
+            invalid: true,
+          })
+          return
+        }
+
+        if (originalValue) {
+          if (
+            originalValue.hour() !== value.hour() ||
+          originalValue.minute() !== value.minute() ||
+          originalValue.second() !== value.second()
+          ) {
+          // keep other fields for rc-calendar
+            const changedValue = originalValue.clone()
+            changedValue.hour(value.hour())
+            changedValue.minute(value.minute())
+            changedValue.second(value.second())
+            this.__emit('change', changedValue)
+          }
+        } else if (originalValue !== value) {
+          this.__emit('change', value)
+        }
+      } else if (allowEmpty) {
+        this.__emit('change', null)
+      } else {
+        this.setState({
+          invalid: true,
+        })
+        return
+      }
+
+      this.setState({
+        invalid: false,
+      })
+    },
+
+    onKeyDown (e) {
+      if (e.keyCode === 27) {
+        this.__emit('esc')
+      }
+      this.__emit('keydown', e)
+    },
+
+    onClear () {
+      this.__emit('clear')
+      this.setState({ str: '' })
+    },
+
+    getClearButton () {
+      const { prefixCls, allowEmpty, clearText } = this
+      if (!allowEmpty) {
+        return null
+      }
+      return (<a
+        class={`${prefixCls}-clear-btn`}
+        role='button'
+        title={clearText}
+        onMousedown={this.onClear}
+      />)
+    },
+
+    getProtoValue () {
+      return this.value || this.defaultOpenValue
+    },
+
+    getInput () {
+      const { prefixCls, placeholder, inputReadOnly, invalid, str, showStr } = this
+      const invalidClass = invalid ? `${prefixCls}-input-invalid` : ''
+      return (
+        <input
+          class={`${prefixCls}-input  ${invalidClass}`}
+          ref='input'
+          onKeydown={this.onKeyDown}
+          value={showStr ? str : ''}
+          placeholder={placeholder}
+          onInput={this.onInputChange}
+          readOnly={!!inputReadOnly}
+        />
+      )
+    },
+  },
+
+  render () {
+    const { prefixCls } = this
+    return (
+      <div class={`${prefixCls}-input-wrap`}>
+        {this.getInput()}
+        {this.getClearButton()}
+      </div>
+    )
+  },
+}
+
+export default Header
+</script>
diff --git a/components/vc-time-picker/Panel.vue b/components/vc-time-picker/Panel.vue
new file mode 100644
index 000000000..27bd549cb
--- /dev/null
+++ b/components/vc-time-picker/Panel.vue
@@ -0,0 +1,185 @@
+<script>
+import PropTypes from '../_util/vue-types'
+import BaseMixin from '../_util/BaseMixin'
+import Header from './Header'
+import Combobox from './Combobox'
+import moment from 'moment'
+
+function noop () {
+}
+
+function generateOptions (length, disabledOptions, hideDisabledOptions, step = 1) {
+  const arr = []
+  for (let value = 0; value < length; value += step) {
+    if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) {
+      arr.push(value)
+    }
+  }
+  return arr
+}
+const Panel = {
+  mixins: [BaseMixin],
+  props: {
+    clearText: PropTypes.string,
+    prefixCls: PropTypes.string.def('rc-time-picker-panel'),
+    defaultOpenValue: {
+      type: Object,
+      default: () => {
+        return moment()
+      },
+    },
+    value: PropTypes.object,
+    placeholder: PropTypes.string,
+    format: PropTypes.string,
+    inputReadOnly: PropTypes.bool.def(false),
+    disabledHours: PropTypes.func.def(noop),
+    disabledMinutes: PropTypes.func.def(noop),
+    disabledSeconds: PropTypes.func.def(noop),
+    hideDisabledOptions: PropTypes.bool,
+    // onChange: PropTypes.func,
+    // onEsc: PropTypes.func,
+    allowEmpty: PropTypes.bool,
+    showHour: PropTypes.bool,
+    showMinute: PropTypes.bool,
+    showSecond: PropTypes.bool,
+    // onClear: PropTypes.func,
+    use12Hours: PropTypes.bool.def(false),
+    hourStep: PropTypes.number,
+    minuteStep: PropTypes.number,
+    secondStep: PropTypes.number,
+    focusOnOpen: PropTypes.bool,
+    // onKeydown: PropTypes.func,
+  },
+  data () {
+    return {
+      sValue: this.value,
+      selectionRange: [],
+      currentSelectPanel: '',
+      showStr: true,
+    }
+  },
+  watch: {
+    value (val) {
+      if (val) {
+        this.setState({
+          sValue: val,
+          showStr: true,
+        })
+      } else {
+        this.setState({
+          showStr: false,
+        })
+      }
+    },
+  },
+
+  methods: {
+    onChange (newValue) {
+      this.setState({ sValue: newValue })
+      this.__emit('change', newValue)
+    },
+
+    onCurrentSelectPanelChange (currentSelectPanel) {
+      this.setState({ currentSelectPanel })
+    },
+
+    // https://github.com/ant-design/ant-design/issues/5829
+    close () {
+      this.__emit('esc')
+    },
+
+    disabledHours2 () {
+      const { use12Hours, disabledHours } = this
+      let disabledOptions = disabledHours()
+      if (use12Hours && Array.isArray(disabledOptions)) {
+        if (this.isAM()) {
+          disabledOptions = disabledOptions.filter(h => h < 12).map(h => (h === 0 ? 12 : h))
+        } else {
+          disabledOptions = disabledOptions.map(h => (h === 12 ? 12 : h - 12))
+        }
+      }
+      return disabledOptions
+    },
+
+    isAM () {
+      const value = this.sValue || this.defaultOpenValue
+      return value.hour() >= 0 && value.hour() < 12
+    },
+  },
+
+  render () {
+    const {
+      prefixCls, placeholder, disabledMinutes,
+      disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond,
+      format, defaultOpenValue, clearText, use12Hours,
+      focusOnOpen, hourStep, minuteStep, secondStep, inputReadOnly,
+      sValue, currentSelectPanel, showStr, $listeners = {},
+    } = this
+    const { esc = noop, clear = noop, keydown = noop } = $listeners
+
+    const disabledHourOptions = this.disabledHours2()
+    const disabledMinuteOptions = disabledMinutes(sValue ? sValue.hour() : null)
+    const disabledSecondOptions = disabledSeconds(sValue ? sValue.hour() : null,
+      sValue ? sValue.minute() : null)
+    const hourOptions = generateOptions(
+      24, disabledHourOptions, hideDisabledOptions, hourStep
+    )
+    const minuteOptions = generateOptions(
+      60, disabledMinuteOptions, hideDisabledOptions, minuteStep
+    )
+    const secondOptions = generateOptions(
+      60, disabledSecondOptions, hideDisabledOptions, secondStep
+    )
+
+    return (
+      <div class={`${prefixCls}-inner`}>
+        <Header
+          clearText={clearText}
+          prefixCls={prefixCls}
+          defaultOpenValue={defaultOpenValue}
+          value={sValue}
+          currentSelectPanel={currentSelectPanel}
+          onEsc={esc}
+          format={format}
+          placeholder={placeholder}
+          hourOptions={hourOptions}
+          minuteOptions={minuteOptions}
+          secondOptions={secondOptions}
+          disabledHours={this.disabledHours2}
+          disabledMinutes={disabledMinutes}
+          disabledSeconds={disabledSeconds}
+          onChange={this.onChange}
+          onClear={clear}
+          allowEmpty={allowEmpty}
+          focusOnOpen={focusOnOpen}
+          onKeydown={keydown}
+          inputReadOnly={inputReadOnly}
+          showStr={showStr}
+        />
+        <Combobox
+          prefixCls={prefixCls}
+          value={sValue}
+          defaultOpenValue={defaultOpenValue}
+          format={format}
+          onChange={this.onChange}
+          showHour={showHour}
+          showMinute={showMinute}
+          showSecond={showSecond}
+          hourOptions={hourOptions}
+          minuteOptions={minuteOptions}
+          secondOptions={secondOptions}
+          disabledHours={this.disabledHours2}
+          disabledMinutes={disabledMinutes}
+          disabledSeconds={disabledSeconds}
+          onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
+          use12Hours={use12Hours}
+          isAM={this.isAM()}
+        />
+        {this.$slots.default}
+      </div>
+    )
+  },
+}
+
+export default Panel
+</script>
diff --git a/components/vc-time-picker/Select.vue b/components/vc-time-picker/Select.vue
new file mode 100644
index 000000000..5d6b4d743
--- /dev/null
+++ b/components/vc-time-picker/Select.vue
@@ -0,0 +1,134 @@
+<script>
+import PropTypes from '../_util/vue-types'
+import BaseMixin from '../_util/BaseMixin'
+import classnames from 'classnames'
+function noop () {}
+const scrollTo = (element, to, duration) => {
+  const requestAnimationFrame = window.requestAnimationFrame ||
+    function requestAnimationFrameTimeout () {
+      return setTimeout(arguments[0], 10)
+    }
+  // jump to target if duration zero
+  if (duration <= 0) {
+    element.scrollTop = to
+    return
+  }
+  const difference = to - element.scrollTop
+  const perTick = difference / duration * 10
+
+  requestAnimationFrame(() => {
+    element.scrollTop = element.scrollTop + perTick
+    if (element.scrollTop === to) return
+    scrollTo(element, to, duration - 10)
+  })
+}
+
+const Select = {
+  mixins: [BaseMixin],
+  props: {
+    prefixCls: PropTypes.string,
+    options: PropTypes.array,
+    selectedIndex: PropTypes.number,
+    type: PropTypes.string,
+    // onSelect: PropTypes.func,
+    // onMouseEnter: PropTypes.func,
+  },
+  data () {
+    return {
+      active: false,
+    }
+  },
+
+  mounted () {
+    this.$nextTick(() => {
+      // jump to selected option
+      this.scrollToSelected(0)
+    })
+  },
+  watch: {
+    selectedIndex (val) {
+      this.$nextTick(() => {
+        // smooth scroll to selected option
+        this.scrollToSelected(120)
+      })
+    },
+  },
+  methods: {
+    onSelect (value) {
+      const { type } = this
+      this.__emit('select', type, value)
+    },
+
+    getOptions () {
+      const { options, selectedIndex, prefixCls } = this
+      return options.map((item, index) => {
+        const cls = classnames({
+          [`${prefixCls}-select-option-selected`]: selectedIndex === index,
+          [`${prefixCls}-select-option-disabled`]: item.disabled,
+        })
+        let onClick = noop
+        if (!item.disabled) {
+          onClick = this.onSelect.bind(this, item.value)
+        }
+        return (<li
+          class={cls}
+          key={index}
+          onClick={onClick}
+          disabled={item.disabled}
+        >
+          {item.value}
+        </li>)
+      })
+    },
+
+    scrollToSelected (duration) {
+    // move to selected item
+      const select = this.$el
+      const list = this.$refs.list
+      if (!list) {
+        return
+      }
+      let index = this.selectedIndex
+      if (index < 0) {
+        index = 0
+      }
+      const topOption = list.children[index]
+      const to = topOption.offsetTop
+      scrollTo(select, to, duration)
+    },
+
+    handleMouseEnter (e) {
+      this.setState({ active: true })
+      this.__emit('mouseenter', e)
+    },
+
+    handleMouseLeave () {
+      this.setState({ active: false })
+    },
+  },
+
+  render () {
+    if (this.options.length === 0) {
+      return null
+    }
+
+    const { prefixCls } = this
+    const cls = {
+      [`${prefixCls}-select`]: 1,
+      [`${prefixCls}-select-active`]: this.active,
+    }
+
+    return (
+      <div
+        class={cls}
+        onMouseenter={this.handleMouseEnter}
+        onMouseleave={this.handleMouseLeave}
+      >
+        <ul ref='list'>{this.getOptions()}</ul>
+      </div>
+    )
+  },
+}
+
+export default Select
+</script>
diff --git a/components/vc-time-picker/TimePicker.vue b/components/vc-time-picker/TimePicker.vue
new file mode 100644
index 000000000..a6ce9222e
--- /dev/null
+++ b/components/vc-time-picker/TimePicker.vue
@@ -0,0 +1,300 @@
+<script>
+import PropTypes from '../_util/vue-types'
+import BaseMixin from '../_util/BaseMixin'
+import Trigger from '../trigger'
+import Panel from './Panel'
+import placements from './placements'
+import moment from 'moment'
+import { initDefaultProps, hasProp } from '../_util/props-util'
+
+function noop () {
+}
+
+export default {
+  mixins: [BaseMixin],
+  props: initDefaultProps({
+    prefixCls: PropTypes.string,
+    clearText: PropTypes.string,
+    value: PropTypes.any,
+    defaultOpenValue: {
+      type: Object,
+      default: () => {
+        return moment()
+      },
+    },
+    inputReadOnly: PropTypes.bool,
+    disabled: PropTypes.bool,
+    allowEmpty: PropTypes.bool,
+    defaultValue: PropTypes.any,
+    open: PropTypes.bool,
+    defaultOpen: PropTypes.bool,
+    align: PropTypes.object,
+    placement: PropTypes.any,
+    transitionName: PropTypes.string,
+    getPopupContainer: PropTypes.func,
+    placeholder: PropTypes.string,
+    format: PropTypes.string,
+    showHour: PropTypes.bool,
+    showMinute: PropTypes.bool,
+    showSecond: PropTypes.bool,
+    popupClassName: PropTypes.string,
+    disabledHours: PropTypes.func,
+    disabledMinutes: PropTypes.func,
+    disabledSeconds: PropTypes.func,
+    hideDisabledOptions: PropTypes.bool,
+    // onChange: PropTypes.func,
+    // onOpen: PropTypes.func,
+    // onClose: PropTypes.func,
+    // onFocus: PropTypes.func,
+    // onBlur: PropTypes.func,
+    name: PropTypes.string,
+    autoComplete: PropTypes.string,
+    use12Hours: PropTypes.bool,
+    hourStep: PropTypes.number,
+    minuteStep: PropTypes.number,
+    secondStep: PropTypes.number,
+    focusOnOpen: PropTypes.bool,
+    // onKeyDown: PropTypes.func,
+    autoFocus: PropTypes.bool,
+  }, {
+    clearText: 'clear',
+    prefixCls: 'rc-time-picker',
+    defaultOpen: false,
+    inputReadOnly: false,
+    popupClassName: '',
+    align: {},
+    allowEmpty: true,
+    showHour: true,
+    showMinute: true,
+    showSecond: true,
+    disabledHours: noop,
+    disabledMinutes: noop,
+    disabledSeconds: noop,
+    hideDisabledOptions: false,
+    placement: 'bottomLeft',
+    use12Hours: false,
+    focusOnOpen: false,
+  }),
+  data () {
+    const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this
+    return {
+      sOpen: open,
+      sValue: value,
+    }
+  },
+
+  watch: {
+    value (val) {
+      this.setState({
+        sValue: val,
+      })
+    },
+    open (val) {
+      if (val !== undefined) {
+        this.setState({
+          sOpen: val,
+        })
+      }
+    },
+  },
+  methods: {
+    onPanelChange (value) {
+      this.setValue(value)
+    },
+
+    onPanelClear () {
+      this.setValue(null)
+      this.setOpen(false)
+    },
+
+    onVisibleChange (open) {
+      this.setOpen(open)
+    },
+
+    onEsc () {
+      this.setOpen(false)
+      this.focus()
+    },
+
+    onKeyDown (e) {
+      if (e.keyCode === 40) {
+        this.setOpen(true)
+      }
+    },
+    onKeyDown2 (e) {
+      this.__emit('keydown', e)
+    },
+
+    setValue (value) {
+      if (!hasProp(this, 'value')) {
+        this.setState({
+          sValue: value,
+        })
+      }
+      this.__emit('change', value)
+    },
+
+    getFormat () {
+      const { format, showHour, showMinute, showSecond, use12Hours } = this
+      if (format) {
+        return format
+      }
+
+      if (use12Hours) {
+        const fmtString = ([
+          showHour ? 'h' : '',
+          showMinute ? 'mm' : '',
+          showSecond ? 'ss' : '',
+        ].filter(item => !!item).join(':'))
+
+        return fmtString.concat(' a')
+      }
+
+      return [
+        showHour ? 'HH' : '',
+        showMinute ? 'mm' : '',
+        showSecond ? 'ss' : '',
+      ].filter(item => !!item).join(':')
+    },
+
+    getPanelElement () {
+      const {
+        prefixCls, placeholder, disabledHours,
+        disabledMinutes, disabledSeconds, hideDisabledOptions, inputReadOnly,
+        allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
+        use12Hours, focusOnOpen, onKeyDown2, hourStep, minuteStep, secondStep,
+        sValue,
+      } = this
+      return (
+        <Panel
+          clearText={clearText}
+          prefixCls={`${prefixCls}-panel`}
+          ref='panel'
+          value={sValue}
+          inputReadOnly={inputReadOnly}
+          onChange={this.onPanelChange}
+          onClear={this.onPanelClear}
+          defaultOpenValue={defaultOpenValue}
+          showHour={showHour}
+          showMinute={showMinute}
+          showSecond={showSecond}
+          onEsc={this.onEsc}
+          allowEmpty={allowEmpty}
+          format={this.getFormat()}
+          placeholder={placeholder}
+          disabledHours={disabledHours}
+          disabledMinutes={disabledMinutes}
+          disabledSeconds={disabledSeconds}
+          hideDisabledOptions={hideDisabledOptions}
+          use12Hours={use12Hours}
+          hourStep={hourStep}
+          minuteStep={minuteStep}
+          secondStep={secondStep}
+          focusOnOpen={focusOnOpen}
+          onKeyDown={onKeyDown2}
+        >
+          {this.$slots.addon}
+        </Panel>
+      )
+    },
+
+    getPopupClassName () {
+      const { showHour, showMinute, showSecond, use12Hours, prefixCls } = this
+      let popupClassName = this.popupClassName
+      // Keep it for old compatibility
+      if ((!showHour || !showMinute || !showSecond) && !use12Hours) {
+        popupClassName += ` ${prefixCls}-panel-narrow`
+      }
+      let selectColumnCount = 0
+      if (showHour) {
+        selectColumnCount += 1
+      }
+      if (showMinute) {
+        selectColumnCount += 1
+      }
+      if (showSecond) {
+        selectColumnCount += 1
+      }
+      if (use12Hours) {
+        selectColumnCount += 1
+      }
+      popupClassName += ` ${prefixCls}-panel-column-${selectColumnCount}`
+      return popupClassName
+    },
+
+    setOpen (open) {
+      if (this.sOpen !== open) {
+        if (!hasProp(this, 'open')) {
+          this.setState({ sOpen: open })
+        }
+        if (open) {
+          this.__emit('open', { open })
+        } else {
+          this.__emit('close', { open })
+        }
+      }
+    },
+
+    focus () {
+      this.$refs.picker.focus()
+    },
+
+    blur () {
+      this.$refs.picker.blur()
+    },
+    onFocus (e) {
+      this.__emit('focus', e)
+    },
+    onBlur (e) {
+      this.__emit('blur', e)
+    },
+  },
+
+  render () {
+    const {
+      prefixCls, placeholder, placement, align,
+      disabled, transitionName, getPopupContainer, name, autoComplete,
+      autoFocus, inputReadOnly, sOpen, sValue, onFocus, onBlur,
+    } = this
+    const popupClassName = this.getPopupClassName()
+    return (
+      <Trigger
+        prefixCls={`${prefixCls}-panel`}
+        popupClassName={popupClassName}
+        popupAlign={align}
+        builtinPlacements={placements}
+        popupPlacement={placement}
+        action={disabled ? [] : ['click']}
+        destroyPopupOnHide
+        getPopupContainer={getPopupContainer}
+        popupTransitionName={transitionName}
+        popupVisible={sOpen}
+        onPopupVisibleChange={this.onVisibleChange}
+      >
+        <template slot='popup'>
+          {this.getPanelElement()}
+        </template>
+        <span class={`${prefixCls}`}>
+          <input
+            class={`${prefixCls}-input`}
+            ref='picker'
+            type='text'
+            placeholder={placeholder}
+            name={name}
+            onKeydown={this.onKeyDown}
+            disabled={disabled}
+            value={sValue && sValue.format(this.getFormat()) || ''}
+            autoComplete={autoComplete}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            autoFocus={autoFocus}
+            onChange={noop}
+            readOnly={!!inputReadOnly}
+          />
+          <span class={`${prefixCls}-icon`}/>
+        </span>
+      </Trigger>
+    )
+  },
+}
+</script>
diff --git a/components/vc-time-picker/assets/index.less b/components/vc-time-picker/assets/index.less
new file mode 100644
index 000000000..f4caf0010
--- /dev/null
+++ b/components/vc-time-picker/assets/index.less
@@ -0,0 +1,14 @@
+@prefixClass: rc-time-picker;
+
+.@{prefixClass} {
+  display: inline-block;
+  box-sizing: border-box;
+  * {
+    box-sizing: border-box;
+  }
+}
+
+@import "./index/Picker";
+@import "./index/Panel";
+@import "./index/Header";
+@import "./index/Select";
diff --git a/components/vc-time-picker/assets/index/Header.less b/components/vc-time-picker/assets/index/Header.less
new file mode 100644
index 000000000..7ad3d9fd6
--- /dev/null
+++ b/components/vc-time-picker/assets/index/Header.less
@@ -0,0 +1,49 @@
+.@{prefixClass}-panel {
+  &-input {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    cursor: auto;
+    line-height: 1.5;
+    outline: 0;
+    border: 1px solid transparent;
+
+    &-wrap {
+      box-sizing: border-box;
+      position: relative;
+      padding: 6px;
+      border-bottom: 1px solid #e9e9e9;
+    }
+
+    &-invalid {
+      border-color: red;
+    }
+  }
+
+  &-clear-btn {
+    position: absolute;
+    right: 6px;
+    cursor: pointer;
+    overflow: hidden;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    line-height: 20px;
+    top: 6px;
+    margin: 0;
+  }
+
+  &-clear-btn:after {
+    content: "x";
+    font-size: 12px;
+    color: #aaa;
+    display: inline-block;
+    line-height: 1;
+    width: 20px;
+    transition: color 0.3s ease;
+  }
+
+  &-clear-btn:hover:after {
+    color: #666;
+  }
+}
diff --git a/components/vc-time-picker/assets/index/Panel.less b/components/vc-time-picker/assets/index/Panel.less
new file mode 100644
index 000000000..68e6c8e79
--- /dev/null
+++ b/components/vc-time-picker/assets/index/Panel.less
@@ -0,0 +1,29 @@
+.@{prefixClass}-panel {
+  z-index: 1070;
+  width: 170px;
+  position: absolute;
+  box-sizing: border-box;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  &-inner {
+    display: inline-block;
+    position: relative;
+    outline: none;
+    list-style: none;
+    font-size: 12px;
+    text-align: left;
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0 1px 5px #ccc;
+    background-clip: padding-box;
+    border: 1px solid #ccc;
+    line-height: 1.5;
+  }
+
+  &-narrow {
+    max-width: 113px;
+  }
+}
diff --git a/components/vc-time-picker/assets/index/Picker.less b/components/vc-time-picker/assets/index/Picker.less
new file mode 100644
index 000000000..610c2b0a4
--- /dev/null
+++ b/components/vc-time-picker/assets/index/Picker.less
@@ -0,0 +1,23 @@
+.@{prefixClass} {
+  &-input {
+    width: 100%;
+    position: relative;
+    display: inline-block;
+    padding: 4px 7px;
+    height: 28px;
+    cursor: text;
+    font-size: 12px;
+    line-height: 1.5;
+    color: #666;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    transition: border .2s cubic-bezier(0.645, 0.045, 0.355, 1), background .2s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow .2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    &[disabled] {
+      color: #ccc;
+      background: #f7f7f7;
+      cursor: not-allowed;
+    }
+  }
+}
diff --git a/components/vc-time-picker/assets/index/Select.less b/components/vc-time-picker/assets/index/Select.less
new file mode 100644
index 000000000..86c73c109
--- /dev/null
+++ b/components/vc-time-picker/assets/index/Select.less
@@ -0,0 +1,63 @@
+.@{prefixClass}-panel-select {
+  float: left;
+  font-size: 12px;
+  border: 1px solid #e9e9e9;
+  border-width: 0 1px;
+  margin-left: -1px;
+  box-sizing: border-box;
+  width: 56px;
+  max-height: 144px;
+  overflow-y: auto;
+  position: relative; // Fix chrome weird render bug
+
+  &-active {
+    overflow-y: auto;
+  }
+
+  &:first-child {
+    border-left: 0;
+    margin-left: 0;
+  }
+
+  &:last-child {
+    border-right: 0;
+  }
+
+  ul {
+    list-style: none;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+  }
+
+  li {
+    list-style: none;
+    box-sizing: content-box;
+    margin: 0;
+    padding: 0 0 0 16px;
+    width: 100%;
+    height: 24px;
+    line-height: 24px;
+    text-align: left;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      background: #edfaff;
+    }
+  }
+
+  li&-option-selected {
+    background: #f7f7f7;
+    font-weight: bold;
+  }
+
+  li&-option-disabled {
+    color: #ccc;
+    &:hover {
+      background: transparent;
+      cursor: not-allowed;
+    }
+  }
+}
diff --git a/components/vc-time-picker/demo/all.vue b/components/vc-time-picker/demo/all.vue
new file mode 100644
index 000000000..a405a0bdd
--- /dev/null
+++ b/components/vc-time-picker/demo/all.vue
@@ -0,0 +1,160 @@
+<script>
+import '../assets/index.less'
+
+import moment from 'moment'
+
+import TimePicker from '../index'
+
+const format = 'h:mm a'
+
+const now = moment().hour(0).minute(0)
+
+function onChange (value) {
+  console.log(value && value.format(format))
+}
+
+const showSecond = true
+const str = showSecond ? 'HH:mm:ss' : 'HH:mm'
+
+const now1 = moment().hour(14).minute(30)
+
+function generateOptions (length, excludedOptions) {
+  const arr = []
+  for (let value = 0; value < length; value++) {
+    if (excludedOptions.indexOf(value) < 0) {
+      arr.push(value)
+    }
+  }
+  return arr
+}
+
+function onChange1 (value) {
+  console.log(value && value.format(str))
+}
+
+function disabledHours () {
+  return [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]
+}
+
+function disabledMinutes (h) {
+  switch (h) {
+    case 9:
+      return generateOptions(60, [30])
+    case 21:
+      return generateOptions(60, [0])
+    default:
+      return generateOptions(60, [0, 30])
+  }
+}
+
+function disabledSeconds (h, m) {
+  return [h + m % 60]
+}
+
+export default{
+  data () {
+    return {
+      open: false,
+      value: moment(),
+    }
+  },
+  methods: {
+    setOpen ({ open }) {
+      this.open = open
+    },
+    toggleOpen () {
+      this.open = !this.open
+    },
+    handleValueChange  (value) {
+      console.log(value && value.format('HH:mm:ss'))
+      this.value = value
+    },
+    clear () {
+      this.value = undefined
+    },
+  },
+  render () {
+    return (
+      <div>
+        <TimePicker
+          showSecond={false}
+          defaultValue={now}
+          class='xxx'
+          onChange={onChange}
+          format={format}
+          use12Hours
+          inputReadOnly
+        />
+        <br/>
+        <br/>
+        <div>
+          <h3>Disabled picker</h3>
+          <TimePicker
+            defaultValue={now1}
+            disabled
+            onChange={onChange1}
+          />
+          <h3>Disabled options</h3>
+          <TimePicker
+            showSecond={showSecond}
+            defaultValue={now1}
+            class='xxx'
+            onChange={onChange1}
+            disabledHours={disabledHours}
+            disabledMinutes={disabledMinutes}
+            disabledSeconds={disabledSeconds}
+          />
+        </div>
+        <div>
+          <TimePicker defaultValue={moment()} showHour={false} />
+          <TimePicker defaultValue={moment()} showMinute={false} />
+          <TimePicker defaultValue={moment()} showSecond={false} />
+
+          <TimePicker defaultValue={moment()} showMinute={false} showSecond={false} />
+          <TimePicker defaultValue={moment()} showHour={false} showSecond={false}/>
+          <TimePicker defaultValue={moment()} showHour={false} showMinute={false} />
+        </div>
+        <TimePicker
+          format={str}
+          showSecond={showSecond}
+          // use to control utfOffset, locale, default open value
+          defaultOpenValue={moment()}
+          class='xxx'
+          onChange={onChange1}
+          disabledHours={() => [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]}
+          disabledMinutes={() => [0, 2, 4, 6, 8]}
+          hideDisabledOptions
+        />
+        <div>
+          <button onClick={this.toggleOpen}>Toggle open</button>
+          <TimePicker
+            open={this.open}
+            onOpen={this.setOpen}
+            onClose={this.setOpen}
+            focusOnOpen
+          />
+        </div>
+        <TimePicker
+          style={{ width: '100px' }}
+          showSecond={showSecond}
+          defaultValue={moment()}
+          class='xxx'
+          onChange={onChange}
+        />
+        <TimePicker defaultValue={moment()} showSecond={false} minuteStep={15} />
+        <div>
+          <TimePicker
+            defaultValue={this.value}
+            onChange={this.handleValueChange}
+          />
+          <TimePicker
+            value={this.value}
+            onChange={this.handleValueChange}
+          />
+          <button onClick={this.clear}>clear</button>
+        </div>
+      </div>
+    )
+  },
+}
+</script>
diff --git a/components/vc-time-picker/index.js b/components/vc-time-picker/index.js
new file mode 100644
index 000000000..d9cf5f8c0
--- /dev/null
+++ b/components/vc-time-picker/index.js
@@ -0,0 +1 @@
+export { default } from './TimePicker'
diff --git a/components/vc-time-picker/placements.js b/components/vc-time-picker/placements.js
new file mode 100644
index 000000000..e4bacb622
--- /dev/null
+++ b/components/vc-time-picker/placements.js
@@ -0,0 +1,35 @@
+const autoAdjustOverflow = {
+  adjustX: 1,
+  adjustY: 1,
+}
+
+const targetOffset = [0, 0]
+
+const placements = {
+  bottomLeft: {
+    points: ['tl', 'tl'],
+    overflow: autoAdjustOverflow,
+    offset: [0, -3],
+    targetOffset,
+  },
+  bottomRight: {
+    points: ['tr', 'tr'],
+    overflow: autoAdjustOverflow,
+    offset: [0, -3],
+    targetOffset,
+  },
+  topRight: {
+    points: ['br', 'br'],
+    overflow: autoAdjustOverflow,
+    offset: [0, 3],
+    targetOffset,
+  },
+  topLeft: {
+    points: ['bl', 'bl'],
+    overflow: autoAdjustOverflow,
+    offset: [0, 3],
+    targetOffset,
+  },
+}
+
+export default placements
diff --git a/contributors.md b/contributors.md
index f4b7946a3..bd37f3959 100644
--- a/contributors.md
+++ b/contributors.md
@@ -22,19 +22,18 @@ AutoComplete | done
 Affix | done
 Cascader | done
 BackTop | done
-Modal
-Alert
+Modal | done
+Alert | done
 Calendar
 DatePicker
-TimePicker
+TimePicker | done
 Upload
 Form
 Carousel
 Mention
 
 ##万
-Grid
-Col
+Grid | done slider完成后补全playground demo
 Layout
 Anchor
 Tree
diff --git a/examples/demo.js b/examples/demo.js
index c0e556563..b0f3a7156 100644
--- a/examples/demo.js
+++ b/examples/demo.js
@@ -28,3 +28,6 @@ export { default as autoComplete } from 'antd/auto-complete/demo/index.vue'
 export { default as affix } from 'antd/affix/demo/index.vue'
 export { default as cascader } from 'antd/cascader/demo/index.vue'
 export { default as backTop } from 'antd/back-top/demo/index.vue'
+export { default as modal } from 'antd/modal/demo/index.vue'
+export { default as alert } from 'antd/alert/demo/index.vue'
+export { default as timePicker } from 'antd/time-picker/demo/index.vue'
diff --git a/package-lock.json b/package-lock.json
index ffc3db6a2..5e3eec983 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3265,6 +3265,11 @@
                 "tapable": "0.2.8"
             }
         },
+        "enquire.js": {
+            "version": "2.1.6",
+            "resolved": "http://registry.npm.taobao.org/enquire.js/download/enquire.js-2.1.6.tgz",
+            "integrity": "sha1-PoeAybi4NQhMP2DhZtvDwqPImBQ="
+        },
         "ent": {
             "version": "2.2.0",
             "resolved": "http://r.cnpmjs.org/ent/download/ent-2.2.0.tgz",
@@ -8032,9 +8037,9 @@
             }
         },
         "moment": {
-            "version": "2.20.1",
-            "resolved": "http://registry.npm.taobao.org/moment/download/moment-2.20.1.tgz",
-            "integrity": "sha1-1usaRsvMFKKy+UNBEsH/iQfzE/0="
+            "version": "2.21.0",
+            "resolved": "http://registry.npm.taobao.org/moment/download/moment-2.21.0.tgz",
+            "integrity": "sha1-KhFLUdKm7J5tg8+AP4OKh42KAjo="
         },
         "ms": {
             "version": "2.0.0",
diff --git a/package.json b/package.json
index 979d69bd8..bbfb22c0b 100644
--- a/package.json
+++ b/package.json
@@ -1,111 +1,112 @@
 {
-  "name": "vue-ant-design",
-  "version": "1.0.0",
-  "description": "vue component",
-  "main": "index.js",
-  "scripts": {
-    "start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --open --hot",
-    "test": "karma start test/karma.conf.js --single-run",
-    "build": "sh build.sh",
-    "lint": "eslint -c ./.eslintrc --fix --ext .js ./src/",
-    "lint:style": "stylelint \"./examples/**/*.less\" --fix --syntax less"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/vueComponent/ant-design.git"
-  },
-  "keywords": [
-    "vue"
-  ],
-  "author": "",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/vueComponent/ant-design/issues"
-  },
-  "homepage": "https://github.com/vueComponent/ant-design#readme",
-  "pre-commit": [
-    "lint",
-    "lint:style"
-  ],
-  "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-eslint": "^8.0.1",
-    "babel-helper-vue-jsx-merge-props": "^2.0.2",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-istanbul": "^4.1.1",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-decorators": "^6.24.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-vue-jsx": "^3.5.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.0",
-    "chai": "^4.1.2",
-    "cheerio": "^1.0.0-rc.2",
-    "css-loader": "^0.28.7",
-    "eslint": "^4.7.2",
-    "eslint-plugin-html": "^3.2.2",
-    "eslint-plugin-vue-libs": "^1.2.1",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "fetch-jsonp": "^1.1.3",
-    "highlight.js": "^9.12.0",
-    "html-webpack-plugin": "^2.30.1",
-    "istanbul-instrumenter-loader": "^3.0.0",
-    "jsonp": "^0.2.1",
-    "karma": "^1.4.1",
-    "karma-coverage": "^1.1.1",
-    "karma-coverage-istanbul-reporter": "^1.3.0",
-    "karma-mocha": "^1.3.0",
-    "karma-phantomjs-launcher": "^1.0.2",
-    "karma-phantomjs-shim": "^1.4.0",
-    "karma-sinon-chai": "^1.3.1",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.31",
-    "karma-webpack": "^2.0.2",
-    "less": "^2.7.2",
-    "less-loader": "^4.0.5",
-    "markdown-it": "^8.4.0",
-    "marked": "^0.3.7",
-    "mocha": "^3.2.0",
-    "pre-commit": "^1.2.2",
-    "querystring": "^0.2.0",
-    "selenium-server": "^3.0.1",
-    "semver": "^5.3.0",
-    "sinon": "^4.0.2",
-    "sinon-chai": "^2.8.0",
-    "style-loader": "^0.18.2",
-    "stylelint": "^8.1.1",
-    "stylelint-config-standard": "^17.0.0",
-    "vue-antd-md-loader": "^1.0.2",
-    "vue-loader": "^13.0.5",
-    "vue-router": "^3.0.1",
-    "vue-template-compiler": "^2.5.13",
-    "webpack": "^3.6.0",
-    "webpack-chunk-hash": "^0.5.0",
-    "webpack-dev-server": "^2.8.2",
-    "webpack-merge": "^4.1.1"
-  },
-  "dependencies": {
-    "add-dom-event-listener": "^1.0.2",
-    "array-tree-filter": "^2.1.0",
-    "classnames": "^2.2.5",
-    "component-classes": "^1.2.6",
-    "css-animation": "^1.4.1",
-    "dom-align": "^1.6.7",
-    "dom-scroll-into-view": "^1.2.1",
-    "eslint-plugin-vue": "^3.13.0",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.debounce": "^4.0.8",
-    "lodash.isequal": "^4.5.0",
-    "lodash.isplainobject": "^4.0.6",
-    "moment": "^2.20.1",
-    "omit.js": "^1.0.0",
-    "shallow-equal": "^1.0.0",
-    "shallowequal": "^1.0.2",
-    "vue": "^2.5.13",
-    "vue-clipboard2": "0.0.8",
-    "vue-types": "^1.0.2",
-    "warning": "^3.0.0"
-  }
-}
+    "name": "vue-ant-design",
+    "version": "1.0.0",
+    "description": "vue component",
+    "main": "index.js",
+    "scripts": {
+        "start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --open --hot",
+        "test": "karma start test/karma.conf.js --single-run",
+        "build": "sh build.sh",
+        "lint": "eslint -c ./.eslintrc --fix --ext .js ./components/time-picker/locale",
+        "lint:style": "stylelint \"./examples/**/*.less\" --fix --syntax less"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/vueComponent/ant-design.git"
+    },
+    "keywords": [
+        "vue"
+    ],
+    "author": "",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/vueComponent/ant-design/issues"
+    },
+    "homepage": "https://github.com/vueComponent/ant-design#readme",
+    "pre-commit": [
+        "lint",
+        "lint:style"
+    ],
+    "devDependencies": {
+        "babel-cli": "^6.26.0",
+        "babel-eslint": "^8.0.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.2",
+        "babel-loader": "^7.1.2",
+        "babel-plugin-istanbul": "^4.1.1",
+        "babel-plugin-syntax-dynamic-import": "^6.18.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "babel-plugin-transform-decorators": "^6.24.1",
+        "babel-plugin-transform-decorators-legacy": "^1.3.4",
+        "babel-plugin-transform-object-rest-spread": "^6.26.0",
+        "babel-plugin-transform-vue-jsx": "^3.5.0",
+        "babel-polyfill": "^6.26.0",
+        "babel-preset-env": "^1.6.0",
+        "chai": "^4.1.2",
+        "cheerio": "^1.0.0-rc.2",
+        "css-loader": "^0.28.7",
+        "eslint": "^4.7.2",
+        "eslint-plugin-html": "^3.2.2",
+        "eslint-plugin-vue-libs": "^1.2.1",
+        "extract-text-webpack-plugin": "^3.0.2",
+        "fetch-jsonp": "^1.1.3",
+        "highlight.js": "^9.12.0",
+        "html-webpack-plugin": "^2.30.1",
+        "istanbul-instrumenter-loader": "^3.0.0",
+        "jsonp": "^0.2.1",
+        "karma": "^1.4.1",
+        "karma-coverage": "^1.1.1",
+        "karma-coverage-istanbul-reporter": "^1.3.0",
+        "karma-mocha": "^1.3.0",
+        "karma-phantomjs-launcher": "^1.0.2",
+        "karma-phantomjs-shim": "^1.4.0",
+        "karma-sinon-chai": "^1.3.1",
+        "karma-sourcemap-loader": "^0.3.7",
+        "karma-spec-reporter": "0.0.31",
+        "karma-webpack": "^2.0.2",
+        "less": "^2.7.2",
+        "less-loader": "^4.0.5",
+        "markdown-it": "^8.4.0",
+        "marked": "^0.3.7",
+        "mocha": "^3.2.0",
+        "pre-commit": "^1.2.2",
+        "querystring": "^0.2.0",
+        "selenium-server": "^3.0.1",
+        "semver": "^5.3.0",
+        "sinon": "^4.0.2",
+        "sinon-chai": "^2.8.0",
+        "style-loader": "^0.18.2",
+        "stylelint": "^8.1.1",
+        "stylelint-config-standard": "^17.0.0",
+        "vue-antd-md-loader": "^1.0.2",
+        "vue-loader": "^13.0.5",
+        "vue-router": "^3.0.1",
+        "vue-template-compiler": "^2.5.13",
+        "webpack": "^3.6.0",
+        "webpack-chunk-hash": "^0.5.0",
+        "webpack-dev-server": "^2.8.2",
+        "webpack-merge": "^4.1.1"
+    },
+    "dependencies": {
+        "add-dom-event-listener": "^1.0.2",
+        "array-tree-filter": "^2.1.0",
+        "classnames": "^2.2.5",
+        "component-classes": "^1.2.6",
+        "css-animation": "^1.4.1",
+        "dom-align": "^1.6.7",
+        "dom-scroll-into-view": "^1.2.1",
+        "enquire.js": "^2.1.6",
+        "eslint-plugin-vue": "^3.13.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.debounce": "^4.0.8",
+        "lodash.isequal": "^4.5.0",
+        "lodash.isplainobject": "^4.0.6",
+        "moment": "^2.21.0",
+        "omit.js": "^1.0.0",
+        "shallow-equal": "^1.0.0",
+        "shallowequal": "^1.0.2",
+        "vue": "^2.5.13",
+        "vue-clipboard2": "0.0.8",
+        "vue-types": "^1.0.2",
+        "warning": "^3.0.0"
+    }
+}
\ No newline at end of file