From 128feba18fe1bc65ec6992bf7455a48aaf3d87a7 Mon Sep 17 00:00:00 2001 From: Zhi Cun Date: Fri, 19 Apr 2019 11:44:35 +0800 Subject: [PATCH] Divider: add divider component (#15055) --- components.json | 3 +- examples/demo-styles/divider.scss | 9 ++++ examples/demo-styles/index.scss | 1 + examples/docs/en-US/divider.md | 61 +++++++++++++++++++++++++++ examples/docs/es/divider.md | 61 +++++++++++++++++++++++++++ examples/docs/fr-FR/divider.md | 61 +++++++++++++++++++++++++++ examples/docs/zh-CN/divider.md | 61 +++++++++++++++++++++++++++ examples/nav.config.json | 16 +++++++ packages/divider/index.js | 8 ++++ packages/divider/src/main.js | 37 ++++++++++++++++ packages/theme-chalk/src/divider.scss | 47 +++++++++++++++++++++ packages/theme-chalk/src/index.scss | 1 + src/index.js | 5 ++- test/unit/specs/divider.spec.js | 28 ++++++++++++ types/divider.d.ts | 12 ++++++ types/element-ui.d.ts | 4 ++ 16 files changed, 413 insertions(+), 2 deletions(-) create mode 100644 examples/demo-styles/divider.scss create mode 100644 examples/docs/en-US/divider.md create mode 100644 examples/docs/es/divider.md create mode 100644 examples/docs/fr-FR/divider.md create mode 100644 examples/docs/zh-CN/divider.md create mode 100644 packages/divider/index.js create mode 100644 packages/divider/src/main.js create mode 100644 packages/theme-chalk/src/divider.scss create mode 100644 test/unit/specs/divider.spec.js create mode 100644 types/divider.d.ts diff --git a/components.json b/components.json index 9b9ebc795..f595fd87a 100644 --- a/components.json +++ b/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" } diff --git a/examples/demo-styles/divider.scss b/examples/demo-styles/divider.scss new file mode 100644 index 000000000..a4cd0c07c --- /dev/null +++ b/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%; +} \ No newline at end of file diff --git a/examples/demo-styles/index.scss b/examples/demo-styles/index.scss index 95458e83b..26e3ad7cd 100644 --- a/examples/demo-styles/index.scss +++ b/examples/demo-styles/index.scss @@ -38,3 +38,4 @@ @import "./tree.scss"; @import "./typography.scss"; @import "./upload.scss"; +@import "./divider.scss"; diff --git a/examples/docs/en-US/divider.md b/examples/docs/en-US/divider.md new file mode 100644 index 000000000..d419c9bd9 --- /dev/null +++ b/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 + +``` +::: + +### Custom content + +You can customize the content on the divider line. + + +:::demo +```html + +``` +::: + +### Vertical divider + +:::demo +```html + +``` +::: + +### 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 | \ No newline at end of file diff --git a/examples/docs/es/divider.md b/examples/docs/es/divider.md new file mode 100644 index 000000000..d419c9bd9 --- /dev/null +++ b/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 + +``` +::: + +### Custom content + +You can customize the content on the divider line. + + +:::demo +```html + +``` +::: + +### Vertical divider + +:::demo +```html + +``` +::: + +### 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 | \ No newline at end of file diff --git a/examples/docs/fr-FR/divider.md b/examples/docs/fr-FR/divider.md new file mode 100644 index 000000000..d419c9bd9 --- /dev/null +++ b/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 + +``` +::: + +### Custom content + +You can customize the content on the divider line. + + +:::demo +```html + +``` +::: + +### Vertical divider + +:::demo +```html + +``` +::: + +### 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 | \ No newline at end of file diff --git a/examples/docs/zh-CN/divider.md b/examples/docs/zh-CN/divider.md new file mode 100644 index 000000000..190a29154 --- /dev/null +++ b/examples/docs/zh-CN/divider.md @@ -0,0 +1,61 @@ +## Divider 分割线 + +区隔内容的分割线。 + +### 基础用法 + +对不同章节的文本段落进行分割。 + +:::demo +```html + +``` +::: + +### 设置文案 + +可以在分割线上自定义文案内容。 + + +:::demo +```html + +``` +::: + +### 垂直分割 + +:::demo +```html + +``` +::: + +### Divider Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|------------- |---------------- |---------------- |---------------------- |-------- | +| direction | 设置分割线方向 | boolean | horizontal / vertical | horizontal | +| content-position | 设置分割线文案的位置 | string | left / right / center | center | \ No newline at end of file diff --git a/examples/nav.config.json b/examples/nav.config.json index f331f9ead..40a3e3de9 100644 --- a/examples/nav.config.json +++ b/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" } ] } diff --git a/packages/divider/index.js b/packages/divider/index.js new file mode 100644 index 000000000..b49f9d0fe --- /dev/null +++ b/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; diff --git a/packages/divider/src/main.js b/packages/divider/src/main.js new file mode 100644 index 000000000..e44181476 --- /dev/null +++ b/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 ( +
+ { + $slots.default && direction !== 'vertical' + ?
{$slots.default}
+ : null + } +
+ ); + } +}; diff --git a/packages/theme-chalk/src/divider.scss b/packages/theme-chalk/src/divider.scss new file mode 100644 index 000000000..4ed94ee59 --- /dev/null +++ b/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%); + } + } +} \ No newline at end of file diff --git a/packages/theme-chalk/src/index.scss b/packages/theme-chalk/src/index.scss index d644e304f..4051e6434 100644 --- a/packages/theme-chalk/src/index.scss +++ b/packages/theme-chalk/src/index.scss @@ -67,3 +67,4 @@ @import "./footer.scss"; @import "./timeline.scss"; @import "./timeline-item.scss"; +@import "./divider.scss"; diff --git a/src/index.js b/src/index.js index b710a57db..ef603ee86 100644 --- a/src/index.js +++ b/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 }; diff --git a/test/unit/specs/divider.spec.js b/test/unit/specs/divider.spec.js new file mode 100644 index 000000000..1a0560ab8 --- /dev/null +++ b/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: ` + 我是一条完美分割线！ + ` + }); + + expect(vm.$el).to.property('textContent').to.include('我是一条完美分割线！'); + }); + + it('direction', () => { + vm = createVue({ + template: ` + 我是一条完美分割线！ + ` + }); + + expect(vm.$el.className).to.include('el-divider--vertical'); + }); +}); diff --git a/types/divider.d.ts b/types/divider.d.ts new file mode 100644 index 000000000..c7d969cc2 --- /dev/null +++ b/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 +} diff --git a/types/element-ui.d.ts b/types/element-ui.d.ts index 2c341a8e5..4af76cacb 100644 --- a/types/element-ui.d.ts +++ b/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 {}