# Divider 分割线

### 引入

在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart)

```json
"usingComponents": {
  "van-divider": "@vant/weapp/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
### 注:属性应用在组件上需要统一使用驼峰式命名，如custom-class应变为
```html
<van-button type="primary" customClass='myClass' size="large">大号按钮</van-button>
```
### 注:事件应用在组件上需要统一使用驼峰式命名，如bind:click/bind:search/bind:before-enter应变为
```html
<van-button type="primary" onClick={()=>this.onClick()}>大号按钮</van-button>
<van-search type="primary" onSearch={()=>this.onSearch()}>大号按钮</van-search>
<van-transition type="primary" onBeforeEnter={()=>this.onBeforeEnter()}>大号按钮</van-transition>
```
### Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| dashed | 虚线 | _boolean_ | false | - |
| hairline | 细线 | _boolean_ | false | - |
| content-position | 文本位置，`left` `center` `right` | _string_ | - | - |
| custom-style | 自定义样式 | _string_ | - | - |

### Slot

| 名称 | 说明           |
| ---- | -------------- |
| 默认 | 自定义文本内容 |