Van Divider

Vant Divider Component

Separate content into multiple areas with customizable styles and content.

When to Invoke

Invoke this skill when:

• User needs to separate content sections
• User wants to create visual dividers with text
• User needs horizontal or vertical separators
• User wants to customize divider style (dashed, solid)
• User asks about content positioning in dividers

Features

• Horizontal Dividers: Standard horizontal separation
• Vertical Dividers: Vertical separation for inline content
• Content Support: Display text or content within the divider
• Position Control: Left, center, or right content positioning
• Style Variants: Solid or dashed lines
• Hairline Support: Ultra-thin lines for better visual effect
• Custom Styling: Full CSS customization support

API Reference

Props

Slots

Types

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

Usage Examples

Basic Usage

<template>
  <van-divider />
</template>

With Text

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

Content Position

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

Dashed Style

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

Custom Style

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

Vertical Divider

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

With Icons

<template>
  <van-divider>
    <van-icon name="star-o" /> Favorites
  </van-divider>
</template>

Section Separators

<template>
  <div class="section">
    <h3>Section 1</h3>
    <p>Content for section 1</p>
  </div>
  
  <van-divider>Section Divider</van-divider>
  
  <div class="section">
    <h3>Section 2</h3>
    <p>Content for section 2</p>
  </div>
</template>

Common Issues

1. Divider Not Visible

Make sure there's enough space around the divider:

<div style="padding: 16px 0;">
  <van-divider />
</div>

2. Vertical Divider Height

Vertical dividers take the height of their container:

<div style="display: flex; align-items: center; height: 40px;">
  <span>Left</span>
  <van-divider vertical />
  <span>Right</span>
</div>

3. Custom Color Not Working

Use both color and borderColor for consistent styling:

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

Component Interactions

With Form Sections

<template>
  <van-form>
    <van-field v-model="username" label="Username" />
    <van-field v-model="email" label="Email" />
    
    <van-divider>Optional Information</van-divider>
    
    <van-field v-model="phone" label="Phone" />
    <van-field v-model="address" label="Address" />
  </van-form>
</template>

With Card Layout

<template>
  <van-card>
    <template #title>
      Product Title
    </template>
    <template #desc>
      Product description
    </template>
  </van-card>
  
  <van-divider />
  
  <van-card>
    <template #title>
      Another Product
    </template>
  </van-card>
</template>

In Navigation

<template>
  <van-space>
    <span>Home</span>
    <van-divider vertical />
    <span>Products</span>
    <van-divider vertical />
    <span>About</span>
  </van-space>
</template>

Best Practices

1. Use semantic meaning: Add text to dividers to provide context
2. Consistent styling: Use consistent divider styles throughout the app
3. Spacing: Ensure adequate spacing around dividers for visual clarity
4. Vertical dividers: Use for inline separation, not for major sections
5. Color contrast: Ensure divider colors have sufficient contrast with background