Install

import { createApp } from 'vue';\nimport { Divider } from 'vant';\n\nconst app = createApp();\napp.use(Divider);\n

Usage

Basic Usage

<van-divider />\n

With Text

<van-divider>Text</van-divider>\n

Content Position

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

Dashed

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

Custom Style

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

Vertical

<van-divider vertical />\nText\n<van-divider vertical dashed />\nText\n<van-divider vertical :hairline="false" />\nText\n<van-divider vertical :style="{ borderColor: '#1989fa' }" />\n

API

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

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`
vertical `v4.4.0`	Whether to use vertical	boolean	`false`

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Name	Description
default	content

Types

The component exports the following type definitions:

import type { DividerProps, DividerContentPosition } from 'vant';\n

Theming

CSS Variables

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Name	Default Value	Description
--van-divider-margin	var(--van-padding-md) 0	-
--van-divider-vertical-margin	0 var(--van-padding-xs)	-
--van-divider-text-color	var(--van-text-color-2)	-
--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%	-

Divider

Intro