feat(Divider): add divider (#2058)

example/app.json

@@ -77,6 +77,7 @@
     "van-checkbox-group": "./dist/checkbox-group/index",
     "van-col": "./dist/col/index",
     "van-dialog": "./dist/dialog/index",
+    "van-divider": "./dist/divider/index",
     "van-field": "./dist/field/index",
     "van-goods-action": "./dist/goods-action/index",
     "van-goods-action-icon": "./dist/goods-action-icon/index",

example/config.js

@@ -148,6 +148,10 @@ export default [
       {
         path: '/tree-select',
         title: 'TreeSelect 分类选择'
+      },
+      {
+        path: '/divider',
+        title: 'Divider 分割线'
       }
     ]
   },

example/pages/divider/index.js

@@ -0,0 +1,3 @@
+import Page from '../../common/page';
+
+Page();

example/pages/divider/index.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "Divider 分割线"
+}

example/pages/divider/index.wxml

@@ -0,0 +1,17 @@
+<demo-block custom-class="white" title="基础用法" padding>
+  <van-divider />
+</demo-block>
+
+<demo-block custom-class="white" title="内容位置" padding>
+  <van-divider content-position="center">文本</van-divider>
+  <van-divider content-position="left">文本</van-divider>
+  <van-divider content-position="right">文本</van-divider>
+</demo-block>
+
+<demo-block custom-class="white" title="虚线" padding>
+  <van-divider dashed />
+</demo-block>
+
+<demo-block custom-class="white" title="自定义样式" padding>
+  <van-divider content-position="center" custom-style="color: #1989fa;border-color: #1989fa;font-size: 18px;">文本</van-divider>
+</demo-block>

example/pages/divider/index.wxss

@@ -0,0 +1,3 @@
+page {
+  background-color: white;
+}

packages/common/style/var.less

@@ -197,3 +197,13 @@
 @grid-item-icon-size: 26px;
 @grid-item-text-color: @gray-darker;
 @grid-item-text-font-size: @font-size-sm;
+
+// Divider
+@divider-margin: @padding-md 0;
+@divider-text-color: @gray-dark;
+@divider-font-size: @font-size-md;
+@divider-line-height: 24px;
+@divider-border-color: @border-color;
+@divider-content-padding: @padding-md;
+@divider-content-left-width: 10%;
+@divider-content-right-width: 10%;

packages/divider/README.md

@@ -0,0 +1,74 @@
+# Divider 分割线
+
+### 介绍
+
+分割线
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart)
+
+```json
+"usingComponents": {
+  "van-divider": "path/to/vant-weapp/dist/divider/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<van-divider />
+```
+
+### 使用hairline
+
+```html
+<van-divider hairline />
+```
+
+### 虚线
+
+```html
+<van-divider dashed />
+```
+
+### 文本位置
+
+```html
+<van-divider contentPosition="center">文本</van-divider>
+  <van-divider contentPosition="left">文本</van-divider>
+  <van-divider contentPosition="right">文本</van-divider>
+```
+
+### 自定义属性
+
+```html
+<van-divider contentPosition="center" textColor="#1989fa">文本颜色</van-divider>
+<van-divider contentPosition="center" borderColor="#1989fa">border颜色</van-divider>
+<van-divider contentPosition="center" fontSize="18">字体大小</van-divider>
+```
+
+### 自定义样式
+
+```html
+<van-divider contentPosition="center" customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;">文本</van-divider>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|-----------|-----------|-----------|-------------|-------------|
+| dashed | 虚线 | *boolean* | false | - |
+| hairline | 细线 | *boolean* | false | - |
+| content-position | 文本位置，`left` `center` `right` | *string* | - | - |
+| custom-style | 自定义样式 | *string* | - | - |
+
+### Slot
+
+| 名称 | 说明 |
+|-----------|-----------|
+| 默认 | 自定义文本内容 |

packages/divider/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

packages/divider/index.less

@@ -0,0 +1,64 @@
+@import '../common/style/var.less';
+
+.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;
+  }
+
+  &--center,
+  &--left,
+  &--right {
+    &::before {
+      margin-right: @divider-content-padding;
+    }
+
+    &::after {
+      margin-left: @divider-content-padding;
+      content: '';
+    }
+  }
+
+  &--left {
+    &::before {
+      max-width: @divider-content-left-width;
+    }
+  }
+
+  &--right {
+    &::after {
+      max-width: @divider-content-right-width;
+    }
+  }
+}

packages/divider/index.ts

@@ -0,0 +1,34 @@
+import { VantComponent } from '../common/component';
+
+VantComponent({
+  props: {
+    dashed: {
+      type: Boolean,
+      value: false
+    },
+    hairline: {
+      type: Boolean,
+      value: false
+    },
+    contentPosition: {
+      type: String,
+      value: ''
+    },
+    fontSize: {
+      type: Number,
+      value: ''
+    },
+    borderColor: {
+      type: String,
+      value: ''
+    },
+    textColor: {
+      type: String,
+      value: ''
+    },
+    customStyle: {
+      type: String,
+      value: ''
+    }
+  }
+});

packages/divider/index.wxml

@@ -0,0 +1,8 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  class="custom-class {{ utils.bem('divider', [{dashed, hairline}, contentPosition]) }}"
+  style="{{ borderColor  ? 'border-color: ' + borderColor + ';' : '' }}{{ textColor ? 'color: ' + textColor : '' }} {{ fontSize ? 'font-size: ' + fontSize + 'px' : '' }} {{ customStyle }}"
+>
+  <slot />
+</view>