Divider 分割线

介绍

分割线

引入

app.jsonindex.json中引入组件,默认为ES6版本,ES5引入方式参见快速上手

  1. "usingComponents": {
  2. "van-divider": "path/to/@vant/weapp/dist/divider/index"
  3. }

Vant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手

代码演示

基础用法

  1. <van-divider />

使用hairline

  1. <van-divider hairline />

虚线

  1. <van-divider dashed />

文本位置

  1. <van-divider contentPosition="center">文本</van-divider>
  2. <van-divider contentPosition="left">文本</van-divider>
  3. <van-divider contentPosition="right">文本</van-divider>

自定义属性

<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>

自定义样式

<van-divider contentPosition="center" customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;">文本</van-divider>

API

Props

参数说明类型默认值版本
dashed虚线booleanfalse-
hairline细线booleanfalse-
content-position文本位置,left center rightstring--
custom-style自定义样式string--

Slot

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

Divider 分割线 - 图1