Skip to content

Commit aac691b

Browse files
chenjiahanchenjiahan
authored
[new feature] add divider component (youzan#3755)
1 parent 6d67f45 commit aac691b

12 files changed

Lines changed: 380 additions & 0 deletions

File tree

‎docs/site/doc.config.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -223,6 +223,10 @@ export default {
223223
path: '/collapse',
224224
title: 'Collapse 折叠面板'
225225
},
226+
{
227+
path: '/divider',
228+
title: 'Divider 分割线'
229+
},
226230
{
227231
path: '/image-preview',
228232
title: 'ImagePreview 图片预览'
@@ -549,6 +553,10 @@ export default {
549553
path: '/collapse',
550554
title: 'Collapse'
551555
},
556+
{
557+
path: '/divider',
558+
title: 'Divider'
559+
},
552560
{
553561
path: '/image-preview',
554562
title: 'ImagePreview'

‎src/divider/README.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# Divider
2+
3+
### Install
4+
5+
``` javascript
6+
import { Divider } from 'vant';
7+
8+
Vue.use(Divider);
9+
```
10+
11+
## Usage
12+
13+
### Basic Usage
14+
15+
```html
16+
<van-divider />
17+
```
18+
19+
### With Text
20+
21+
```html
22+
<van-divider>Text</van-divider>
23+
```
24+
25+
### Content Position
26+
27+
```html
28+
<van-divider content-position="left">Text</van-divider>
29+
<van-divider content-position="right">Text</van-divider>
30+
```
31+
32+
### Dashed
33+
34+
```html
35+
<van-divider dashed>Text</van-divider>
36+
```
37+
38+
### Custom Style
39+
40+
```html
41+
<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 15px' }">
42+
Text
43+
</van-divider>
44+
```
45+
46+
## API
47+
48+
### Props
49+
50+
| Attribute | Description | Type | Default |
51+
|------|------|------|------|
52+
| dashed | Whether to use dashed border | `Boolean` | `false` |
53+
| hairline | Whether to use hairline | `Boolean` | `true` |
54+
| content-position | Content position，can be set to `left` `right` | `String` | `center` |
55+
56+
### Cell Slots
57+
58+
| Name | Description |
59+
|------|------|
60+
| default | content |

‎src/divider/README.zh-CN.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# Divider 分割线
2+
3+
### 引入
4+
5+
``` javascript
6+
import { Divider } from 'vant';
7+
8+
Vue.use(Divider);
9+
```
10+
11+
## 代码演示
12+
13+
### 基础用法
14+
15+
Divider 默认渲染一条水平分割线
16+
17+
```html
18+
<van-divider />
19+
```
20+
21+
### 展示文字
22+
23+
通过插槽在可以分割线中间插入内容
24+
25+
```html
26+
<van-divider>文字</van-divider>
27+
```
28+
29+
### 内容位置
30+
31+
通过`content-position`指定内容所在位置
32+
33+
```html
34+
<van-divider content-position="left">文字</van-divider>
35+
<van-divider content-position="right">文字</van-divider>
36+
```
37+
38+
### 虚线
39+
40+
添加`dashed`属性使分割线渲染为虚线
41+
42+
```html
43+
<van-divider dashed>文字</van-divider>
44+
```
45+
46+
### 自定义样式
47+
48+
可以直接通过`style`属性设置分割线的样式
49+
50+
```html
51+
<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 15px' }">
52+
文字
53+
</van-divider>
54+
```
55+
56+
## API
57+
58+
### Props
59+
60+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
61+
|------|------|------|------|------|
62+
| dashed | 是否使用虚线 | `Boolean` | `false` | - |
63+
| hairline | 是否使用 0.5px 线 | `Boolean` | `true` | - |
64+
| content-position | 内容位置，可选值为`left` `right` | `String` | `center` | - |
65+
66+
### Slots
67+
68+
| 名称 | 说明 |
69+
|------|------|
70+
| default | 内容 |

‎src/divider/demo/index.vue‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<demo-section>
3+
<demo-block :title="$t('basicUsage')">
4+
<van-divider />
5+
</demo-block>
6+
7+
<demo-block :title="$t('withText')">
8+
<van-divider>
9+
{{ $t('text') }}
10+
</van-divider>
11+
</demo-block>
12+
13+
<demo-block :title="$t('contentPosition')">
14+
<van-divider content-position="left">
15+
{{ $t('text') }}
16+
</van-divider>
17+
18+
<van-divider content-position="right">
19+
{{ $t('text') }}
20+
</van-divider>
21+
</demo-block>
22+
23+
<demo-block :title="$t('dashed')">
24+
<van-divider
25+
dashed
26+
:hairline="false"
27+
>
28+
{{ $t('text') }}
29+
</van-divider>
30+
</demo-block>
31+
32+
<demo-block :title="$t('customStyle')">
33+
<van-divider :style="{ borderColor: BLUE, color: BLUE, padding: '0 15px' }">
34+
{{ $t('text') }}
35+
</van-divider>
36+
</demo-block>
37+
</demo-section>
38+
</template>
39+
40+
<script>
41+
import { BLUE } from '../../utils/color';
42+
43+
export default {
44+
i18n: {
45+
'zh-CN': {
46+
text: '文本',
47+
dashed: '虚线',
48+
withText: '展示文本',
49+
contentPosition: '内容位置',
50+
customStyle: '自定义样式'
51+
},
52+
'en-US': {
53+
text: 'Text',
54+
dashed: 'Dashed',
55+
withText: 'With Text',
56+
contentPosition: 'Content Position',
57+
customStyle: 'Custom Style'
58+
}
59+
},
60+
61+
data() {
62+
return {
63+
BLUE
64+
};
65+
}
66+
};
67+
</script>
68+
69+
<style lang="less">
70+
.demo-divider {
71+
background-color: #fff;
72+
73+
.van-doc-demo-block__title {
74+
padding-top: 15px;
75+
}
76+
}
77+
</style>

‎src/divider/index.less‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
@import '../style/var';
2+
3+
.van-divider {
4+
display: flex;
5+
align-items: center;
6+
margin: @divider-margin;
7+
color: @divider-text-color;
8+
font-size: @divider-font-size;
9+
line-height: @divider-line-height;
10+
border-color: @divider-border-color;
11+
border-style: solid;
12+
border-width: 0;
13+
14+
&::before,
15+
&::after {
16+
display: block;
17+
flex: 1;
18+
box-sizing: border-box;
19+
height: 1px;
20+
border-color: inherit;
21+
border-style: inherit;
22+
border-width: 1px 0 0;
23+
}
24+
25+
&::before {
26+
content: '';
27+
}
28+
29+
&--hairline {
30+
&::before,
31+
&::after {
32+
transform: scaleY(.5);
33+
}
34+
}
35+
36+
&--dashed {
37+
border-style: dashed;
38+
}
39+
40+
&--content-center,
41+
&--content-left,
42+
&--content-right {
43+
&::before {
44+
margin-right: @divider-content-padding;
45+
}
46+
47+
&::after {
48+
margin-left: @divider-content-padding;
49+
content: '';
50+
}
51+
}
52+
53+
&--content-left {
54+
&::before {
55+
max-width: @divider-content-left-width;
56+
}
57+
}
58+
59+
&--content-right {
60+
&::after {
61+
max-width: @divider-content-right-width;
62+
}
63+
}
64+
}

‎src/divider/index.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { createNamespace } from '../utils';
2+
import { inherit } from '../utils/functional';
3+
4+
// Types
5+
import { CreateElement, RenderContext } from 'vue/types';
6+
import { DefaultSlots } from '../utils/types';
7+
8+
export type DividerProps = {
9+
dashed?: boolean;
10+
hairline: boolean;
11+
borderColor?: string;
12+
contentPosition: 'left' | 'center' | 'right';
13+
};
14+
15+
const [createComponent, bem] = createNamespace('divider');
16+
17+
function Divider(
18+
h: CreateElement,
19+
props: DividerProps,
20+
slots: DefaultSlots,
21+
ctx: RenderContext
22+
) {
23+
return (
24+
<div
25+
style={{ borderColor: props.borderColor }}
26+
class={bem({
27+
dashed: props.dashed,
28+
hairline: props.hairline,
29+
[`content-${props.contentPosition}`]: slots.default
30+
})}
31+
{...inherit(ctx, true)}
32+
>
33+
{slots.default && slots.default()}
34+
</div>
35+
);
36+
}
37+
38+
Divider.props = {
39+
dashed: Boolean,
40+
hairline: {
41+
type: Boolean,
42+
default: true
43+
},
44+
contentPosition: {
45+
type: String,
46+
default: 'center'
47+
}
48+
};
49+
50+
export default createComponent<DividerProps>(Divider);

‎src/divider/test/__snapshots__/demo.spec.js.snap‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`renders demo correctly 1`] = `
4+
<div>
5+
<div>
6+
<div class="van-divider van-divider--hairline"></div>
7+
</div>
8+
<div>
9+
<div class="van-divider van-divider--hairline van-divider--content-center">
10+
文本
11+
</div>
12+
</div>
13+
<div>
14+
<div class="van-divider van-divider--hairline van-divider--content-left">
15+
文本
16+
</div>
17+
<div class="van-divider van-divider--hairline van-divider--content-right">
18+
文本
19+
</div>
20+
</div>
21+
<div>
22+
<div class="van-divider van-divider--dashed van-divider--content-center">
23+
文本
24+
</div>
25+
</div>
26+
<div>
27+
<div class="van-divider van-divider--hairline van-divider--content-center" style="border-color: #1989fa; color: rgb(25, 137, 250); padding: 0px 15px;">
28+
文本
29+
</div>
30+
</div>
31+
</div>
32+
`;

‎src/divider/test/demo.spec.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import Demo from '../demo';
2+
import demoTest from '../../../test/demo-test';
3+
4+
demoTest(Demo);

‎src/index.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
@import './image/index';
1414
@import './circle/index';
1515
@import './collapse-item/index';
16+
@import './divider/index';
1617
@import './list/index';
1718
@import './nav-bar/index';
1819
@import './notice-bar/index';

0 commit comments

Comments
 (0)