Divider: add divider component

components.json

@@ -69,5 +69,6 @@
   "main": "./packages/main/index.js",
   "footer": "./packages/footer/index.js",
   "timeline": "./packages/timeline/index.js",
-  "timeline-item": "./packages/timeline-item/index.js"
+  "timeline-item": "./packages/timeline-item/index.js",
+  "divider": "./packages/divider/index.js"
 }

examples/demo-styles/divider.scss

@@ -0,0 +1,8 @@
+.demo-divider-container-1 {
+  display: inline-block;
+  width: 33%;
+}
+.demo-divider-container-2 {
+  display: inline-block;
+  width: 50%;
+}

examples/demo-styles/index.scss

@@ -38,3 +38,4 @@
 @import "./tree.scss";
 @import "./typography.scss";
 @import "./upload.scss";
+@import "./divider.scss";

examples/docs/en-US/divider.md

@@ -0,0 +1,61 @@
+## Divider
+
+The dividing line that separates the content.
+
+### Basic usage
+
+Divide the text of different paragraphs.
+
+:::demo
+```html
+<template>
+  <div>
+    <span>I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.</span>
+    <el-divider></el-divider>
+    <span>There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.</span>
+  </div>
+</template>
+```
+:::
+
+### Custom content
+
+You can customize the content on the divider line.
+
+
+:::demo
+```html
+<template>
+  <div>
+    <span>What you are you do not see, what you see is your shadow. </span>
+    <el-divider position="left">Rabindranath Tagore</el-divider>
+    <span>I cannot choose the best. The best chooses me.</span>
+    <el-divider><i class="el-icon-star-on"></i></el-divider>
+    <span>My wishes are fools, they shout across thy song, my Master. Let me but listen.</span>
+    <el-divider position="right">Rabindranath Tagore</el-divider>
+  </div>
+</template>
+```
+:::
+
+### Vertical divider
+
+:::demo
+```html
+<template>
+  <div>
+    <span>Rain</span>
+    <el-divider vertical></el-divider>
+    <span>Home</span>
+    <el-divider vertical></el-divider>
+    <span>Grass</span>
+  </div>
+</template>
+```
+:::
+
+### Divider Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| vertical      | enable vertical divider  | Boolean  |          —             |    false     |
+| position      | customize the content on the divider line | String  |  left / right / center  |  center |

examples/docs/es/divider.md

@@ -0,0 +1,61 @@
+## Divider
+
+The dividing line that separates the content.
+
+### Basic usage
+
+Divide the text of different paragraphs.
+
+:::demo
+```html
+<template>
+  <div>
+    <span>I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.</span>
+    <el-divider></el-divider>
+    <span>There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.</span>
+  </div>
+</template>
+```
+:::
+
+### Custom content
+
+You can customize the content on the divider line.
+
+
+:::demo
+```html
+<template>
+  <div>
+    <span>What you are you do not see, what you see is your shadow. </span>
+    <el-divider position="left">Rabindranath Tagore</el-divider>
+    <span>I cannot choose the best. The best chooses me.</span>
+    <el-divider><i class="el-icon-star-on"></i></el-divider>
+    <span>My wishes are fools, they shout across thy song, my Master. Let me but listen.</span>
+    <el-divider position="right">Rabindranath Tagore</el-divider>
+  </div>
+</template>
+```
+:::
+
+### Vertical divider
+
+:::demo
+```html
+<template>
+  <div>
+    <span>Rain</span>
+    <el-divider vertical></el-divider>
+    <span>Home</span>
+    <el-divider vertical></el-divider>
+    <span>Grass</span>
+  </div>
+</template>
+```
+:::
+
+### Divider Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| vertical      | enable vertical divider  | Boolean  |          —             |    false     |
+| position      | customize the content on the divider line | String  |  left / right / center  |  center |

examples/docs/fr-FR/divider.md

