El Divider

Divider Component

Divider component creates a dividing line that separates content.

When to Use

• Content separation
• Section dividers
• Visual grouping
• Layout organization

Basic Usage

<template>
  <div>
    <p>Content above</p>
    <el-divider />
    <p>Content below</p>
  </div>
</template>

Custom Content

<template>
  <el-divider content-position="left">Left</el-divider>
  <el-divider content-position="center">Center</el-divider>
  <el-divider content-position="right">Right</el-divider>
</template>

Dashed Line

<template>
  <el-divider border-style="dashed" />
</template>

Vertical Divider

<template>
  <div style="display: flex; align-items: center;">
    <span>Left</span>
    <el-divider direction="vertical" />
    <span>Right</span>
  </div>
</template>

API Reference

Attributes

Slots

Best Practices

1. Use direction="vertical" for inline separators
2. Use border-style="dashed" for subtle dividers
3. Position content with content-position