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>
+    );
+  }
+};

packages/theme-chalk/src/divider.scss

@@ -0,0 +1,47 @@
+@import "common/var";
+@import "mixins/mixins";
+
+@include b(divider) {
+  background-color: $--border-color-base;
+  position: relative;
+
+  @include m(horizontal) {
+    display: block;
+    height: 1px;
+    width: 100%;
+    margin: 24px 0;
+  }
+
+  @include m(vertical) {
+    display: inline-block;
+    width: 1px;
+    height: 1em;
+    margin: 0 8px;
+    vertical-align: middle;
+    position: relative;
+  }
+
+  @include e(text) {
+    position: absolute;
+    background-color: $--color-white;
+    padding: 0 20px;
+    font-weight: 500;
+    color: $--color-text-primary;
+    font-size: 14px;
+
+    @include when(left) {
+      left: 20px;
+      transform: translateY(-50%);
+    }
+
+    @include when(center)  {
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
+
+    @include when(right)  {
+      right: 20px;
+      transform: translateY(-50%);
+    }
+  }
+}

packages/theme-chalk/src/index.scss

@@ -67,3 +67,4 @@
 @import "./footer.scss";
 @import "./timeline.scss";
 @import "./timeline-item.scss";
+@import "./divider.scss";

src/index.js

@@ -71,6 +71,7 @@ import Main from '../packages/main/index.js';
 import Footer from '../packages/footer/index.js';
 import Timeline from '../packages/timeline/index.js';
 import TimelineItem from '../packages/timeline-item/index.js';
+import Divider from '../packages/divider/index.js';
 import locale from 'element-ui/src/locale';
 import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
 
@@ -142,6 +143,7 @@ const components = [
   Footer,
   Timeline,
   TimelineItem,
+  Divider,
   CollapseTransition
 ];
 
@@ -251,5 +253,6 @@ export default {
   Main,
   Footer,
   Timeline,
-  TimelineItem
+  TimelineItem,
+  Divider
 };

test/unit/specs/divider.spec.js

@@ -0,0 +1,28 @@
+import { createVue, destroyVM } from '../util';
+
+describe('Divider', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('content', () => {
+    vm = createVue({
+      template: `
+          <el-divider>我是一条完美分割线！</el-divider>
+      `
+    });
+
+    expect(vm.$el).to.property('textContent').to.include('我是一条完美分割线！');
+  });
+
+  it('direction', () => {
+    vm = createVue({
+      template: `
+          <el-divider direction="vertical">我是一条完美分割线！</el-divider>
+      `
+    });
+
+    expect(vm.$el.className).to.include('el-divider--vertical');
+  });
+});

types/divider.d.ts

@@ -0,0 +1,12 @@
+import { ElementUIComponent } from './component'
+
+export type ContentPosition = 'left' | 'center' | 'right'
+
+/** Divider Component */
+export declare class ElDivider extends ElementUIComponent {
+  /** enable vertical divider */
+  vertical: boolean
+
+  /** customize the content on the divider line */
+  posiiton: ContentPosition
+}

types/element-ui.d.ts

@@ -69,6 +69,7 @@ import { ElTooltip } from './tooltip'
 import { ElTransfer } from './transfer'
 import { ElTree } from './tree'
 import { ElUpload } from './upload'
+import { ElDivider } from './divider'
 
 export interface InstallationOptions {
   locale: any,
@@ -300,3 +301,6 @@ export class Tree extends ElTree {}
 
 /** Upload Component */
 export class Upload extends ElUpload {}
+
+/** Divider Component */
+export class Divider extends ElDivider {}