@@ -0,0 +1,61 @@
+## Divider
+
+The dividing line that separates the content.
+
+### Basic usage
+
+Divide the text of different paragraphs.
+
+:::demo
+```html
+<template>
+  <div>
+    <span>I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.</span>
+    <el-divider></el-divider>
+    <span>There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.</span>
+  </div>
+</template>
+```
+:::
+
+### Custom content
+
+You can customize the content on the divider line.
+
+
+:::demo
+```html
+<template>
+  <div>
+    <span>What you are you do not see, what you see is your shadow. </span>
+    <el-divider position="left">Rabindranath Tagore</el-divider>
+    <span>I cannot choose the best. The best chooses me.</span>
+    <el-divider><i class="el-icon-star-on"></i></el-divider>
+    <span>My wishes are fools, they shout across thy song, my Master. Let me but listen.</span>
+    <el-divider position="right">Rabindranath Tagore</el-divider>
+  </div>
+</template>
+```
+:::
+
+### Vertical divider
+
+:::demo
+```html
+<template>
+  <div>
+    <span>Rain</span>
+    <el-divider vertical></el-divider>
+    <span>Home</span>
+    <el-divider vertical></el-divider>
+    <span>Grass</span>
+  </div>
+</template>
+```
+:::
+
+### Divider Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| vertical      | enable vertical divider  | Boolean  |          —             |    false     |
+| position      | customize the content on the divider line | String  |  left / right / center  |  center |

examples/docs/zh-CN/divider.md

@@ -0,0 +1,61 @@
+## Divider 分割线
+
+区隔内容的分割线。
+
+### 基础用法
+
+对不同章节的文本段落进行分割。
+
+:::demo
+```html
+<template>
+  <div>
+    <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
+    <el-divider></el-divider>
+    <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
+  </div>
+</template>
+```
+:::
+
+### 设置文案
+
+可以在分割线上自定义文案内容。
+
+
+:::demo
+```html
+<template>
+  <div>
+    <span>头上一片晴天，心中一个想念</span>
+    <el-divider position="left">少年包青天</el-divider>
+    <span>饿了别叫妈, 叫饿了么</span>
+    <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
+    <span>为了无法计算的价值</span>
+    <el-divider position="right">阿里云</el-divider>
+  </div>
+</template>
+```
+:::
+
+### 垂直分割
+
+:::demo
+```html
+<template>
+  <div>
+    <span>雨纷纷</span>
+    <el-divider vertical></el-divider>
+    <span>旧故里</span>
+    <el-divider vertical></el-divider>
+    <span>草木深</span>
+  </div>
+</template>
+```
+:::
+
+### Divider Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| vertical      | 是否是用垂直分割  | Boolean  |          —             |    false     |
+| position      | 设置分割线文案的位置 | String  |  left / right / center  |  center |

examples/nav.config.json

@@ -251,6 +251,10 @@
             {
               "path": "/timeline",
               "title": "Timeline 时间线"
+            },
+            {
+              "path": "/divider",
+              "title": "Divider 分割线"
             }
           ]
         }
@@ -509,6 +513,10 @@
             {
               "path": "/timeline",
               "title": "Timeline"
+            },
+            {
+              "path": "/divider",
+              "title": "Divider"
             }
           ]
         }
@@ -767,6 +775,10 @@
             {
               "path": "/timeline",
               "title": "Timeline"
+            },
+            {
+              "path": "/divider",
+              "title": "Divider"
             }
           ]
         }
@@ -1025,6 +1037,10 @@
             {
               "path": "/timeline",
               "title": "Timeline"
+            },
+            {
+              "path": "/divider",
+              "title": "Divider"
             }
           ]
         }

packages/divider/index.js

@@ -0,0 +1,8 @@
+import Divider from './src/main';
+
+/* istanbul ignore next */
+Divider.install = function(Vue) {
+  Vue.component(Divider.name, Divider);
+};
+
+export default Divider;

packages/divider/src/main.js

@@ -0,0 +1,40 @@
+export default {
+  functional: true,
+  name: 'ElDivider',
+  props: {
+    vertical: {
+      type: Boolean,
+      default: false
+    },
+    position: {
+      type: String,
+      default: 'center',
+      validator: val => {
+        return ['left', 'center', 'right'].indexOf(val) > -1;
+      }
+    }
+  },
+  render: function(createElement, context) {
+    let $slots = context.slots();
+    return createElement(
+      'div',
+      {
+        class: [
+          'el-divider',
+          `el-divider--${context.props.vertical ? 'vertical' : 'horizontal'}`
+        ]
+      },
+      $slots.default && !context.props.vertical
+        ? [
+          createElement(
+            'div',
+            {
+              class: ['el-divider__text', context.props.position]
+            },
+            $slots.default
+          )
+        ]
+        : []
+    );
+  }
+};