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

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-divider-margin	var(--van-padding-md) 0	-
--van-divider-text-color	var(--van-gary-6)	-
--van-divider-font-size	var(--van-font-size-md)	-
--van-divider-line-height	24px	-
--van-divider-border-color	var(--van-border-color)	-
--van-divider-content-padding	var(--van-padding-md)	-
--van-divider-content-left-width	10%	-
--van-divider-content-right-width	10%	-