Divider 分割线
区隔内容的分割线。
基础用法
对不同章节的文本段落进行分割。
青春是一个普通的名称，它是幸福美好的，但它也是充满着艰苦的磨炼。
白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
少壮不努力，老大徒伤悲。
基础用法
设置文案
可以在分割线上自定义文案内容。
雨纷纷旧故里草木深，我听闻你仍守着孤城。
左侧文字
城郊牧笛声，落在那座野村。
居中文字
缘份落地生根是我们。
右侧文字
伽蓝寺听雨声盼永恒。
设置文案
垂直分割线
使用 direction="vertical" 创建垂直分割线。
雨纷纷旧故里草木深
垂直分割线
虚线
设置 border-style="dashed" 以呈现虚线。
内容区域
内容区域
点状虚线
内容区域
虚线
自定义颜色和粗细
使用 color 和 border-width 属性自定义分割线的颜色和粗细。
默认样式
自定义颜色
自定义粗细 (2px)
粗线 + 虚线
带文字的自定义分割线
重要分割
自定义颜色和粗细
在 Nuxt 中使用
Divider 组件完全支持 Nuxt 3/4 环境。作为纯表现型组件，其 HTML 结构在服务端直接生成，并配合内联或外部样式表实现首屏的完美视觉分割。
YH-UI 在 Nuxt 中可以极致流畅地运行。
Nuxt SSR
组件 1组件 2组件 3
Nuxt 中使用
SSR 注意事项：
- ✅ 水平 (horizontal) 和垂直 (vertical) 方向在服务端正确生成
- ✅ 文案位置 (content-position) 在 SSR 阶段即已正确定位
- ✅ 虚线样式 (dashed/dotted) 和自定义粗细通过样式在服务端生效
- ✅ 自动导入功能让开发体验更爽快
性能小贴士
由于 Divider 组件结构极简，它在 SSR 场景下几乎不产生任何多余的 JS 负载，非常适合在追求加载速度的内容型 Nuxt 页面中使用。
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| direction | 分割线方向 | 'horizontal' | 'vertical' | 'horizontal' |
| content-position | 文案位置 | 'left' | 'center' | 'right' | 'center' |
| border-style | 分割线样式 | 'solid' | 'dashed' | 'dotted' | 'double' | 'solid' |
| border-width | 分割线宽度 | string | number | 1px |
| color | 分割线颜色 | string | — |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 分割线文案内容 |
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-divider-border-color | 分割线边框颜色 | var(--yh-border-color-lighter) |
--yh-divider-border-width | 分割线边框宽度 | 1px |
--yh-divider-border-style | 分割线边框样式 | solid |
--yh-divider-margin-horizontal | 水平方向外边距 | 24px 0 |
--yh-divider-margin-vertical | 垂直方向外边距 | 0 8px |
--yh-divider-text-color | 文案颜色 | var(--yh-text-color-primary) |