[new feature] add divider component (#3755)

docs/site/doc.config.js

@@ -223,6 +223,10 @@ export default {
                 path: '/collapse',
                 title: 'Collapse 折叠面板'
               },
+              {
+                path: '/divider',
+                title: 'Divider 分割线'
+              },
               {
                 path: '/image-preview',
                 title: 'ImagePreview 图片预览'
@@ -549,6 +553,10 @@ export default {
                 path: '/collapse',
                 title: 'Collapse'
               },
+              {
+                path: '/divider',
+                title: 'Divider'
+              },
               {
                 path: '/image-preview',
                 title: 'ImagePreview'

src/divider/README.md

@@ -0,0 +1,60 @@
+# Divider
+
+### Install
+
+``` javascript
+import { Divider } from 'vant';
+
+Vue.use(Divider);
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<van-divider />
+```
+
+### With Text
+
+```html
+<van-divider>Text</van-divider>
+```
+
+### Content Position
+
+```html
+<van-divider content-position="left">Text</van-divider>
+<van-divider content-position="right">Text</van-divider>
+```
+
+### Dashed
+
+```html
+<van-divider dashed>Text</van-divider>
+```
+
+### Custom Style
+
+```html
+<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 15px' }">
+  Text
+</van-divider>
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+|------|------|------|------|
+| dashed | Whether to use dashed border | `Boolean` | `false` |
+| hairline | Whether to use hairline | `Boolean` | `true` |
+| content-position | Content position，can be set to `left` `right` | `String` | `center` |
+
+### Cell Slots
+
+| Name | Description |
+|------|------|
+| default | content |

src/divider/README.zh-CN.md

@@ -0,0 +1,70 @@
+# Divider 分割线
+
+### 引入
+
+``` javascript
+import { Divider } from 'vant';
+
+Vue.use(Divider);
+```
+
+## 代码演示
+
+### 基础用法
+
+Divider 默认渲染一条水平分割线
+
+```html
+<van-divider />
+```
+
+### 展示文字
+
+通过插槽在可以分割线中间插入内容
+
+```html
+<van-divider>文字</van-divider>
+```
+
+### 内容位置
+
+通过`content-position`指定内容所在位置
+
+```html
+<van-divider content-position="left">文字</van-divider>
+<van-divider content-position="right">文字</van-divider>
+```
+
+### 虚线
+
+添加`dashed`属性使分割线渲染为虚线
+
+```html
+<van-divider dashed>文字</van-divider>
+```
+
+### 自定义样式
+
+可以直接通过`style`属性设置分割线的样式
+
+```html
+<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 15px' }">
+  文字
+</van-divider>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| dashed | 是否使用虚线 | `Boolean` | `false` | - |
+| hairline | 是否使用 0.5px 线 | `Boolean` | `true` | - |
+| content-position | 内容位置，可选值为`left` `right` | `String` | `center` | - |
+
+### Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 内容 |

src/divider/demo/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-divider />
+    </demo-block>
+
+    <demo-block :title="$t('withText')">
+      <van-divider>
+        {{ $t('text') }}
+      </van-divider>
+    </demo-block>
+
+    <demo-block :title="$t('contentPosition')">
+      <van-divider content-position="left">
+        {{ $t('text') }}
+      </van-divider>
+
+      <van-divider content-position="right">
+        {{ $t('text') }}
+      </van-divider>
+    </demo-block>
+
+    <demo-block :title="$t('dashed')">
+      <van-divider
+        dashed
+        :hairline="false"
+      >
+        {{ $t('text') }}
+      </van-divider>
+    </demo-block>
+
+    <demo-block :title="$t('customStyle')">
+      <van-divider :style="{ borderColor: BLUE, color: BLUE, padding: '0 15px' }">
+        {{ $t('text') }}
+      </van-divider>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+import { BLUE } from '../../utils/color';
+
+export default {
+  i18n: {
+    'zh-CN': {
+      text: '文本',
+      dashed: '虚线',
+      withText: '展示文本',
+      contentPosition: '内容位置',
+      customStyle: '自定义样式'
+    },
+    'en-US': {
+      text: 'Text',
+      dashed: 'Dashed',
+      withText: 'With Text',
+      contentPosition: 'Content Position',
+      customStyle: 'Custom Style'
+    }
+  },
+
+  data() {
+    return {
+      BLUE
+    };
+  }
+};
+</script>
+
+<style lang="less">
+.demo-divider {
+  background-color: #fff;
+
+  .van-doc-demo-block__title {
+    padding-top: 15px;
+  }
+}
+</style>

src/divider/index.less

@@ -0,0 +1,64 @@
+@import '../style/var';
+
+.van-divider {
+  display: flex;
+  align-items: center;
+  margin: @divider-margin;
+  color: @divider-text-color;
+  font-size: @divider-font-size;
+  line-height: @divider-line-height;
+  border-color: @divider-border-color;
+  border-style: solid;
+  border-width: 0;
+
+  &::before,
+  &::after {
+    display: block;
+    flex: 1;
+    box-sizing: border-box;
+    height: 1px;
+    border-color: inherit;
+    border-style: inherit;
+    border-width: 1px 0 0;
+  }
+
+  &::before {
+    content: '';
+  }
+
+  &--hairline {
+    &::before,
+    &::after {
+      transform: scaleY(.5);
+    }
+  }
+
+  &--dashed {
+    border-style: dashed;
+  }
+
+  &--content-center,
+  &--content-left,
+  &--content-right {
+    &::before {
+      margin-right: @divider-content-padding;
+    }
+
+    &::after {
+      margin-left: @divider-content-padding;
+      content: '';
+    }
+  }
+
+  &--content-left {
+    &::before {
+      max-width: @divider-content-left-width;
+    }
+  }
+
+  &--content-right {
+    &::after {
+      max-width: @divider-content-right-width;
+    }
+  }
+}

src/divider/index.tsx

@@ -0,0 +1,50 @@
+import { createNamespace } from '../utils';
+import { inherit } from '../utils/functional';
+
+// Types
+import { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../utils/types';
+
+export type DividerProps = {
+  dashed?: boolean;
+  hairline: boolean;
+  borderColor?: string;
+  contentPosition: 'left' | 'center' | 'right';
+};
+
+const [createComponent, bem] = createNamespace('divider');
+
+function Divider(
+  h: CreateElement,
+  props: DividerProps,
+  slots: DefaultSlots,
+  ctx: RenderContext
+) {
+  return (
+    <div
+      style={{ borderColor: props.borderColor }}
+      class={bem({
+        dashed: props.dashed,
+        hairline: props.hairline,
+        [`content-${props.contentPosition}`]: slots.default
+      })}
+      {...inherit(ctx, true)}
+    >
+      {slots.default && slots.default()}
+    </div>
+  );
+}
+
+Divider.props = {
+  dashed: Boolean,
+  hairline: {
+    type: Boolean,
+    default: true
+  },
+  contentPosition: {
+    type: String,
+    default: 'center'
+  }
+};
+
+export default createComponent<DividerProps>(Divider);

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

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-divider van-divider--hairline"></div>
+  </div>
+  <div>
+    <div class="van-divider van-divider--hairline van-divider--content-center">
+      文本
+    </div>
+  </div>
+  <div>
+    <div class="van-divider van-divider--hairline van-divider--content-left">
+      文本
+    </div>
+    <div class="van-divider van-divider--hairline van-divider--content-right">
+      文本
+    </div>
+  </div>
+  <div>
+    <div class="van-divider van-divider--dashed van-divider--content-center">
+      文本
+    </div>
+  </div>
+  <div>
+    <div class="van-divider van-divider--hairline van-divider--content-center" style="border-color: #1989fa; color: rgb(25, 137, 250); padding: 0px 15px;">
+      文本
+    </div>
+  </div>
+</div>
+`;

src/divider/test/demo.spec.js

@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import demoTest from '../../../test/demo-test';
+
+demoTest(Demo);

src/index.less

@@ -13,6 +13,7 @@
 @import './image/index';
 @import './circle/index';
 @import './collapse-item/index';
+@import './divider/index';
 @import './list/index';
 @import './nav-bar/index';
 @import './notice-bar/index';

src/index.ts

@@ -23,6 +23,7 @@ import CouponCell from './coupon-cell';
 import CouponList from './coupon-list';
 import DatetimePicker from './datetime-picker';
 import Dialog from './dialog';
+import Divider from './divider';
 import DropdownItem from './dropdown-item';
 import DropdownMenu from './dropdown-menu';
 import Field from './field';
@@ -111,6 +112,7 @@ const components = [
   CouponList,
   DatetimePicker,
   Dialog,
+  Divider,
   DropdownItem,
   DropdownMenu,
   Field,
@@ -204,6 +206,7 @@ export {
   CouponList,
   DatetimePicker,
   Dialog,
+  Divider,
   DropdownItem,
   DropdownMenu,
   Field,

src/style/var.less

@@ -213,6 +213,16 @@
 @dialog-has-title-message-padding-top: 12px;
 @dialog-confirm-button-text-color: @blue;
 
+// Divider
+@divider-margin: 15px 0;
+@divider-text-color: @gray-dark;
+@divider-font-size: 14px;
+@divider-line-height: 24px;
+@divider-border-color: @border-color;
+@divider-content-padding: 15px;
+@divider-content-left-width: 10%;
+@divider-content-right-width: 10%;
+
 // DropdownMenu
 @dropdown-menu-height: 50px;
 @dropdown-menu-background-color: @white;

types/index.d.ts

@@ -17,6 +17,7 @@ export class Button extends VanComponent {}
 export class Card extends VanComponent {}
 export class Cell extends VanComponent {}
 export class CellGroup extends VanComponent {}
+export class Divider extends VanComponent {}
 export class SwipeCell extends VanComponent {}
 export class Checkbox extends VanComponent {}
 export class CheckboxGroup extends VanComponent {}