Divider 分割线

介绍

用于将内容分隔为多个区域。

引入

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

  1. "usingComponents": {
  2. "van-divider": "@vant/weapp/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>

自定义属性

  1. <van-divider contentPosition="center" textColor="#1989fa">文本颜色</van-divider>
  2. <van-divider contentPosition="center" borderColor="#1989fa">
  3. border 颜色
  4. </van-divider>
  5. <van-divider contentPosition="center" fontSize="18">
  6. 字体大小
  7. </van-divider>

自定义样式

  1. <van-divider
  2. contentPosition="center"
  3. customStyle="color: #1989fa; border-color: #1989fa; font-size: 18px;"
  4. >
  5. 文本
  6. </van-divider>

API

Props

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

Slot

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

Divider 分割线 - 图1