Vant Divider split line

Introduced

import Vue from 'vue';
import { Divider } from 'vant';

Vue.use(Divider);

Code demo

Basic usage

A horizontal split line is rendered by default

<van-divider />

Show text

Insert content through the slot in the middle of the split line

<van-divider>文字</van-divider>

The location of the content

Specify where the content is located bycontent-position

<van-divider content-position="left">文字</van-divider>
<van-divider content-position="right">文字</van-divider>

Dashed

Add a dashed property to render the split line as a dashed line

<van-divider dashed>文字</van-divider>

Custom styles

You can style split lines directly from the style properties

<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
  文字
</van-divider>

Api

Props

Slots