Divider: add divider component (#15055)

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,9 @@
+.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 content-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 content-position="right">Rabindranath Tagore</el-divider>
+  </div>
+</template>
+```
+:::
+
+### Vertical divider
+
+:::demo
+```html
+<template>
+  <div>
+    <span>Rain</span>
+    <el-divider direction="vertical"></el-divider>
+    <span>Home</span>
+    <el-divider direction="vertical"></el-divider>
+    <span>Grass</span>
+  </div>
+</template>
+```
+:::
+
+### Divider Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| direction      | Set divider's direction  | string  |          horizontal / vertical           |    horizontal     |
+| content-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 content-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 content-position="right">Rabindranath Tagore</el-divider>
+  </div>
+</template>
+```
+:::
+
+### Vertical divider
+
+:::demo
+```html
+<template>
+  <div>
+    <span>Rain</span>
+    <el-divider direction="vertical"></el-divider>
+    <span>Home</span>
+    <el-divider direction="vertical"></el-divider>
+    <span>Grass</span>
+  </div>
+</template>
+```
+:::
+
+### Divider Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| direction      | Set divider's direction  | string  |          horizontal / vertical           |    horizontal     |
+| content-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 content-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 content-position="right">Rabindranath Tagore</el-divider>
+  </div>
+</template>
+```
+:::
+
+### Vertical divider
+
+:::demo
+```html
+<template>
+  <div>
+    <span>Rain</span>
+    <el-divider direction="vertical"></el-divider>
+    <span>Home</span>
+    <el-divider direction="vertical"></el-divider>
+    <span>Grass</span>
+  </div>
+</template>
+```
+:::
+
+### Divider Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| direction      | Set divider's direction  | string  |          horizontal / vertical           |    horizontal     |
+| content-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 content-position="left">少年包青天</el-divider>
+    <span>饿了别叫妈, 叫饿了么</span>
+    <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
+    <span>为了无法计算的价值</span>
+    <el-divider content-position="right">阿里云</el-divider>
+  </div>
+</template>
+```
+:::
+
+### 垂直分割
+
+:::demo
+```html
+<template>
+  <div>
+    <span>雨纷纷</span>
+    <el-divider direction="vertical"></el-divider>
+    <span>旧故里</span>
+    <el-divider direction="vertical"></el-divider>
+    <span>草木深</span>
+  </div>
+</template>
+```
+:::
+
+### Divider Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| direction      | 设置分割线方向  | boolean  |            horizontal / vertical          |    horizontal     |
+| content-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,37 @@
+export default {
+  functional: true,
+
+  name: 'ElDivider',
+
+  props: {
+    direction: {
+      type: String,
+      default: 'horizontal',
+      validator(val) {
+        return ['horizontal', 'vertical'].indexOf(val) !== -1;
+      }
+    },
+
+    contentPosition: {
+      type: String,
+      default: 'center',
+      validator(val) {
+        return ['left', 'center', 'right'].indexOf(val) !== -1;
+      }
+    }
+  },
+
+  render(h, context) {
+    const $slots = context.slots();
+    const { direction, contentPosition } = context.props;
+    return (
+      <div class={['el-divider', `el-divider--${direction}`]}>
+        {
+          $slots.default && direction !== 'vertical'
+            ? <div class={['el-divider__text', `is-${contentPosition}`]}>{$slots.default}</div>
+            : null
+        }
+      </div>
+    );
+  }
+};