---
url: /components/divider.md
---
# Divider 分割线

区隔内容的分割线，渲染为 `role="separator"` 的 div，支持水平 / 垂直方向与 solid / dashed / dotted / double / none 五种线型。水平方向提供默认插槽时，文案以绝对定位浮于线上（背景色遮线），上下留白由组件自带（`margin: 16px 0`）。

## 基础用法

默认居中插入文案；`content-position` 可切换 left / center / right。不提供默认插槽时渲染为纯线。

## 纯分割线分节内容

不带文案的水平线常用于段落、表单分组之间的视觉分隔。

## 线型

`border-style` 支持 solid（默认）/ dashed / dotted / double / none（none 隐藏线条，仅保留文案，可当纯标题用）。

## 垂直分割线

`direction` 为 vertical 时渲染 1px 竖线（高度 1em、垂直居中），常用于按钮组、工具条中的行内分隔。

## 垂直分割线的线型

垂直方向同样支持 dashed / dotted 线型，与行内元素混排时保持对齐。

## 组合场景：设置表单分组

左侧文案分割线 + 垂直分割线组合出常见的设置页结构：分区标题、字段行内分隔。

## 使用提示

* 水平分割线自带上下 `margin: 16px 0`，文案区域以 `--eb-bg-color` 背景遮线，放在非纯背景容器上时请同步调整该背景。
* 文案是否渲染取决于是否有默认插槽（`v-if` 的插槽判定），传空字符串不等于无插槽，请直接不写插槽内容。
* 垂直分割线高度为 1em 并垂直居中，外层容器建议 `display: flex; align-items: center`。

## API