mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
84 lines
1.8 KiB
Markdown
84 lines
1.8 KiB
Markdown
# Divider 分割线
|
|
|
|
### 介绍
|
|
|
|
用于将内容分隔为多个区域。
|
|
|
|
### 引入
|
|
|
|
在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart)
|
|
|
|
```json
|
|
"usingComponents": {
|
|
"van-divider": "@vant/weapp/divider/index"
|
|
}
|
|
```
|
|
|
|
> Vant Weapp 1.0 版本开始支持此组件，升级方式参见[快速上手](#/quickstart)。
|
|
|
|
## 代码演示
|
|
|
|
### 基础用法
|
|
|
|
```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
|
|
|
|
| 名称 | 说明 |
|
|
| ---- | -------------- |
|
|
| 默认 | 自定义文本内容 |
|