add divider

components/divider/demo/horizontal.md

@@ -0,0 +1,23 @@
+<cn>
+#### 水平分割线
+默认为水平分割线，可在中间加入文字。
+</cn>
+
+<us>
+#### Horizontal
+Divider default type is `horizontal`. Support inner text inside Divider.
+</us>
+
+```html
+<template>
+  <div>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
+    <a-divider />
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
+    <a-divider>With Text</a-divider>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
+    <a-divider dashed />
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
+  </div>
+</template>
+```

components/divider/demo/index.vue

@@ -0,0 +1,34 @@
+<script>
+import Horizontal from './horizontal'
+import Vertical from './vertical'
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+const md = {
+  cn: `# 分割线
+        区隔内容的分割线。
+        ## 何时使用
+        - 对不同章节的文本段落进行分割。
+        - 对行内文字/链接进行分割，例如表格的操作列。
+        ## 代码演示`,
+  us: `# Divider
+      A divider line separates different content.
+      ## When To Use
+      - Divide sections of article.
+      - Divide inline text and links such as the operation column of table.`,
+}
+export default {
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        <Vertical />
+        <Horizontal />
+        <api>
+          <CN slot='cn' />
+          <US/>
+        </api>
+      </div>
+    )
+  },
+}
+</script>

components/divider/demo/vertical.md

@@ -0,0 +1,21 @@
+<cn>
+#### 垂直分割线
+使用 `type="vertical"` 设置为行内的垂直分割线。
+</cn>
+
+<us>
+#### Vertical
+Use `type="vertical"` make it vertical.
+</us>
+
+```html
+<template>
+  <div>
+    Text
+    <a-divider type="vertical" />
+    <a href="#">Link</a>
+    <a-divider type="vertical" />
+    <a href="#">Link</a>
+  </div>
+</template>
+```

components/divider/index.en-US.md

@@ -0,0 +1,8 @@
+## API
+
+### Divider
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| dashed | whether line is dasded | Boolean | false |
+| type | direction type of divider | enum: `horizontal` `vertical` | `horizontal` |

components/divider/index.vue

@@ -0,0 +1,28 @@
+<script>
+import PropTypes from '../_util/vue-types'
+export default {
+  props: {
+    prefixCls: PropTypes.string.def('ant'),
+    type: PropTypes.oneOf(['horizontal', 'vertical']).def('horizontal'),
+    dashed: PropTypes.bool,
+  },
+  computed: {
+    classString () {
+      const { prefixCls, type, $slots, dashed } = this
+      return {
+        [`${prefixCls}-divider`]: true, [`${prefixCls}-divider-${type}`]: true,
+        [`${prefixCls}-divider-with-text`]: $slots.default,
+        [`${prefixCls}-divider-dashed`]: !!dashed,
+      }
+    },
+  },
+  render () {
+    const { classString, prefixCls, $slots } = this
+    return (
+      <div class={classString}>
+        {$slots.default && <span className={`${prefixCls}-divider-inner-text`}>{$slots.default}</span>}
+      </div>
+    )
+  },
+}
+</script>

components/divider/index.zh-CN.md

@@ -0,0 +1,6 @@
+## API
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| dashed | 是否虚线 | Boolean | false |
+| type | 水平还是垂直类型 | enum: `horizontal` `vertical` | `horizontal` |

components/divider/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less'
+import './index.less'

components/divider/style/index.less

@@ -0,0 +1,65 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
+@divider-prefix-cls: ~"@{ant-prefix}-divider";
+
+.@{divider-prefix-cls} {
+  .reset-component;
+  background: @border-color-split;
+
+  &,  // for compatiable
+  &-vertical {
+    margin: 0 8px;
+    display: inline-block;
+    height: 0.9em;
+    width: 1px;
+    vertical-align: middle;
+    position: relative;
+    top: -0.06em;
+  }
+  &-horizontal {
+    display: block;
+    height: 1px;
+    width: 100%;
+    margin: 24px 0;
+  }
+  &-horizontal&-with-text {
+    display: table;
+    white-space: nowrap;
+    text-align: center;
+    background: transparent;
+    font-weight: 500;
+    color: @heading-color;
+    font-size: @font-size-lg;
+    margin: 16px 0;
+
+    &:before,
+    &:after {
+      content: '';
+      display: table-cell;
+      position: relative;
+      top: 50%;
+      width: 50%;
+      border-top: 1px solid @border-color-split;
+      transform: translateY(50%);
+    }
+  }
+
+  &-inner-text {
+    display: inline-block;
+    padding: 0 24px;
+  }
+
+  &-dashed {
+    background: none;
+    border-top: 1px dashed @border-color-split;
+  }
+
+  &-horizontal&-with-text&-dashed {
+    border-top: 0;
+    &:before,
+    &:after {
+      border-style: dashed none none;
+    }
+  }
+}

components/index.js

@@ -53,3 +53,5 @@ export { default as Card } from './card'
 import Dropdown from './dropdown'
 const DropdownButton = Dropdown.Button
 export { Dropdown, DropdownButton }
+
+export { default as Divider } from './divider'

components/style.js

@@ -15,3 +15,4 @@ import './popover/style'
 import './popconfirm/style'
 import './menu/style'
 import './dropdown/style'
+import './divider/style'

contributors.md

@@ -11,6 +11,8 @@ ToolTip | done
 Popconfirm | done
 Popover | done
 Menu | done
+Dropdown | done
+Divider | done
 Carousel
 Mention
 Input | done |select完成后补全demo
@@ -29,7 +31,6 @@ Col
 Affix
 Alert
 BackTop
-Dropdown
 Layout
 message
 Modal

examples/demo.js

@@ -17,4 +17,5 @@ export { default as tabs } from 'antd/tabs/demo/index.vue'
 export { default as tag } from 'antd/tag/demo/index.vue'
 export { default as tooltip } from 'antd/tooltip/demo/index.vue'
 export { default as dropdown } from 'antd/dropdown/demo/index.vue'
+export { default as divider } from 'antd/divider/demo/index.vue'