vant/src/divider

Divider

Intro

Separate content into multiple areas.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

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

const app = createApp();
app.use(Divider);

Usage

Basic Usage

<van-divider />

With Text

<van-divider>Text</van-divider>

Content Position

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

Dashed

<van-divider dashed>Text</van-divider>

Custom Style

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

API

Props

Attribute	Description	Type	Default
dashed	Whether to use dashed border	boolean	false
hairline	Whether to use hairline	boolean	true
content-position	Content position，can be set to left right	string	center

Slots

Name	Description
default	content

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@divider-margin	@padding-md 0	-
@divider-text-color	@gray-6	-
@divider-font-size	@font-size-md	-
@divider-line-height	24px	-
@divider-border-color	@border-color	-
@divider-content-padding	@padding-md	-
@divider-content-left-width	10%	-
@divider-content-right-width	10%	-