github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Divider: add divider component (#15055)

pull/15186/head
Zhi Cun 2019-04-19 11:44:35 +08:00 committed by hetech
parent c34ec3f1f1
commit 128feba18f
16 changed files with 413 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components.json
View File

@ -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"
}

9
examples/demo-styles/divider.scss Normal file
View File

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

1
examples/demo-styles/index.scss
View File

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

61
examples/docs/en-US/divider.md Normal file
View File

@ -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 |

61
examples/docs/es/divider.md Normal file
View File

@ -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 |

61
examples/docs/fr-FR/divider.md Normal file
View File

@ -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 |

61
examples/docs/zh-CN/divider.md Normal file
View File

@ -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 |

16
examples/nav.config.json
View File

@ -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"
}
]
}

8
packages/divider/index.js Normal file
View File

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

37
packages/divider/src/main.js Normal file
View File

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

47
packages/theme-chalk/src/divider.scss Normal file
View File

@ -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%);
}
}
}

1
packages/theme-chalk/src/index.scss
View File

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

5
src/index.js
View File

@ -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
};

28
test/unit/specs/divider.spec.js Normal file
View File

@ -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');
});
});

12
types/divider.d.ts vendored Normal file
View File

@ -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
}

4
types/element-ui.d.ts vendored
View File

@ -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 {}