[new feature] add divider component (#3755)

This commit is contained in:
neverland
2019-07-04 20:51:43 +08:00
committed by GitHub
parent 6d67f4572c
commit aac691b7eb
12 changed files with 380 additions and 0 deletions
+70
View File
@@ -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 | 内容 |