diff --git a/example/app.json b/example/app.json index 950b8d9f..fc646bfe 100644 --- a/example/app.json +++ b/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", diff --git a/example/config.js b/example/config.js index d5d6ac9b..951e7903 100644 --- a/example/config.js +++ b/example/config.js @@ -148,6 +148,10 @@ export default [ { path: '/tree-select', title: 'TreeSelect 分类选择' + }, + { + path: '/divider', + title: 'Divider 分割线' } ] }, diff --git a/example/pages/divider/index.js b/example/pages/divider/index.js new file mode 100644 index 00000000..cc11dfda --- /dev/null +++ b/example/pages/divider/index.js @@ -0,0 +1,3 @@ +import Page from '../../common/page'; + +Page(); diff --git a/example/pages/divider/index.json b/example/pages/divider/index.json new file mode 100644 index 00000000..1cb53549 --- /dev/null +++ b/example/pages/divider/index.json @@ -0,0 +1,3 @@ +{ + "navigationBarTitleText": "Divider 分割线" +} diff --git a/example/pages/divider/index.wxml b/example/pages/divider/index.wxml new file mode 100644 index 00000000..b01a8fdb --- /dev/null +++ b/example/pages/divider/index.wxml @@ -0,0 +1,17 @@ + + + + + + 文本 + 文本 + 文本 + + + + + + + + 文本 + \ No newline at end of file diff --git a/example/pages/divider/index.wxss b/example/pages/divider/index.wxss new file mode 100644 index 00000000..c24354b1 --- /dev/null +++ b/example/pages/divider/index.wxss @@ -0,0 +1,3 @@ +page { + background-color: white; +} diff --git a/packages/common/style/var.less b/packages/common/style/var.less index bc240043..35b31265 100644 --- a/packages/common/style/var.less +++ b/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%; diff --git a/packages/divider/README.md b/packages/divider/README.md new file mode 100644 index 00000000..fa21a5df --- /dev/null +++ b/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 + +``` + +### 使用hairline + +```html + +``` + +### 虚线 + +```html + +``` + +### 文本位置 + +```html +文本 + 文本 + 文本 +``` + +### 自定义属性 + +```html +文本颜色 +border颜色 +字体大小 +``` + +### 自定义样式 + +```html +文本 +``` + +## API + +### Props + +| 参数 | 说明 | 类型 | 默认值 | 版本 | +|-----------|-----------|-----------|-------------|-------------| +| dashed | 虚线 | *boolean* | false | - | +| hairline | 细线 | *boolean* | false | - | +| content-position | 文本位置,`left` `center` `right` | *string* | - | - | +| custom-style | 自定义样式 | *string* | - | - | + +### Slot + +| 名称 | 说明 | +|-----------|-----------| +| 默认 | 自定义文本内容 | diff --git a/packages/divider/index.json b/packages/divider/index.json new file mode 100644 index 00000000..e8cfaaf8 --- /dev/null +++ b/packages/divider/index.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/packages/divider/index.less b/packages/divider/index.less new file mode 100644 index 00000000..047bc27b --- /dev/null +++ b/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; + } + } +} diff --git a/packages/divider/index.ts b/packages/divider/index.ts new file mode 100644 index 00000000..5f1cc27e --- /dev/null +++ b/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: '' + } + } +}); diff --git a/packages/divider/index.wxml b/packages/divider/index.wxml new file mode 100644 index 00000000..9edadbfa --- /dev/null +++ b/packages/divider/index.wxml @@ -0,0 +1,8 @@ + + + + + \ No newline at end of file